CSS Types

Types of CSS:

CSS styles are divided into three types. they are as follows :

                                            1. Inline Style Sheet
                                            2. Internal Style Sheet
                                            3. External Style Sheet

1. Inline Style Sheet:

                  Providing styles to a HTML element using "style attribute" is known as Inline Style Sheet. All the HTML elements have style attribute can contain any css property with its value.

Example : 

   <h1 style="color:blue; text-align:center;">This is a heading.</h1>

Output of Internal Style Sheet

2.  Internal Style Sheet:

                      Applying styles to HTML elements using "style tag" in head section is known as Internal Style Sheet. Using the selectors (HTML elements, Class and ID ) we can provide styles inside the style tag.

Example : 

             <style type="text/css">

                 body{
                           background-color:#FFC;
                        }
                 h1{
                      color:#00F;
                      font-size:30px;
                   }
              </style>

Internal Style Sheet

3.  External Style Sheet:

                       Applying styles to HTML elements using a separate css file is known as External Style Sheet. Create a new css file and add that file into the html file using "link tag". In external css file there is no need to use style tag. Directly we can give selectors and its properties with values.

Example :

          <link href="style.css" type="text/css" rel="stylesheet" />

              Above example code shows how to add external css file into the HTML file using link tag. Link tag having attributes like "href" to add file; "type" to mention type of file and "rel" to mention that file is related to stylesheet. There is no end tag for link tag.
             In Dreamweaver, we can add external file using shortcut method. Go to "format ->css styles ->add css styles" and click browse to select file from local folder and click "okay". Automatically link tag will be created inside the head section.

External Style Sheet