Cascading Style Sheets

1
Cascading Style Sheets

• Controlling the Display
• Of Web Content

2
Why use style sheets

• Separate structure from presentation
• HTML files less complex
• One style sheet for an entire site keeps the
  styling consistent across different pages
• Different users can have different style sheets
• Can have different style sheets for different
  media (print vs. screen e.g.)

3
CSS Style Sheets

• Style sheets are used to specify the presentation
  style of a web document.
• Cascading Style Sheet (CSS) is a language for
  specifying presentation style
• Overseen by W3C
• http//www.w3.org

4
Components of CSS

• Style declarations
• property value
• Selectors determine which properties are assigned
  to different HTML elements
• Inheritance and cascading rules control what
  properties affect child elements

5
Style Rule

• selector
• property1 value1
• property2 value2
• propertyn valuen
• h1 font-size large color 009

6
Where do the rules go?

• Separate file (with .css extension)
• Use ltlinkgt element to attach style sheet to html
  file
• ltlink rel"stylesheet" type"text/css"
  href"myStyle.css" /gt
• In a ltstyle type"text/cssgt element in the ltheadgt
  of the HTML document

7
Attached Style Sheet

• lthtmlgtltheadgt
• ltlink rel"stylesheet"
• type"text/css"
• href"style.css"gt
• lt/headgtltbodygt
• lth2gt lt/h2gt
• lth2gt lt/h2gt
• lt/bodygtlt/htmlgt

• in style.css
• h2 font-size 150

8
Style Element

• lthtmlgtltheadgt
• ltstyle type"text/css"gt
• body font-size small
• h1 font-size large color 009
• lt/stylegt
• lt/headgtltbodygt
• lth2gt lt/h2gt
• lt/bodygtlt/htmlgt

9
Selectors

• Element comma-separated list of tag names
• can use to select all elements
• Class tag.classname to select all elements with
  classclassname
• Attribute tagattr or tagattr"value" to
  select elements with a particular attribute or
  attribute value

10
More selectors

• Id idName to select elements with particular
  id attribute
• Contextual a img
• Pseudoclass link active visited hover
• Pseudoelement pfirst-letter pfirst-line

11
Properties

• color and background - foreground and background
  color, image (with position and repeat)
• text - color, spacing, alignment, decoration,
  indentation
• font - size, style
• box properties - margins, padding, borders
  (color, style, width)
• classification - display (block, in-line, list),
  list markers, white-space handling

12
Margin, Border, Padding

• Block boxes
• Inline boxes

13
Sources

• Wikipedia
• http//en.wikipedia.org/wiki/Cascading_Style_Sheet
  s
• W3 Schools
• http//www.w3schools.com/css/default.asp
• Complete CSS Guide (online version)
• http//www.westciv.com/style_master/academy/css_tu
  torial/index.html
• WDG Guide to Cascading Stylesheets
• http//www.htmlhelp.com/reference/css/

14
favicons

• Make a custom icon that shows up in the title bar
  of the browser and in the bookmark list.
• Create a 16x16 bit image file
• acceptable formats gif, png, the windows ico
• Put it in your public_html directory
• Add link element(s) to the head element
• ltlink rel"shortcut icon" href"images/lwp.gif"
  type"image/x-icon" /gt
• ltlink rel"icon" href"images/lwp.ico"
  type"image/x-icon" /gt