How to include CSS in HTML?

How to include CSS in HTML?

There are many ways to include Cascading Style Sheet (CSS) to your HTML document. In this tutorial I will explain the strengths and weaknesses of the four main methods which are used to include CSS to HTML documents.

Method 1. Linking to a separate CSS file to HTML document

This is the most common method of attaching CSS rules to an HTML document. With 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:

Make sure you include the correct path to your CSS file in the href. If the CSS file is in the same folder as your HTML file then no path is required (like the example above) but if it's saved in a folder, then specify it like this href="foldername/mystyles.css". The media parameter specifies when the CSS rules are to be used. "screen" indicates for use on the computer screen. If you specify "print" then the rules will only be followed when the page is printed. You can include multiple CSS files if required.

Advantages of including CSS file to HTML document

There are many advantages to linking to a separate CSS file to HTML document.

1. 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. If you want to completely change the look of your website, again, you only need to update this one file.

2. Second 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.

Method 2: Embedding CSS into the HTML

You can also embed CSS rules directly into any HTML page. To do this you need to add the following code to the of your HTML document:

All of your CSS rules go between the style tags. As before, the media can be "screen" for your computer screen or "print" for printing.

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. This can be useful if you are sending the page to someone via email or if it will be used as a template such as a blogger template. I use this method on my liquid-layout demos so when people view the source of the page they can see the HTML and the CSS code together.

 

Another advantage of using this method is with dynamic content. If you are using a database to generate the page content you can also generate dynamic styles at the same time. Blogger does this - it dynamically inserts the colours for headings and other elements into the CSS rules embedded in the page. This allows users to change these colours from an admin page without actually editing the CSS in their blog templates.

Method 3: Adding Inline CSS to HTML tags

Style rules can also be added directly to any HTML element. To do this you simply add a style parameter to the element and enter your style rules as the value. Here is an example of a heading with red text and a black background:

This is a red heading with a black background

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. One example could be if you are using a system where you don't have access to the CSS file - simply add your style rules directly to the elements instead.

Method 4: 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 "newstyles.css";

Just change "newstyles" 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.

Let's imagine we have a 1000 page website and we link to a CSS file from every page on the site. Now let's imagine we want to add a second CSS file to all of those pages. We could edit all 1000 HTML files and add a second CSS link or a much better way would be to import the second CSS file from within the first file. We just saved ourselves many hours of work!