(Shelly Cashman Series) Gary B. Shelly, H. Albert Napier, Ollie N. Rivers-Web design_ introductory concepts and techniques -Cengage Learning (2008)

Inline Styles, Internal Style Sheets, and External Style Sheets APP 25
Each CSS property has its own rule about acceptable values, such as colors, numbers, percentages,
predefined values, and so forth. For example, the font-size property in Example 2 could have an
absolute size value stated in the number of points, inches, or centimeters; a size value stated in
pixels, which is relative to the screen; a size value stated as a percentage of the base font size, or
as an em value. See the CSS Property Quick Reference (Figure C-5) at the end of this appendix for
a list of frequently used CSS properties.
Inline Styles, Internal Style Sheets, and External
Style Sheets
CSS style rules are applied to a Web page in one of three ways:
• As an inline style inserted within the individual HTML tags on a page
• As part of an internal style sheet inserted within a page’s HTML heading tags
• As part of an external style sheet linked to Web pages with an HTML tag
Inline styles involve inserting the style rule within an element’s HTML tag. You should use this
method sparingly because inline styles have a number of disadvantages, including failure to
separate content from design (which is the primary goal of CSS), increased Web page maintenance
issues, and accessibility issues. Figure C-2 provides an example of an inline style as part of
the tag pair.
HTML tag pair
@SOURCE
Inline Styles
For more information
about advantages and
disadvantages of using
inline styles, visit the Web
Design Appendix C
Online Companion page
(scsite.com/web3e/appc/)
and then click Inline Styles
in the @Source links.
This heading will be blue.
inline style
heading text
Figure C-2 Inline styles are inserted within an element’s HTML tag.
Internal style sheets, also called embedded style sheets, are included within a page’s HTML
and tag pairs along with other heading information, such as a page’s title.
Style rules in an internal style sheet only modify elements on the page in which the rules are
embedded. Figure C-3 illustrates an internal style sheet.
style
rules
Applying Styles
and tag
pair defines the style
sheet boundaries
type attribute specifies
a CSS style sheet
Figure C-3 Style rules in an internal style sheet only affect elements on the page in
which the rules are embedded.
comment tags hide
the style rules that are
incompatible with older
browser versions
@SOURCE
Internal Style Sheets
For more information
about using internal
style sheets, visit the
Web Design Appendix C
Online Companion page
(scsite.com/web3e/appc/)
and then click Internal
Style Sheets in the
@Source links.