"Tekken 3 APK Download Best Android Fighting Game Free"

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

 

Home Forums Grouping Selectors Css Tutorial

This topic contains 2 replies, has 1 voice, and was last updated by  Stylebizz 3 years, 10 months ago.

  • Author
    Posts
  • #36249 Reply

    Stylebizz
    Member

    Grouping Selectors Css Tutorial
    [See the full post at: Grouping Selectors Css Tutorial]

  • #36250 Reply

    3d baby shower invitations

    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

  • #36251 Reply

    Faizan Shahid

    We are using Hostgator ….!

Reply To: Grouping Selectors Css Tutorial
Your information:





<a href="" title="" rel="" target=""> <blockquote cite=""> <code> <pre> <em> <strong> <del datetime=""> <ul> <ol start=""> <li> <img src="" border="" alt="" height="" width="">