Chapter 8. Some Have It and Some Dont

1
Chapter 8. Some Have It and Some Dont

• Cascading Style Sheet?
• CSS establish the precedence among style sheets
  and HTML containers that apply formatting changes
  to a given element within an HTML document
• 1. Inline style changes take first precedence
• 2. Document-level changes specified within the
  ltSTYLEgt..lt/STYLEgt
• 3. Next external files using .css extensions
  identify changes
• 4. Finally the default values established by the
  browser are used

2
External Style Sheets

• Why?
• The professional Web weaver working with dozens
  needs a way to easily maintain consistency among
  these large collections of pages
• An external style sheet is a stand-alone ASCII
  file with a .css filename extension
• Figure 8.1 and Figure 8.2

3

• ltLINKgt
• Description identifies external files that
  relate to the document in various ways
• Type empty
• Special note must be coded within the ltHEADgt
  container
• rel and type
• The rel attribute of stylesheet establishes
  that the external file is related to the current
  document as a style sheet
• href identifies the path to the style sheet
• The type attribute specifies that the external
  file is text that follows the CSS conventions

4
Classes of Styles

• .masthead
• font-style italic
• Class
• ltH1 classmastheadgtTravelers Newsletterlt/H1gt
• Inheritance
• The inheritance will be continued unless
  overridden by an acceptable design element

5

• Generic and Tag-Level Classes
• Generic
• .masthead
• Tag-level
• P.left
• font-family Times New Roman, serif
• left-margin 3em
• ltDIVgt versus ltSPANgt
• ltDIVgt container works with block-level elements
• ltSPANgt container is limited to inline changes
• Figure 8.4 and Figure 8.5

6
Common Style Properties

• List-style-type property, Font property, etc.
• Text Manipulation and Alignment
• Table 8.1
• Figure 8.6
• Background
• Table 8.2

7
Box Definitions

• CSS box model (Figure 8.9)
• width absolutepercentageautoinherit
• height absoulte percentageautoinherit
• margin Table 8.3
• Body
• margin-top 0.5em
• margin-right 2em
• margin-bottom 1em
• margin-left 2.5em

8

• white-space normalprenowrapinherit
• border Table 8.4 and Figure 8.11
• Order top, right, bottom, left
• padding toprightbottomleft
• Table 8.5 and Figure 8.12
• float leftrightnoneinherit
• Figure 8.13
• clear noneleftrightbothinherit
• H1,H2 clear both
• ltBR clearleftgt