HTML and CSS Reference
In-Depth Information
External style sheet
The most common way to include CSS is through an external style sheet. The style sheet
rules are placed in a separate text file with a
.css
file extension. This style sheet is then
referenced using the
<link>
element in the web page header. The
rel
(relationship)
attribute must be set to
"stylesheet"
and the meta
type
attribute can optionally be set to
"text/css"
. The location of the style sheet is specified with the
href
attribute.
<link rel="stylesheet" type="text/css" href="MyStyle.css">
Another less common way to include an external style sheet is to use the CSS
@import
function from inside of the
<style>
element. For this function to work, it must be placed
before any other rules.
<style type="text/css">
@import url("MyStyle.css");
</style>
Using an external style sheet is often preferred because it completely separates CSS
from the HTML document. It is then possible to quickly create a consistent look for an
entire web site and to change its appearance just by editing a single CSS document. It also
has performance benefits because external style sheets are cached and therefore need to
be downloaded only once—for the first page a visitor views at your site.
Testing environment
To experiment with CSS, you can use a simple text editor such as Notepad in Windows
(found under Start
➤
Programs
➤
Accessories
➤
Notepad) or TextEdit on a Mac (found
under Finder
➤
Applications
➤
TextEdit). Type the following single style rule into a new
document in the editor. The rule will color the background of a web document red.
body { background: red; }
Save the file as “MyStyle.css” and then open another empty document. This new
document will become the HTML file that uses the external style sheet you just created.
Write the following HTML markup into the document, which includes a reference to the
style sheet along with the minimal markup for a HTML 5 web document:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
<link rel="stylesheet" href="MyStyle.css">
</head>
<body>
