![[Solved]: Why isn’t my CSS being applied?](https://www.webdevsplanet.com/assets/images/blog/why-isnt-my-css-being-applied.jpeg)
[Solved]: Why isn’t my CSS being applied?
CSS plays a crucial role in web design, allowing developers to control the visual presentation of their web pages.
However, you may sometimes experience scenarios where the CSS code does not get applied, thus you fail to see the desired changes on the page. This is very frustrating and can waste so much of your time trying to figure out what the issue is.
In this article, we will cover the common reasons why CSS might not seem to work as expected and explore effective solutions.
Why Your CSS Isn't Working and How to Fix It
1. Selector Specificity and Overriding Styles
CSS styles follow a strict hierarchy of specificity. Inline styles take precedence over internal stylesheets, which in turn take precedence over external ones.
Within the external or internal stylesheet, if you have two or more styles for the same element, the one that appears later in the stylesheet takes precedence over the previous styles.
The IDs (e.g. "#mydiv") and classes (e.g. ".container") are considered as more specific selectors and take precedence over the tag name selectors (e.g. "p", "div", "h1", etc).
When conflicting styles are applied to an element, the browser follows a specificity hierarchy to determine which style to prioritize. The one that appears lower in the stylesheet or the most specific style overrides previous styles.
Example 1:
/* First style */
p {
color: blue;
}
/* Second style */
p {
color: green;
}
In this example, we added two styles for the same paragraph element (though you shouldn't do this); the first in blue, and the second in red. The second one takes charge and the paragraph is displayed as green in color. This is because it appears lower in the stylesheet. Making changes to the color property of the first p selector will have no impact on the paragraphs' color as the latter will be prioritized.
Example 2:
/* Less specific selector */
p {
color: blue;
}
/* More specific selector */
#myParagraph {
color: red;
}
In this example, we styled all the paragraphs to be blue. We then styled the ID selector, "myParagraph" to red color. If a paragraph has the ID attribute "myParagraph", the red color will be applied to it instead of blue. This is because the selector #myParagraph is more specific than the p selector.
Example 3:
<p id="myParagraph" style="color: purple;">My example paragraph.</p>
Let's say the above paragraph is on a page that uses the stylesheet in Example 2. Despite it being a paragraph and having the ID attribute "myParagraph", it will be displayed in purple color. This is because the inline CSS style="color: purple;" has a higher hierarchy in specificity and overwrites the internal or external stylesheet styles.
How to Fix CSS Specificity Issues
To troubleshoot the CSS issues due to specificity hierarchy, start by checking whether the element you are styling has inline CSS in HTML. If it does, then make your changes there.
If no inline CSS, or making changes to it doesn't help, then proceed to check whether there is internal CSS on the page and whether there are conflicting styles for the targeted element. If there is, prioritize checking the IDs and class selectors followed by the styles that appear lowest for the element in the stylesheet.
If this still doesn't help, check the external stylesheets following the order in which they are linked from lowest to the uppermost and repeat the same as in the internal stylesheets.
2. File Paths and Loading Order
Another common cause is mistyping the filename or path to your external CSS files. This causes the stylesheet not to be loaded on the page, and thus not being applied to.
When linking an external stylesheet, double-check and ensure that the file path is accurate and that there are no typos.
Ensure to use the <link> tag to link to the external stylesheet, within the <head> section, and using the href attribute.
In addition, confirm that the stylesheet link appears before the JavaScript imports in the HTML file. An example:
<!-- Correct Order -->
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js"></script>
<!-- Incorrect Order -->
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
In the incorrect order, the styles may not be applied as the JavaScript might manipulate the DOM before the styles are loaded.
3. Typos and Syntax Errors
Even as an experienced developer, you can fall victim to simple typos and syntax errors. A missing semicolon, a misplaced curly brace, or a typo in a property name can disrupt the entire stylesheet. Consider:
/* Correct */
body {
background-color: #f0f0f0;
}
/* Incorrect (typo in property name) */
body {
backgroud-color: #f0f0f0;
}
In this case, the background color won't be applied due to the typo. Regularly reviewing the code and using linting tools can help catch such errors.
4. Cache Issues
Browsers often cache stylesheets to enhance page load times. However, this can lead to frustration when changes don't appear instantly. To force the browser to fetch the fresh version, try a hard reload (Ctrl + F5) or clear your browser cache entirely.
Here is how to clear the browser cache for a specific website if you don't want to clear everything.
5. Inheritance and Default Styles
Understanding the CSS inheritance model is crucial. If a style is applied to a parent element, it might not automatically cascade down to its children. Consider:
/* Parent style */
.container {
font-size: 16px;
}
/* Child style - won't inherit automatically */
.child {
color: red;
}
To resolve this, explicitly set styles for child elements or use the inherit keyword:
.child {
color: inherit;
}
The CSS !important Rule
The !important rule in CSS is used to add more importance to a property/value than normal.
When used in styling an element, it overrides ALL the styling rules for that specific property on that element.
Example
<p id="sampleId">My example paragraph.</p>
/* Less specific selector */
p {
color: purple !important;
}
/* More specific selector */
#sampleId {
color: red;
}
Following the hierarchy of specificity, the above paragraph is supposed to be displayed in red due to the ID selector. However, despite the ID selector's higher specificity, the paragraph is displayed in purple.
This is because the !important rule overrides the color property for the paragraph element.
Therefore, you can fix your CSS styling issue by adding the !important rule to the property.
When this rule is used to apply style to an element, the only way to override it later is to include another !important rule on a declaration with the same (or higher) specificity in the source code.
This introduces a problem and makes the CSS code confusing and the debugging will be hard, especially if you have a large style sheet.
It is therefore recommended to only use this rule when you absolutely have to.
Conclusion
By addressing these common issues, you can troubleshoot your CSS issues and ensure that the styles are applied as intended.
It is advisable to use your browser's developer tools to inspect elements and identify which styles are being applied.
