What is CSS?
CSS, or Cascading Style Sheets, is a vital language used to define the look and feel of documents created with markup languages like HTML. It's one of the key building blocks of the World Wide Web, alongside HTML and JavaScript.
With CSS, you can control how HTML elements are presented across various platforms, covering aspects such as colors, fonts, layouts, and more. This separation of content (represented by HTML) from presentation (handled by CSS) makes web development smoother, enhances accessibility, and offers greater flexibility in how web pages are displayed.
The term "cascading" highlights how CSS manages and prioritizes various style rules for the same element. This approach ensures that styles are applied in an organized manner, promoting efficient design throughout an entire website.
There are three primary types of CSS (Cascading Style Sheets) based on how they are implemented within an HTML document:
Inline CSS:
Definition: Styles are applied directly to individual HTML elements using the style attribute.
Example:
<p style="color: blue; font-size: 16px;">This is a blue paragraph.</p>
Use Cases: Primarily for quick, specific styling adjustments to a single element, but generally discouraged for extensive use due to reduced readability and maintainability.
Example:
<p style="color:#009900;
font-size:50px;
font-style:italic;
text-align:center;">
Inline CSS
</p>
Internal (or Embedded) CSS:
Definition: Styles are defined within a <style> tag placed in the <head> section of an HTML document.
Example:
<head>
<style>
h1 {
color: green;
}
p {
font-family: Arial;
}
</style>
</head>
Use Cases: When styling is specific to a single HTML page and does not need to be shared across multiple pages.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.main {
text-align: center;
}
.GFG {
color: #009900;
font-size: 50px;
font-weight: bold;
}
.geeks {
font-style: bold;
font-size: 20px;
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">Internal CSS</div>
<div class="geeks">
Implementation of Internal CSS
</div>
</div>
</body>
</html>
External CSS:
Definition: Styles are defined in a separate .css file and linked to the HTML document using the <link> tag within the <head> section.
Example:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="GFG">External CSS </div>
<div id="geeks">
This shows implementation of External CSS
</div>
</div>
</body>
</html>
Tags:
HTML