HTML and CSS Reference
In-Depth Information
CSS supports three types of style sheets: inline, embedded (or internal), and external
(or linked). With an
inline style
, you add a style to an individual HTML tag, such as a
heading or paragraph. The style changes that specific tag, but does not affect other tags in
the document. With an
embedded style sheet
, or
internal style sheet
, you add the style
sheet within the <head> tags of the HTML document to define the style for an entire Web
page. With an
external style sheet
, or
linked style sheet
, you create a text file that con-
tains all of the styles you want to apply, and save the text file with the file extension .css.
You then add a link to this external style sheet on any Web page in the Web site. External
style sheets give you the most flexibility and are ideal to apply the same formats to all of
the Web pages in a Web site. External style sheets also make it easy to change formats
quickly across Web pages. You will use inline styles in this chapter's project to enhance the
styles of the heading (change the color) and the bulleted list (change the font style).
Inline Styles
Using an inline style is
helpful when you want
to alter the appearance
(or style) of a single HTML
element. Appendix D
contains the Cascading
Style Sheet Properties and
Values supported by most
browsers. The inline styles
used in this chapter can be
found in the appendix. For
more information on CSS,
look at w3.org.
Style Sheet Precedence
As shown in Table 2-8, the three style sheets supported
by CSS control the appearance of a Web page at different levels. Each type of style
sheet 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, and overrides or
takes precedence over any styles defined in an external style sheet. An inline style 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 2-8 Style Sheet Precedence
Type
Level and Precedence
Inline
• To change the style within an individual HTML tag
• Overrides embedded and external style sheets
Embedded
• To change the style of one Web page
• Overrides external style sheets
External
• To change the style of multiple pages in a Web site
Because style sheets have different levels of precedence, all three types of style
sheets can be used on a single Web page. For example, you may want some elements of a
Web page to match the other Web pages in the Web site, but you also may want to vary
the look of certain sections of that Web page. You can do this by using the three types of
style sheets.
Style Statement Format
No matter what type of style sheet you use, you must use
a
style statement
to define the style. The following code shows an example of a style
statement used in an inline style:
<h1 style=”font-family: Garamond; font-color: navy”>
A style statement is made up of a selector and a declaration. The part of the style
statement that identifies the page elements is called the
selector
. In this example, the
selector is h1 (header size 1). The part of the style statement that identifies how the
element(s) should appear is called the
declaration
. In this example, the declaration is
everything between the quotation marks: the font-family and font-color properties and
their values (Garamond and navy, respectively). A declaration includes at least one type of
style, or
property
, to apply to the selected element. Examples of properties include color,
