How to include CSS?

Last Updated Jul 21, 2015, 12:00:06 PM




How to Include CSS in HTML


There is more than one way to add a Cascading Style Sheet (CSS) to the HTML document. In this tutorial we will see the different ways to include css in html.

We can include CSS in Three different Ways

Linking to a separate CSS file

This is the most common method of attaching CSS rules to the HTML document. With this method all of your style rules are contained in a single text file that is saved with the .css extension, Like style.css. 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, See the sample one below


Watch GIF Try It Now

Add an external style sheet with the URL: "mystyle.css".

Add a <link> element in the header section <head>. The <link> element should have "rel", "type" and "href" attributes.

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 another folder, then specify the path like this href="foldername/mystyles.css".


Internal Style Sheet

You can include the css styles inside the style tag by embedding directly in the html file.


All your CSS rules placed between the style tags.


Watch GIF Try It Now

The disadvantage of the above approach is the styles must be downloaded every time someone visits the page; this can cause a slightly slower browsing experience.

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 green text:

Watch GIF Try It Now

This is not a good method to use because it will bloat your HTML and make website maintenance a real headache. However, if your HTML file is very small you can prefer using this method

Importing CSS file from within CSS

Another interesting way to add CSS to a HTML page is with the import rule. This allow us to attach a new CSS file from within CSS itself.

Let's look at an example of how this is done. To import a new CSS file from within CSS simply use the following rule:

Just change "new styles" to the name of your CSS file and be sure to include the correct path to the file too.

Practice with Our Interactive Live Editors and Take your CSS Skills to the next level

Example 1 Example 2 Example 3 Example 4 Example 5

Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM