Tech Junkie Blog: CSS Grouping Selectors

Tuesday, May 1, 2018

CSS Grouping Selectors

In CSS you can group your selects into one declarations. For example you want to create a read alert text for your h2 HTML element tag.

You can define each property one at a time like so

<style>
        h2{font: bold 25px arial, verdana;}
        h2{color: red;}
        h2{background:black;}
</style>


When you type in <h2>Alert</h2> you will get this effect





You can achieve the same effect by grouping the selectors into one declaration like the following.

    <style>
        h2 {
            font: bold 25px arial, verdana;
            color: red;
            background: black;
        }
    </style>

As you can see it is much cleaner and easier to read.

No comments:

Post a Comment