Grouping Selectors Css Tutorial

Tutorial # 6

By grouping selectors you can specify one set of declaration into multiple elements which are in page like Heading-1, Heading-2, Title and all other elements according to requirements. For Example : Below code shows a declaration text-align : center and Heading-1, Heading-2, Paragraph as elements.

p,h1,h2

{

text-align: center;

}

If you are following my tutorials you can declare a CSS rule in the same way. Simply a comma is inserted for grouping common declarations.

You can also use this in complex examples like if there’s a class named navigation and a title of header which have both common declaration say font-size: 30px;

p.navigation , h1#title

{

font-weight: bold;

font-size : 30px;

}

Example:

Now according to last tutorial we can have implemented some css code into html. We will modify that code output last is shown in the following screen shot.

<html>
<head><title> Tutorial # 6 group selectors </title>
<style type=”text/css”>
<!–.blue {color:blue}
h1#red {color:red}–></style>
</head><body><h1 id=”red”> This is H1 Heading </h1><p class=”blue”> THis is first paragraph </p><p class=”blue”> This is 2nd paragrpah with <em>emphasized</em> word </p><p> This is 3rd paragraph and this with <em> new emphsized word </em> </p>
</body></html>

In the above example heading of red color, first and 2nd paragraph are blue while 3rd paragraph is black. We will make 3rd paragraph red. Now 3rd and heading will be red so we will combine heading and 3rd paragraph into group selector.

According to these requirements we will modify above code. Modifications will be highlighted in the code.

See below in the code comma p is inserted with the heading h1. See the highlighted line.