HTML and CSS Reference
In-Depth Information
The exact order in which external style sheets and embedded style sheets are pro-
cessed by the browser depends on the order in which they are listed within the HTML
fi le. The HTML code
<link href=”sa_layout.css” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>
h1 {color: red; }
</style>
loads the external style sheet fi rst and then the embedded sheet. However, if that order is
switched as in the code
<style type=”text/css”>
h1 {color: red; }
</style>
<link href=”sa_layout.css” rel=”stylesheet” type=”text/css” />
then the external style sheet is processed after the embedded sheet.
Unlike an external style sheet, an embedded style sheet is applied only to the Web
page in which it is placed. Thus, if you want to apply the same style to all of the headings
on your Web site, it is more effi cient and easier to manage if you defi ne your styles only
once within an external style sheet and link all of the pages to that fi le. If you later need
to change the site design, you'll have to edit only one fi le, rather than dozens.
Always place embedded
styles after external style
sheets to avoid confusion
about which style sheet is
loaded last.
Inline Styles
The very last styles to be interpreted by the browser are inline styles, which are styles
applied directly to specifi c elements using the
style
attribute
<
element
style=”
style rules
”> … </
element
>
where
element
is the HTML element and
style rules
are CSS styles applied to that
element. For example, the following
style
attribute is used to display the text of a spe-
cifi c
h1
heading in green and centered on the page:
<h1 style=”color: green; text-align: center;”>
Sunny Acres
</h1>
The advantage in using inline styles is that it is clear exactly what page element is
being formatted; however, inline styles are not recommended in most cases because they
make changing styles tedious and ineffi cient. For example, if you wanted to use inline
styles to format all of your headings, you would have to locate all of the
h1
through
h6
elements in all of the Web pages within the entire Web site and add
style
attributes to
each tag. This would be no small task on a large Web site containing hundreds of head-
ings spread out among dozens of Web pages, and it would be a nightmare if you had to
modify the design of a large Web site that was created using inline styles.
However, the primary reason to not use inline styles is that you want to, as much as
possible, separate document content from document design. Ideally, the HTML code
and CSS styles should be so separate that one group of employees could defi ne the page
content using HTML and another group could defi ne the page design using CSS. This
isn't possible with inline styles because the code for the page design is intermingled with
the code for the page content.
View your Web site
with and without your
style sheet. It should be
readable even if a user
is limited to the default
styles supplied by a Web
browser.
Exploring the Style Cascade
With the potential for many different style sheets to be applied to the same Web page,
there has to be an orderly method by which confl icts between those different style sheets
are resolved. CSS does this by assigning a level of importance to each style, with the
most important style rule taking precedence over other competing rules.
