Apply CSS

There are four ways to apply a CSS stylesheet to an HTML document:

Inline

Embed

External Link

Import

Inline

Styles can be declared within the HTML document. For example,

The above HTML code renders the following:

This is font size 16.

Embed

Styles can be embedded within the HTML (usually within the <head> tag). For example,

<head>
<style type="text/css">
div {
background-color:#FF0000;
}
</style>
</head>
<body>
<div>
The background color is red
</div>
</body>

The above HTML code renders the following:

The background color is red

External link

In this case, all CSS declarations are stored in a file external to the HTML document. That file typically has an extension of .css. Within the <head> .. </head> tags of the HTML document, you include the following declaration:

This will apply the CSS declarations stored in 'external-stylesheet.css' into the HTML document.

Import

External CSS declarations can also be imported into an HTML document. To do so, use the @Import command. The syntax is:

The @import command was initially used to serve up different stylesheets to different browsers. However, this is no longer applicable today. Nowadays, @import is typically used as a way to include additional CSS stylesheets. If multiple CSS files are called by @import, the stylesheets that are imported later have a higher priority when there is a conflict (please see the CSS Cascade page for more details).

Next: CSS Media Types

Inline

Embed

External link

Import

AdBlock Detected!