11.1 Cascading
CSS core principles include cascading, inheritance, and specificity. Grasping these principles helps better control the styling and appearance of web pages.
Cascading
Cascading is a core CSS principle that dictates how styles are applied when multiple rules conflict. During cascading, the browser uses the following rules to resolve conflicts:
-
Source order: Styles can be defined in different places—external style sheets (CSS files),
internal style sheets (inside a
<style>tag), and inline styles (in thestyleattribute of an HTML element). Rules are applied in the order they appear. - Specificity: Each selector has its own level of specificity. The higher the specificity of a selector, the higher its priority.
-
Importance: Rules with the
!importantdirective have the highest priority and are applied even when other conflicting rules exist.
Cascading Example:
In this example, the background color will be yellow as the inline style has priority over the internal style. The text color will be red since the inline style takes precedence over the internal one.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Cascading Example</title>
<style>
body {
background-color: lightblue; /* Internal style */
}
p {
color: green;
}
</style>
</head>
<body style="background-color: yellow;"> <!-- Inline style -->
<p style="color: red;">CSS Cascading Example</p>
</body>
</html>
11.2 Inheritance
Inheritance is the process by which child elements take on styles from their parent elements. Not all CSS properties are inherited. Inherited properties include text color, font family, line height, and some others.
Inheritance Example:
In this example, the <p> element inherits the font and color from the <body>
element, while the font size from the .container class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Inheritance Example</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<p>This text inherits the font and color from body, and the font size from ".container".</p>
</div>
</body>
</html>
11.3 Specificity
Specificity determines which CSS rule will be applied to an element when multiple rules match the same element. Specificity is calculated based on the number and types of selectors in the rule.
Specificity Calculation Rules:
- Inline styles have the highest specificity
- ID selectors have higher specificity than classes, pseudo-classes, and attributes
- Classes, pseudo-classes, and attributes have higher specificity than elements and pseudo-elements
- Elements and pseudo-elements have the lowest specificity
Specificity Calculation Example:
In this example, the text will be red because the #unique selector has the highest specificity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Specificity Example</title>
<style>
p {
color: blue; /* Specificity 0-0-0-1 */
}
.highlight {
color: green; /* Specificity 0-0-1-0 */
}
#unique {
color: red; /* Specificity 0-1-0-0 */
}
</style>
</head>
<body>
<p class="highlight" id="unique">This text will be red.</p>
</body>
</html>
11.4 Importance
CSS allows developers to explicitly specify style priority with the !important directive. Rules
with this directive will be applied regardless of the specificity of other rules.
!important Example:
In this example, the text will be blue because the rule with !important has the highest priority.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS !important Example</title>
<style>
p {
color: blue !important;
}
.highlight {
color: green;
}
</style>
</head>
<body>
<p class="highlight">This text will be blue due to "!important".</p>
</body>
</html>
11.5 CSS Principles Usage Examples
Examples of using CSS principles in real-world tasks.
Cascading and Specificity Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Cascading and Specificity Example</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
}
.important {
color: red;
}
</style>
</head>
<body>
<p class="important">This text will be red because .important has higher specificity than "p".</p>
</body>
</html>
Inheritance and Specificity Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Inheritance and Specificity Example</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
color: green; /* Overrides color from body for all child elements */
}
.highlight {
color: red; /* Has higher specificity than .container */
}
</style>
</head>
<body>
<div class="container">
<p class="highlight">This text will be red due to .highlight's specificity.</p>
</div>
</body>
</html>
GO TO FULL VERSION