html css include,Using CSS in HTML

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:

Style This!

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:

Style This!

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:

div {

border: 1px solid black;

}

Style This!

Style This Too!

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:

div {

border: 1px solid black;

}

span {

border: 1px solid blue;

}

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:

div {

border: 1px solid black;

}

span {

border: 1px solid blue;

}

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:

div {

border: 1px solid black;

}

span {

border: 1px solid blue;

}

Style This!

Style This Too!

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:

Style This!

Style This Too!

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:

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

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.