7.2 external style sheets

External Style Sheets:
 An external style sheet is a separate file with a
.css extension. It contains only CSS code and
no XHTML.
 Utilized to maintain consistent styling across
multiple pages.
 Enables us to make global changes to a website
from a single file.
 Further separates our page content from our
page styling.

Linking to an External Style Sheet:
For each XHTML page that will use the styling of
the external CSS file, place a <link> statement in
the <head> section of the document.
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

This is the name of the external CSS
file. If no path is specified, the file
must reside in the same folder as the
XHTML file.

The External CSS File:
style.css:
p { The syntax for the external
color: brown;
CSS file is nearly identical to
font-style: normal;
font-weight: bold; an internal style sheet. We do
font-family: Arial; not need the <style> element
font-size: 12px; or any other introductory code.
}

It doesn't matter whether or
h1 {
text-align:center;
not we place a space between
font-style:italic; the selector and the property.
font-weight:bold; Using spaces does make the
font-size:24px; style sheet easier to read.
font-family:Arial;
}

Adding CSS Comments:
p { Just as we add comments to
color: brown;
our XHTML code, we can do
font-style: normal;
font-weight: bold; the same with CSS. Everything
font-family: Arial; between the opening /* and
font-size: 12px; closing */ will be ignored by the
} browser.
/*This main heading will be CSS comments can be used
changed to Verdana in June.*/
h1 {
when experimenting with styles.
text-align: center; Instead of deleting style
font-style: italic; declarations and then retyping
font-weight: bold; them, we can "comment them
font-size: 24px;
out" temporarily and then
font-family: Arial;
}
remove the /* and */ later.

7.2 external style sheets

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to 7.2 external style sheets

Similar to 7.2 external style sheets (20)

More from Bulldogs83

More from Bulldogs83 (16)

Recently uploaded

Recently uploaded (20)

7.2 external style sheets