External Style Sheet | External CSS Link Stylesheet

External CSS Stylesheet

External CSS Style Sheet is used to apply the CSS Style to entire web site by putting the CSS style into single file. you have to just link a file to all the web pages. You have to saved this file with .css extension.

On the style and design info is written within the external style sheet file, which is linked in the HTML Document with the help of link tag. If you have linked one CSS File in multiple HTML web page than all the HTML Web pages looks alike, because same design style is applied in all the HTML Documents or web pages.

Note: If you want to change the design style than you have to perform these changes in one external file and those changes are reflected in all HTML Web pages and that makes my design easy maintainable. Here maintainable means that you can easy change your design in one CSS file only and you do not have perform changes in any HTML Files.

External CSS Link

You have to create a file and save this file with the .css extension. You have to write all the CSS style in this file. And finally you have to link this file with link HTML tag.

Caution: If you use internal style and inline style than you have to make changes in all the web pages so it is challenging to make changes in all files.

Example 1 – How to Link External Style Sheet in a HTML web page

This is an External Style file Code (style.css)

#green
{
   color: orange;
   background-color: olive;		
}

This is an HTML Code

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>	   
  <body>
     <h1 id="green">This is a heading</h1>
  </body>
</html> 

The above syntax shows that how can you apply the CSS Style to link an external style sheet.

The file “style.css” must be saved in the same folder where you saved your HTML File.

<link> tag is most useful tag which is used to link the external file to the HTML Page.

External CSS Style Sheet
Fig.1 – External CSS Style Sheet
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!          Protected by Copyscape