CSS Priority (Cascading Order)
When multiple CSS rules apply to the same HTML element, the browser uses a set of rules to determine which styles to apply. This set of rules is known as the “cascading order.”
Here’s how the priority works, from highest to lowest:
1. Inline Styles
Inline styles have the highest priority. These styles are applied directly to an HTML element using the style attribute.
2. Internal and External CSS
Both internal (embedded) and external stylesheets have a lower priority than inline styles. However, their order of application is determined by specificity and the order in which they appear in the HTML document.
3. Browser Default Styles
If no other styles are applied, the browser’s default styles will be used. These are the basic styles that browsers apply to HTML elements by default.
Example of Overriding Styles
Let’s say you have an external CSS file, internal CSS, and an inline style all defining a color for the <h1> element.
External CSS (styles.css):
css
h1 {
color: navy;
}
External CSS (styles.css):
html
<head>
<style>
h1 {
color: orange;
}
</style>
</head>
Inline Style:
<h1 style=”color: red;”>This heading is red.</h1>
Output:
In this case:
1. The inline style (color: red;) will override both the internal and external styles, making the heading red.
2. If the inline style is removed, the internal style (color: orange;) will take precedence over the external style.
3. If both inline and internal styles are removed, the external style (color: navy;) will apply.
Specificity Calculation
Here’s a quick way to understand specificity:
• Inline styles have the highest specificity.
• ID selectors (e.g., #id) have higher specificity than class selectors (e.g., .class), attribute selectors (e.g., [type=”text”]), and pseudo-classes (e.g., :hover).
• Class selectors, attribute selectors, and pseudo-classes have higher specificity than element selectors (e.g., h1, p) and pseudo-elements (e.g., ::before, ::after).
Example Calculation:
• Element selector (h1): 0,0,0,1
• Class selector (.class): 0,0,1,0
• ID selector (id): 0,1,0,0
• Inline style: 1,0,0,0
Example:
Output:
In this example:
• The inline style (color: red;) has the highest specificity and makes the text red.
• If the inline style is removed, the ID selector (special { color: orange; }) will take precedence.
• If both the inline style and ID selector are removed, the class selector (.text { color: blue; }) will apply.
• If all three are removed, the element selector (p { color: green; }) will apply.
CSS Comments
CSS comments are used to explain your code and make it more readable. Comments are ignored by browsers, so they don’t affect how the CSS is applied to the HTML.
How to Write CSS Comments
CSS comments start with /* and end with */. Anything written between these two symbols is considered a comment and is ignored by the browser.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
/* p { color: green; } */
p {color: red;}
/* p {
color: blue;
margin: 10px;
} */
</style>
</head>
<body>
<p>This is a Paragraph.</p>
</body>
</html>
Output:
In this example:
• Commented Out Rule (p { color: green; }): This rule is commented out using /* … */, so it will not be applied to any <p> elements.
• Active Rule (p { color: red; }): This rule is active and will apply a red color to all <p> elements.
• Commented Out Block: The block of CSS code that sets the color to blue and adds a margin of 10px is commented out and will not be applied.
CSS comments are a valuable tool for improving the readability and maintainability of your code. By using them effectively, you can make your CSS more understandable for yourself and for others who may work with your code in the future.
Course Video
YouTube Reference :
Practice Scenario
Scenario 1: Inline vs. Internal vs. External CSS
Objective: Understand the order of priority between inline styles, internal styles, and external styles.
Expected Output: Styles applied based on specificity rules.
<!DOCTYPE html>
<html>
<head>
<title>CSS Priority Example</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
<style>
.text {
color: green;
}
</style>
</head>
<body>
<h1 class=”text” style=”color: red;”>This is a heading</h1>
</body>
</html>
External CSS (styles.css):
.text {
color: blue;
}
Output:
Scenario 2: Class vs. ID vs. Element Selector
Objective: Understand the order of priority between class selectors, ID selectors, and element selectors.
Expected Output: Styles applied based on specificity rules.
Output:
Scenario 3: Combining Selectors
Objective: Understand how combining selectors affects specificity.
Expected Output: Styles applied based on combined specificity.
Output:
Scenario 4: Inline Styles with Higher Specificity
Objective: Show that even with higher specificity, inline styles take precedence.
Expected Output: Inline styles override even the most specific external/internal styles.
Output:
Scenario 5: Basic CSS Comment
Objective: Add comments to explain CSS rules.
Expected Output: Properly documented CSS file with no impact on the visual presentation.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Basic CSS Comment Example</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>
<body>
<h1 class=”title”>Hello, World!</h1>
<p class=”intro”>This is an introductory paragraph.</p>
</body>
</html>
CSS Code (styles.css):
/* This is the main heading style */
.title {
color: blue; /* Set text color to blue */
font-size: 24px; /* Set font size to 24 pixels */
}
/* This is the introductory paragraph style */
.intro {
color: green; /* Set text color to green */
font-size: 16px; /* Set font size to 16 pixels */
margin-top: 20px; /* Add top margin of 20 pixels */
}
Output:
Scenario 6: Temporarily Disabling a Style
Objective: Use comments to temporarily disable a style for testing.
Expected Output: Styles disabled using comments.
Output:
