What does the cascading portion of CSS means ?
Last Updated :
02 Jun, 2023
CSS simplifies the task of maintaining a web document by separating its style information, which includes font size, font color, line width, and background color. This separation allows you to apply the same style rules to multiple web pages. CSS allows you to apply a style multiple times on a single web page. The style in a CSS file is defined according to the rules of CSS recommendation that suggests how a web page should be presented. A CSS file contains the style code for the structure, which includes a heading, listing, paragraph, and links.
Now talking about Cascading in CSS means the styling rules. This is the part where CSS can become unnecessarily complicated, even if the ability to use the cascading is occasionally useful.
So, let’s start this by asking a question, “What if you have two CSS classes that have conflicting properties?” Which one “wins” and is applied? Let’s look at the below example.
Example: Here is an example of two CSS classes conflicting with each other.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 {
font-size: 40px;
text-align: center;
color: red;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>
The second style gets applied because
it is applied after the first.
</p>
</body>
</html>
|
Output:
We have two color properties with the same h1 tag. So which one gets applied? Here comes the role of C in CSS, Since they’re equal, the one that comes last wins. So in this case, the h1 would be green. So remember the rule: when everything is equal, the last one gets applied.
What does C in CSS stand for? CASCADING. So cascading means, if we list a style earlier in the document and we say it’s one way, and then later in the document, we can say it’s a different way, the thing that’s later in the document wins. Styles of higher precedence will override the rules of lower precedence.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...