Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What does the cascading portion of CSS means ?

  • Last Updated : 08 Oct, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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 a the below example.

Example:



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.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!