How CSS resolves conflicts: Cascading

šŸ“– Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!

In CSS if we have multiple rules, with the same specificity, competing for the same elements then the last declaration always wins.

This is the C, the Cascading, from the CSS acronym.

Cascading rules in the same CSS file

For example, if we have:

p { color: red };
/// other CSS rules
p { color: blue};

Then our paragraphs will be blue.

Cascading rules when importing different CSS files

This is also available when importing CSS files. If the stylesheets have conflicting rules for the same elements, the last imported rule will be applied.

// red.css
p { color: red };
// blue.css
p { color: blue };

And if we import both of these files in the same document

// index.html
<link rel="stylesheet" type="text/css" href="red.css">
<link rel="stylesheet" type="text/css" href="blue.css">

Then our paragraphs will be blue given the order of the files.

It does not matter even if we have the decoration of the CSS in the head of the HTML document. The last imported rule will win.

// index.html
<html>
    <head>
        <style>
            p {color: red;}
        </style>
        <link rel="stylesheet" type="text/css" href="blue.css">
    </head>
    <body>
        <p>This will be a blue paragraph.</p>
    </body>
</html>>

Cascading rules in the same declaration block

Finally, this also applies to the actual declarations blocks of the properties. Take for example the following code:

Like in the previous examples, the paragraphs will still be blue.

p {
    color: red;
    font-size: 16px;
    line-height: 32px;
    background-color: #eee;
    border: none;
    color: blue;
}

By the way, because of situations like this one, it may be a good practice to have the properties declared in alphabetical order and avoid just dropping a new declaration at the end of the block.

p {
    background-color: #eee;
    border: none;
    // conflicts are easyer to track 
    color: red;
    color: blue;
    font-size: 16px;
    line-height: 32px;
}

šŸ“– Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

Neural Networks for JavaScript developers
Presale - 15$ free coupon

Hi friend! Before you go, just wanted to let you know that in March 2023 I will be launching the TensorFlow.Js by Example course.

This course will include basic concepts of AI and Neural Networks done with TensorFlowJs such as:

  • Working with datasets
  • Visualizing training
  • Deep Neural Networks in JavaScript
  • Reinforcement Learning
  • Convolutional neural networks
  • and much more ...

Also, there will be a lot of examples as:

  • Object detection
  • Natural language processing
  • Face and voice recognition
  • Gaming AI

Join now the waiting list and get a 15$ coupon off the launching price!

X