Embedded CSS

In the below code, the style is embedded inside the ‘style’ tag as shown in Lines 8-17. Here, we have defined two classes i.e. ‘h3_blue (Lines 21-23)’ and ‘h3_red (Lines 26-28)’. Then, the selectors at Lines 9 and 13 targets the class ‘h3_blue’ & ‘h3_red’, and change the color to blue and red respectively. In this chapter, we will discuss the selectors (e.g. h3.h3_blue) in more details.

CSS has three parts:

Selectors: E.g. p, h3, .h3_blue
Properties: E.g. color, margin, width
Values: E.g. red, 20px, 10%

NOTE: In CSS, comments are written between /* and */.


    	  
    	    1 <!-- css.html -->

            2

            3 <!DOCTYPE html>

            4 <html>

            5 <head>

            6 <title>CSS Tutorial</title>

            7

            8 <style type="text/css">

            9    h3.h3_blue{ /*change color to blue*/

            10    color: blue;

            11  }

            12

            13  h3.h3_red{ /*change color to red*/

            14     color:red;

            15  }

            16 </style>

            17

            18 </head>

            19 <body>

            20

            21 <h3 class='h3_blue'> Heading 1 </h3>

            22 <h3 class='h3_blue'> Heading 3 </h3>

            23 <h3 class='h3_blue'> Heading 3 </h3>

            24

            25

            26 <h3 class='h3_red'> Heading 1 </h3>

            27 <h3 class='h3_red'> Heading 3 </h3>

            28 <h3 class='h3_red'> Heading 3 </h3>

            29

            30 </body>

            31 </html>

Previous Next