Cascading Style Sheets

1
Cascading Style Sheets

• SI 539
• Fall 2004
• Sandra L. Bartlett

2
CSS is not new!

• Every browser uses the equivalent of a style
  sheet
• BUT, you cant change it you are stuck with the
  defaults built-in to the browser

3
Why Use CSS?

• Separate content and design
• Without CSS must do this for every lth1gt
• lth1 aligncentergtltfont faceVerdana,
  Helvetica, Arial, sans-serif size 6
  colorgraygt CSS Heading lt/h1gt
• With CCS do the design once
• Redefine tags to suit your design
• h1 text-align center font-size 16pt
  font-family Verdana, Helvetica, Arial,
  sans-serif color gray
• Mark up content with simple tags
• lth1gtCSS Headinglt/h1gt

4
Why use CSS? (cont)

• Efficient control over large document sets (like
  all the pages in a complex web site)
• Write once, use anywhere
• If change is needed, change only one place

5
Where to Put CSS?

• Inline
• Something you only use one place in a page
• In a ltstyle gtlt/stylegt tag
• On a page, to override the standard style
• In a style sheet file
• To standardize the page style across a site
• Note in this slide set, some HTML tags are
  capitalized only to make them easier to see. Use
  lowercase when you write pages.

6
Inline CSS ()

• ltp style"background blue color white"gt
• A new background and font color with inline
  CSSlt/pgt
• ltspan style"background red color
  black"gtWarning!lt/spangt Do not do this at home!

7
Internal CSS ()

• Usually defined in the ltheadgt and used in the
  ltbodygt
• lthtmlgtltheadgtltstyle type"text/css"gt p
  color white body background-color
  black lt/stylegtlt/headgt
• ltbodygt ltpgtWhite text on a black
  background!lt/pgtlt/bodygtlt/htmlgt

8
External CSS

• Put your CSS in a file with a .css extension
• Connect your style sheet to your web page by
  putting this in the ltheadgt, along with your
  lttitlegt
• ltlink rel"stylesheet" type"text/css"hrefyerFi
  leName.css" /gt

9
How To do CSS - Selector

• SELECTOR PROPERTY VALUE
• SELECTOR is an HTML tag name
• PROPERTY is a CSS property
• VALUE is a legal value
• p color white
• body background-color black

10
Use CSS instead of ltfont gt

• Suppose you want
• The library has an arrangement with the
  cafeteria to provide refreshments during the
  weekly coffee house lectures.

11
Doing it with ltfont gt

• ltPgt
• The ltFONT FACE"Arial, Helvetica, Geneva"
  SIZE"1"gt
• ltA HREF"library.html"gtlibrarylt/Agt lt/FONTgt
• has an arrangement with the
• ltFONT FACE"Arial, Helvetica, Geneva"
  SIZE"1"gt
• ltA HREF"cafeteria.html"gtcafeterialt/Agt lt/FONTgt
  
• to provide refreshments during the weekly
• ltFONT FACE"Arial, Helvetica, Geneva"
  SIZE"1"gt
• ltA HREF"coffeehouse.html"gtcoffee houselt/Agt
  lt/FONTgt
• lectures.
• lt/Pgt

12
CSS

• Rule
• .resources a
• font-familysans-serif
• font-size120
• This rule creates a class called resources, and
  says that all lta gt elements inside that class
  should has a sans-serif font family (such as
  Geneva or Arial) and should be 120 larger than
  usual.

13
Using the CSS Rule

• ltp class"resources"gt
• The lta href"library.html"gtlibrarylt/agt has an
  arrangement with the
• lta href"cafeteria.html"gtcafeterialt/agt
• to provide refreshments during the
• lta href"coffeehouse.html"gtcoffee houselt/agt
  lectures.
• lt/pgt

14
CSS and ltspan gt

• Set only the font for a span of text
• Make a style rule in CSS
• ltSTYLE TYPE"text/css"gt
• .product colorbrown font-weight900
  font-size95 font-familysans-serif
• lt/STYLEgt
• Our new software product, ltSPAN
  CLASS"product"gtMOFATlt/SPANgt, brings a new level
  of quality to ground-water analysis.

15
More CSS

• http//www.tizag.com/cssT/class.php