Four Methods of Adding CSS to HTML

There are many more ways of adding a Cascading Style Sheet (CSS) to your Hyper Text Markup Language (HTML) document. In this tutorial I will explain the strengths and weaknesses of the four main methods.

* Adding Inline CSS to HTML tags
* Embedding CSS into the HTML
* Linking to a separate CSS file
* Importing a CSS file from within CSS

Adding Inline CSS to HTML tags

Inline CSS means Style rules directly added to any HTML element. To do this you simply add a style parameter to the element and enter your style rules as the value. Following example shows to add inline CSS to HTML tag.

<div id="&#8221;dvContainer&#8221;" style="display: block; width: 500px; height: 200px;"> </div>

This is a div which having inline CSS of display – block and width 500px, height 200px

This is not a good method to use because it will bloat your HTML and make website maintenance a real headache. However it can be useful in some situations.

Embedding CSS into the HTML

You can also embed CSS rules directly into any HTML page. To do this you need to add the style code to the head of your HTML document or within the body tag. Following example shows to embed css into the HTML for div having id is dvContainer.

<style type="text/css"> #dvContainer { display: block; width: 500px; height: 200px; } </style>

All of your CSS rules go between the style tags.

The disadvantage with this approach is the styles must be downloaded every time someone visits the page, this can cause a slightly slower browsing experience. However there are a few advantages. Because the CSS is part of the HTML document, the whole page exists as just one file.

Linking to a separate CSS file

In this method all of your style rules are contained in a single text file that is saved with the .CSS extension. This file is saved on your server and you link to it directly from each HTML file. The link is just a simple line of HTML that you put in the section of your HTML document, it looks like this:

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

Make sure you include the correct path to your CSS file in the href. You can include multiple CSS files if required.

There are many advantages to linking to a separate CSS file. If you need to make a style change across your whole website then you only need to make the change once in your single CSS file. Perhaps the best reason to have a separate CSS file is for speed. When a person first visits your website their browser downloads the HTML of the current page plus the linked CSS file. Then when they navigate to another page their browser only needs to download the HTML of that page, the CSS file is cached so does not need to be downloaded again. This can significantly increase browsing speeds on a website.

Importing a CSS file from within CSS

Another interesting way to add CSS to a HTML page is with the import rule. This lets us attach a new CSS file from within CSS itself. To import a new CSS file from within CSS simply use the following rule:

@import " myDemoStyles.css"; 

Just change "myDemoStyles" to the name of your CSS file and be sure to include the correct path to the file too. Remember the path is relative to the current CSS file that we are in, if the CSS is embedded into the HTML page then the path is relative to the HTML file.

Conclusion :

I hope that this article would have helped you in understanding methods of adding CSS to HTML. Please share your knowledge if you know more about this attribute. Your feedback and constructive contributions are always welcome.