HTML and CSS Reference
In-Depth Information
Save your file and test in a browser. Your page should look similar to the one shown in
Figure 3.12. The student files contain a sample solution at Chapter3/embedded4.html.
External style sheets are contained in a text file separate from the XHTML documents.
The
<link />
element is a self-contained tag used in the header section of an XHTML
document to associate the style sheet with the Web page. This allows multiple Web pages
to link to the same external style sheet file. The external style sheet text file is saved with
the file extension .css and contains style rules only—it does not contain any XHTML tags.
The advantage of this technique is that styles are configured in a single file. This means
that when styles need to be modified only one file needs to be changed, instead of mul-
tiple Web pages. On large sites this can save a Web developer much time and increase
productivity. Let's get some practice with this useful technique.
HANDS-ON PRACTICE 3.6
Launch Notepad and type in the style rules to set the
background-color
of a page to
blue and the text to white. Save it as color.css. The code is as follows:
body { background-color: #0000FF;
color: #FFFFFF;
}
Figure 3.13 shows the external color.css style sheet displayed in Notepad. Notice that
there is no XHTML in this file.
<style>
tags are not coded within an external style sheet.
Only CSS rules (selectors, properties, and values) are coded in an external style sheet.
Figure 3.13
The external style
sheet
color.css
Next, associate that style to a Web page using the
<link />
element in the header sec-
tion of the page. Three attributes are used with the
<link />
element to associate a
Web page with an external style sheet:
rel
,
href
, and
type
. The value of the
rel
attribute
is
stylesheet
. The value of the
href
attribute is the name of the style sheet
file. The value of the
type
attribute is
text/css
, which is the MIME type for a style
sheet. The XHTML code to link color.css to a Web page is as follows:
<link rel="stylesheet" href="color.css" type="text/css" />
Ready to try it out? Launch Notepad and type in the following XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Search WWH ::
Custom Search