How to Cascade and Nest with CSS - Part 1

Overview

If you didn't know, CSS stands for Cascading Style Sheets. It's a styling language used in web development to specify sizes, containers, colors, formatting, and, to some degree, interactivity.

Basic CSS is simple. Defining classes which alter the content of tags which implement those classes. But, what a lot of new developers don't realize or utilize is the power of CSS selectors. This is the concept of nesting, or cascading, formatting data according to a set of criteria.

Priorities

Let's start with a simplistic use-case. You want to create a page in which the color of the text is red except in header tags. Let's first take a look at a screenshot, so we can see what we are trying to achieve.

1.png

And now, let's look at the code to achieve this.

<html>
    <head></head>
    <body>
        <style>
            body
            {
                color:red;
            }
            h1
            {
                color: green;
            }
        </style>

        <p>How's life</p>

        <h1><p>HI</p></h1>
    </body>
</html>

What I'm demonstrating here is the concept of priority. In this case, the body has a lower priority over headers then the header tag does. Or, in other words, the closer the selector is to the content it's trying to format, the higher the priority it has. In this code example, you can see the line that looks like this:

<h1><p>HI</p></h1>

This is the header tag which displays as green. What's important to note is if we add an additional CSS class which looks like this:

p
{
    color: blue;
}

Then, that header will turn out to be colored blue. Does it make sense why? If not, read the priority rule just a few lines above.

With this additional CSS p class, the page should now look like this:

2.png

Well wait a second. You may be wondering why the text 'This is in the body' has also changed to be colored blue. Well, once again, think about the priority rule and then re-examine the code above. It should start to sink in how the priority rule works and the cascading consequences it can have on your web pages. Remember, a consequence doesn't always have to be a bad thing.

Hopefully you learned a thing or two from the first part of Cascading and Nesting with CSS. Stay tuned for more parts where I detail how this can be useful, as well as how we can limit its consequences with more complex criteria.


Shawn Clake

Freelance Developer

Software Engineering Student - U of R

Current: Assistant to Manager of Instructional Tech - U of R

Web|Unreal|C++|Java|Python|Go

Web: http://shawnclake.com

Email: shawn.lavawater@gmail.com

Email 2: shawn.clake@gmail.com

Posted in Tutorials on Feb 13, 2017