Web Site Design

1
Web Site Design
with C
a
s
cading Style Sheets

• Lee Honeycutt
• English 313

2
Typography

• In old HTML
• Alignment (limited)
• Line Length (invisible tables)
• Upper vs. Lower Case (by hand)
• White Space (blank GIFs)

3
Cascading Style Sheets

• Advantages
• Separation of content from design
• Efficient control over large document sets
• Pixel-level control over typography
• Slight browser incompatibilites
• Has become the standard

4
How CSS Works
Web Pages
CSSheet
5
How CSS Works

• Similar to Master Document in print programs
• Various type attributes included in single CSS
  file
• CSS file controls type choices for all documents
  in a site
• Changes in type control all HTML documents

6
CSS Link
Link inserted in header of all HTML files ltlink
href "master.css" rel"styleSheet
type"text/css"gt
7
CSS Content
Contents of master.css file Selector
Property Value declaration tag-selector
property1value1 property2value1 value2
h1 color green font Arial, Helvetica,
sans-serif
8
CSS Content
Content of master.css file h1 color maroon
font-weight bold font-size large font-family
FontName, Arial, Helvetica, Geneva, Swiss,
SunSans-Regular text-decoration none
text-align left word-spacing 12px
letter-spacing 8px list-style-type square
h2 color black font italic small-caps
medium FontName, Arial, Helvetica, Geneva, Swiss,
SunSans-Regular text-decoration none
text-indent 20px list-style-type square
9
Four Selectors

• Tag selectors - correspond to HTML tags, such as
  ltH1gt and ltpgt
• Classes - independent of HTML code applied
  locally to unlimited select blocks of text
• IDs - used on a limited basis to modify existing
  HTML elements. Carry higher weight in cascade.
• Pseudo classes and pseudo elements

10
CSS Properties

• Fonts
• Text
• Color and Background
• Boxes
• Lists
• Classifications