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-1Heading-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>

 See Output 1

Css example

  • 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.

See Output 2

<html>
<head><title> Tutorial # 6 Grouping selectors </title>
<style type=”text/css”>
<!–.blue {color:blue}
h1#red , p {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>

 

Css example group selectors

 

Download All Source Files

See More Tuorials

Tutorial#5

Tutorial#4

Tutorial#3

Tutorial # 2

Tutorial # 1
css

 

5 thoughts on “Grouping Selectors Css Tutorial”

  1. Great blog here! Also your site loads up very fast! What
    web host are you using? Can I get your associate link in your host?
    I desire my web site loaded up as quickly as yours
    lol

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>