Three pillars of Web design

1
Three pillars of Web design

• Structure
• Presentation
• Behavior

2
CSS syntax

• Style sheets
• Style rules
• Selectors
• Declarations
• Properties and values
• Curly braces, colons and semicolons

p text-indent 2em body color 000000
background-color FFFFFF
3
Internal style sheets

• Embedded in ltheadgt
• Contained in ltstylegt
• Centralize presentation on per file basis

ltheadgt ltstyle type"text/css"gt p
text-indent 2em body color
000000 background-color FFFFFF
lt/stylegt lt/headgt
4
External style sheets

• Separate file
• Accessed via ltlink /gt within ltheadgt
• Contains only style rules, no XHTML
• Named with .css extension
• Centralize presentation for multiple pages

p text-indent 2em body color 000000
background-color FFFFFF
ltheadgt ltlink rel"stylesheet"
type"text/css" href"scrstyles.css"
media"screen" /gt ltlink rel"stylesheet"
type"text/css" href"prtstyles.css"
media"print" /gt lt/headgt
5
Cascading

• Inheritance
• Specificity
• Modularity
• Conflicts
• More specific selectors take precedence
• Last rule seen resolves ties

6
Selectors

• Element name (or simple) selectors
• h1 font-size 150
• Universal selector
• margin 0 padding 0
• Class selectors
• .fineprint font-size 50 color 999999
• p.fineprint font-size 50 color 999999
• ID selectors
• navbar float left width 200px
• divnavbar float left width 200px
• Pseudoclass/pseudoelement selectors
• Think LoVe/HAte!
• hover color FF0000
• ahover color FF0000
• Grouped selectors
• h1, h2, h3, h4, h5, h6 color 00FF00
• divfooter, .fineprint font-size 50 color
  999999
• Contextual (or descendant) selectors
• p em font-style italic font-weight bold

7
Length units and colors

• Absolute units
• in, cm, mm, pt, pc
• Relative units
• px, em, ex
• Percentages
• Know what its a percentage of
• Colors
• Six- and three-digit hex values
• Functional notation - absolutes and percentages
• Color names

8
Text properties

• font-family "Times New Roman", Times, serif
• font-size 110
• line-height 110
• font-weight bold
• font-style italic
• font-variant small-caps
• font italic small-caps bold 110/110 "Times New
  Roman", Times, serif
• text-align center
• text-indent 1.5em
• text-decoration underline
• text-transform capitalize
• letter-spacing 0.1em
• word-spacing -0.2em

9
Color and background properties

• color 5150B8
• background-color FFFF99
• background-image url(texture.jpeg)
• background-repeat no-repeat
• background-position right bottom
• background-attachment fixed
• background FFFF99 url(texture.jpeg) no-repeat
  fixed right bottom

10
Box model

• Adjacent top and bottom margins collapse

11
Box model properties

• margin 10px 15px 5px 0
• Think TRouBLe!
• padding 1em
• border-style solid
• border-width 2px
• border-color 5150B8
• border 2px solid 5150B8
• width 200px
• height 400px

12
List properties

• list-style-type upper-alpha
• list-style-image url(bullet.gif)
• list-style-position inside
• list-style upper-alpha inside url(bullet.gif)

13
Table properties

• Sporadic browser support, use with caution!
• border-collapse collapse
• border-spacing 10px
• No support in IE/Win6, use cell-spacing attribute
• empty-cells hide
• No support in IE/Win6
• caption-side bottom
• No support in IE/Win6
• table-layout fixed
• Relies solely on specified table and column
  widths
• Columns with unspecified width evenly divide
  available table width

14
Generated content

• content "Caution "
• Use with before and after psuedoelement
  selectors
• .cautionbefore content "Caution "
• li.completeafter content url(checkmark.gif)
• Not supported in IE/Win6

15
Manipulating structural presentation

• visibility hidden
• display none
• display block
• display inline
• display list-item