04 - How to add CSS

In this chapter we will learn how to include the style sheets in HTML.

CSS can be added to HTML code in 3 ways,

1. External Style Sheet

2. Internal Style Sheet

3. Inline Style Sheet

External Style Sheet

  • This is the most sought method for applying styles to web pages.
  • It is an ideal and ultimate choice when we want to style several web pages. The style rules are supplied in a separate file called CSS file.
  • It is created using notepad and saved with .css extension. This CSS file exclusively contains the style rules we wish to apply to our web site or a group of web pages.
  • In external style sheet, when we want to change some font type or color or anything like that, we can just edit it in the CSS file and the change gets applied wherever it is applicable. So we can change the entire look of the web site by just making change in one file.
  •  Each web page is linked to the style sheet using link tag. The link tag is included in the head element.

 Example for External style sheets,

Include the following code in a notepad and save it with the name stylefile.css

/* stylefile.css -- A simple style sheet */
body
{
    background-color : yellow;
}
p
{
    font-family : arial;
    color : blue;
    font-size :20px;
}

The program for inclusion of External style sheet, stylefile.css is 

<html>
<head>
    <title> Cascading external style sheet </title>
    <link rel= "stylesheet" type="text/css" href="stylefile.css">
</head>
<body>
    <h2>Cascading style sheet</h2>
    <p> This page is styled with external style sheet.</p>
</body>
</html>

The output of the above program would be:-

Internal Style Sheet

This method of styling has the style tag in the head section. It is also called embedded CSS. Rules defined within style tag would be applicable to the whole document wherever applicable.

The example for inclusion of internal style sheet is as follows:-

<html>
<head>
    <style>
    body{
        background-color:gray;
    }
    h1{
        color:pink;
    }
    p{
        color:lightblue;
    }
    </style>
</head>
<body>
    <h1>CSS Internal Style Sheet</h1>
    <p>Paragraph in Blue</p>  
</body>
</html>

The output of the above program would be,:-

Inline style sheet

Using the style attribute we can apply the inline styling to a tag. The applied styling is only applicable to the tag on which it is used. This is not an efficient approach as we are combining presentation with the content.

Inline styles affect the stand alone property of HTML. In the above example, if we want to change the text to another color, we have to go to each and every line & edit the code. This consumes a lot of time & effort.

 It is a good idea to avoid inline style sheets whenever and wherever possible.

Example program for Inline style sheets,

<html>
<head>
    <title>
    Inline styling
    </title>
</head>
<body>
    <p style= "color:pink; text-align:center; font-size:40px;">This text is styled using Inline styles</p>
</body>
</html>

The output of the above program would be:-

Order of Priority

When an HTML document refers to more than one style sheet then the browser follows the following priority to resolve the problem.

  1. Inline Style
  2. Internal Style (which is present in the head section)
  3. External Style
  4. Default style of the Web browser in use.

Like us on Facebook