CSS Conflicts
Premium Content - Free Preview
CSS Cascades, Conflicts, Complexities and Consoles
CSS stands for Cascading Style Sheets. The cascade is the algorithm used to determine how a given element should look. Each element can have many different relevant CSS rules, and these can often conflict with each other. As a general rule, the more specific CSS rule will "beat" the less specific CSS rule to decide the final appearance of an element.
CSS Source
Browser Default vs. Custom CSS
A browser provides default styles, but these are overridden by custom CSS styles. For example, <h1> is given a default large size by browsers, but you can easily over-ride this by assigning <h1> headings a specific size and appearance.
External CSS vs. Internal CSS
CSS in inline styles overrides CSS from external styles. While you can sometimes use internal CSS to quickly over-ride external CSS, you should generally keep all your CSS in external stylesheets.
Here's the list of CSS priorities by common source:
- Inline CSS
- Internal Stylesheet
- External Stylesheet
- Browser default
CSS Order of Rules
If conflicting CSS rules have equal weight (see below), the rule that appears later in the CSS file will 'win'. This type of conflict should generally be avoided within your own CSS. However, you can use this fact to override CSS from libraries you are using, by making sure your CSS comes last. This rule also applies to the order that CSS is included from external stylesheets, so include your own CSS file after a library CSS file so your CSS has precedence.
Example
Here's an example HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Static Store</title>
<link rel="stylesheet" type="text/css" href="library.css">
<link rel="stylesheet" type="text/css" href="yourStyle.css">
</head>
<body>
<h1>Sample File</h1>
<p>Hello world</p>
</body>
</html>
And here are the two CSS files in uses:
library.css
h1 {
color: darkgreen;
font-size: 22px;
}
yourStyle.css
h1 {
color: darkred;
font-size: 18px;
}
This is how your page will look:
Both CSS files had a rule for h1, but the file included second takes priority, so its CSS was applied.
End of Free Content Preview. Please Sign in or Sign up to buy premium content.
All Node Comments