HTML and CSS Reference
In-Depth Information
You could use the statement above in both an embedded and an external style sheet. With
an external (linked) style sheet, you save the file with the selectors and declarations as a
.css file. You then link that file into any Web page into which you want those styles to
apply. To add the same style statement into an embedded style sheet, you have to put the
selector and declaration within the <style></style> container as shown below. This code
would be inserted within the <head></head> container.
<style type=”text/css”>
h1 {color: red;}
</style>
These two style sheets (embedded and external) give you the most flexibility. For
instance, if you want all h1 and h2 headings to be the color red, you would simply add the
code below:
h1, h2
{color: red;}
You could also make the style change to the h1 heading as an inline style. You insert
that code within the body of the Web page in the following format:
<h1 style=”color: red”>
Although inline styles can be very useful, understand that you would have to insert
the same declaration for every h1 (or h2 or h3) heading within the Web page. That makes
the inline style less flexible than the other style sheets.
As shown in Table D-1, the three style sheets supported by CSS control the
appearance of a Web page at different levels. Each style sheet type also has a different level
of precedence or priority in relationship to the others. An external style sheet, for example,
is used to define styles for multiple pages in a Web site. An embedded style sheet is used
to change the style of one Web page, but overrides or takes precedence over any styles
defined in an external style sheet. An inline style sheet is used to control the style within
an individual HTML tag and takes precedence over the styles defined in both embedded
and external style sheets.
Table D-1 CSS Precedence
Type
Level and Precedence
Inline
• Changes the style within an individual HTML tag
• Overrides embedded and external style sheets
Embedded
• Changes the style of one Web page
• Overrides external style sheets
External
• Changes the style of multiple pages in a Web site
