Using CSS in HTML

CSS in style Attributes
CSS in style Elements
CSS in External Files
- The link Element
- The @import Instruction

Jakob Jenkov
Last update: 2014-06-15

CSS is intended to be used with HTML (or SVG). There are three ways you can include the CSS in your HTML file:

Embed CSS inside the style attribute of HTML elements.
Embed CSS inside style HTML elements
Link to external CSS files.

Each of these options will be described below.

CSS in style Attributes

The simplest way to include CSS in an HTML page is to embed the CSS inside the style attribute of an HTML element. CSS properties embedded inside a style attribute are only applied to the HTML element into which they are embedded. Here is how that looks:

<div style="border: 1px solid black;"> Style This! </div>

This example inserts the CSS property border into the style attribute of the div element. The value of the border property is 1px solid black which sets the border of the div element to a one pixel wide, black border.

If you need to set more than one CSS property inside the style element, separate the CSS properties with a semicolon, like this:

<div style="border: 1px solid black; font-size: 18px;"> Style This! </div>

This example sets both the border CSS property and the font-size CSS property.

CSS in style Elements

Another option of using CSS in HTML is to embed your CSS inside style HTML elements inside your HTML page. If you need to apply the same styles to multiple HTML elements, this is much easier than setting the styles inside each HTML element in their style attribute. Here is a CSS example using the style element:

<style>
    div {
        border: 1px solid black;
    }
</style>
    
<div> Style This! </div>    
<div> Style This Too! </div>

This example shows a single style element which defines a CSS rule which is applied to all div elements. Thus, the CSS property inside the style element (the border property) is applied to both of the div elements in the example.

You can define more than one CSS rule inside the same style element. Here is an example:

<style>
    div {
        border: 1px solid black;
    }
    span {
        border: 1px solid blue;
    }
</style>

This example defines two CSS rules. The first CSS rule applied to all div elements, and the second CSS rule is applied to all span elements.

You can also embed more than one style element within the same HTML page. Here is an example:

<style>
    div {
        border: 1px solid black;
    }
</style>

<style>
    span {
        border: 1px solid blue;
    }
</style>

This example shows the CSS rules from the previous example embedded in their own style element.

The style elements can be embedded either inside the HTML head element or the body element. Here is an example:

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <style>
        span {
            border: 1px solid blue;
        }
    </style>

    <div> Style This! </div>
    <span> Style This Too! </span>

</body>
</html>

In this example the CSS rule for div elements is embedded inside its own style element inside the head HTML element, and the CSS rule for span elements is embdded inside its own style element inside the body HTML element.

CSS in External Files

If you need to apply the same CSS styling to multiple HTML pages, it is easier to move your CSS rules to a CSS file, and then link to that file from your HTML pages. You can reference an external style sheet in two ways:

Via a link element inside the head element.
Via an @import instruction inside a style element.

Both of these mechanisms are explained in the following sections.

The link Element

You reference an external CSS file using the link element (inside the head element). Here is an example:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="my-css-file.css">
</head>

<body>
    <div> Style This! </div>
    <span> Style This Too! </span>

</body>
</html>

This example links to the external CSS file named my-css-file.css. This file has to be accessible online, and in this case it has to be located in the same directory as the HTML file. Thus, if the HTML file is located at http://jenkov.com/my-website/my-html-file.html, then the CSS file should be available at http://jenkov.com/my-website/my-css-file.css.

Actually, the href attribute of the link element can contain an absolute or relative URL. For more information about absolute and relative URLs, see HTML and URLs in my HTML4 tutorial.

If we move the CSS rules from the earlier examples to the my-cess-file.css file, then the contents would look like this:

div {
    border: 1px solid black;
}
span {
    border: 1px solid blue;
}

Notice that the CSS file has no style element. It only has the CSS rules themselves.

The @import Instruction

You can also import an external CSS file from inside a style element using the @import instruction. Here is a CSS @import example:

<style>
    @import url('http://jenkov.com/my-website/my-css-file.css');
</style>

This example will include the CSS file http://jenkov.com/my-website/my-css-file.css into the HTML page which contains that style element.

Next: CSS Properties and CSS Rules

Tweet
	Jakob Jenkov