Types Of CSS - Owlbuddy

In this tutorial, we ill learn about Types of CSS. I hope you would have a clear idea about how CSS works and How we can use it to design our web pages. CSS types are divided according to where we write CSS code (physical placement of code). We have three kinds of CSS.

Page Contents

Inline CSS
Internal CSS
External CSS

Inline CSS:

In the case of inline CSS. we write CSS code with HTML tag as an attribute. But the noticeable if you write CSS with one HTML tag it would not affect other Tags.

Example of Inline CSS:

<h4 style="color:red">This is H4 Tag</h4>
<h4>This is H4 Tag</h4>

As you can see in given example here I am applying inline CSS only on one h4 HTML tag and in this case CSS effecting to h4 tag where I mention CSS. But suppose you have 10 times h4 tag in your web page and you want to set the text colour of each h4 tag as red ut means you have to write inline CSS 10 times for each H4 tag. That will be so boring and time-consuming. But don’t worry we have our next CSS Type to overcome this kind of problem which is known as Internal CSS.

Internal CSS:

In case of internal CSS, we write style for the same kind of tags, for the tags with the same class selector or tag with an ID selector just single time in the Style tag. For example, if you have five h3 tags in your web page and you want to set the text colour of each h3 tag as red. To do this you have to write style for all three h3 tags just once.

Example of Internal CSS:

<html>
     <head>
        <style>
          h4{
           color:red
            }
       </style>
     </head>
     <body>
        <h4>This is H4 Tag</h4>
        <h4>This is H4 Tag</h4>
        <h4>This is H4 Tag</h4>
    </body>
</html>

You can see in the given example in case of internal CSS we can mention the centralized style of all same kind of tags once in a web page. But if you are defining style in internal it would not make any impact of the other pages of the website for example here we changing the colour of h3 tag in a single page all the other pages of website would take default colour of h3 tag.

External CSS:

Using External CSS we can create a centralized style sheet for the whole website. In case of internal and inline CSS, we were integrating CSS code in HTML. But in case of the external CSS, we create separate CSS file with an extension of .css. After creating this separate CSS file we link this file with HTML code where we want to apply that style sheet.

Syntax to link CSS:

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

Spread the love