Element Selectors in CSS July 20, 2009

Why is CSS preferred by all the designers? Well that is because of its ability to separate presentation from the content and most importantly its power to edit the document style by changing a single line of code. Don’t believe me? Find it yourself!

An element selector is an HTML element. There are other types of selectors too, which we will explore later. So the element selectors are the most basic selectors in your document structure. html, body, p, div, span, headings, etc are all different types of element selectors of a document. We can apply certain rules to them to stylize these selectors. For example, if we want all the paragraphs to be displayed in red color, we can do that by;

p { color: red}

Or if we want the heading 2 to appear with a gray background;

h2 { background-color: gray}

Grouping multiple declarations

We saw how to apply a single declaration to an element selector. But you can have multiple declarations in the same rule. See this example:

p { color: red; background-color: gray;}

In this rule, we have combined two declarations; (i) the font-color in all paragraphs to be red (ii) background color of all paragraphs to be gray. Semicolon is used as a separator between these declarations. If you notice, the last declaration is also followed by a semicolon. It is rather important to do so since browsers ignore the whitespaces in the style sheet. To make this clear see following example:

p { color: red; background-color: gray font-size: 10px; }

Since there is no ‘;’ after the value ‘gray’ for background-color, browsers check if the property has multiple values. But since font-size is not a valid value and background-color does not take multiple values, both the properties will be ignored. But note that the last declaration of the group need not end with a semicolon. For instance;

p { color: red; background-color: gray}

This will work absolutely fine in most of the browsers. But at a later stage, if you want to add some more declarations to the group, you must add a semicolon after this declaration, else it would ignored as shown in above example.

Grouping Element Selectors

We saw techniques to apply one or more styles to a single selector. But what if, you want to apply same style to more than one element selector. For instance, if you want heading 2 and paragraph both to be in red. It would be stupid of us if we write the same style for another element. There is a better way to do that;

h2, p { color: red}

In this example, we are using a comma to group two selectors, viz. ‘h3′ and ‘p’. Similarly you can group multiple selectors. This way you generate fewer lines of styles in your style sheet which in turn makes it easier for you to find out selectors and styles at a later stage when your style sheet has numerous rules defined in it.

Grouping multiple declarations with multiple selectors

By now we grouped multiple declarations for a single selector and we also grouped multiple selectors with a single declaration. Now it’s turn to group multiple declarations, with multiple selectors. Confusing enough isn’t it! Well this example would make it clear;

h2, p {

                color: red;

                background-color: gray;

                font-size: 10px;

}

These were some powerful and effective techniques of CSS. We will learn more in our coming articles, but for now I hope you enjoyed reading this.