HTML and CSS Reference
In-Depth Information
EXPLANATION
(
CONTINUED
)
2
The
<head>
tag ends here.
3
In the body of the document, each of the HTML tags will be affected by the style
defined in the external CSS file. See Figure 14.13 for output.
EXAMPLE
14.12
(
The external extern.css file
)
1 body { background-color: pink; }
2p {
margin-left:20%;
margin-right:20%;
font-family: sans-serif;
font-size: 14
3}
h1, h2, h3 { text-align: center;
font-family: sans-serif;
color: darkblue
}
4 em { color: green;
font-weight: bold
}
EXPLANATION
1
This is the external CSS file that will be linked to the file in Example 14.12. Using
an external CSS file keeps the main file size smaller and allows the style sheet to
be shared by multiple files. First use the
<link>
tag, then the
rel
attribute tells the
browser that this is a link to a style sheet, the
href
specifies the location of the CSS
file, and
type
specifies the type of information that will be linked (i.e., text in this
example). You may also specify a media type. If you add
media=”all”
then all me-
dia types will be included.
2
The paragraph
<p>
style is set to have a margin in 20% from the left and right, the
text in size 14, and font family sans serif.
3
The heading levels 1, 2, and 3 styles are set to be centered with a dark blue font,
from the sans serif family.
4
The
<em>
style will be a bold, green font.
