CSS Basics - Grouping Selectors

Yet again, you can group different selectors. For example you want to apply same style to h2 and p, you could write the CSS below:

h1 {color:blue;}

p {color:blue;}

In the above CSS you repeat information that is the same (i.e. color:blue). To shorten the Cascading Style Sheet, you can group the selectors together with a comma. Doing this will apply the rules withing the brackets to both the selectors. You can write it this way.

h1, p {color:blue;}

Of the several selectors (each matching a different part of the markup, HTML), the three most basic ones you'll come across most often are:

p {}: element selector

This selector matches elements of the name on the page.

.example{}: class selector

The selector matches elements that have a class attribute with the value specified. Therefore, the above would match <p class=”example”>, <li class=”example”> , <div class=”example”> or any other element with class “example”.

#example{}: id selector

Matches every element that has an id attribute with the value specified. All element with the id of example would match.

This is all for the day. Come back for more on topics like software development, android application development, web designing, application development, etc.

Posted in: Cascading Style Sheets,CSS,web design,web development,website designing