CSS

1
CSS

• Cascading Style Sheets, part 1
• The Big Idea
• The Story

2
CSS The Big Ideas

• CSS enables greater stylistic control over every
  aspect of the web page and web site.
• CSS allow for simple, efficient style editing.
• Ex. h1color maroon
• Use style on multiple pages change one line to
  affect the entire web site.

3
CSS The Story

• HTML, a structural language used during the early
  years on the web, (1990-1993)
• Pages were text and horizontal rules.

4
CSS The Story

• Then came Mosaic, 1993
• the first programs to provide a slick multimedia
  graphical user interface to the Internet's
  burgeoning wealth of distributed information
  services (Wikipedia)
• Revolution graphical www experiences powerful
  growth

5
CSS The Story

• Demand for more html elements
• Html language getting more specialized, less and
  less efficient
• Suddenly a structural language started to become
  presentational. (Meyer)

6
CSS The Story

• World Wide Web Consortium, the group that sets
  the standards for www languages, published its
  work Cascading Style Sheets, 1996.
• CSS separates style from structure.
• CSS impacts elements from the block level to the
  inline.

7
CSS The Story

• Examples Style sheets

8
CSS The Big Ideas

• CSS enables greater stylistic control over every
  aspect of the web page and web site.
• CSS allow for simple, efficient style editing.
• Ex. h1color maroon
• Use style on multiple pages change one line to
  affect the entire web site.

9
CSS

• Cascading Style Sheets, part 2
• Applying the style sheets to the xhtml page
• External
• Embedded (internal)
• Inline

10
CSS Writing Style Rules

• SelectorProperty Value
• bodybackground-color 4682B4
• Bodybackground-imageurl(../images/grey.jpg)

11
CSS external style sheet

• external style sheet is ideal when the style is
  applied to many pages.
• With an external style sheet, you can change the
  look of an entire Web site by changing one file.
• In ltheadgt put link tag pointing to external ss

12
CSS external style sheet

• ltheadgt
• ltlink rel"stylesheet" type"text/css"href"mysty
  le.css" /gt
• lt/headgt

13
CSS external style sheet

• Browser will read style definitions from file
  mystyle.css, and format document according to
  it.
• View source on one of my pages to see link to
  external ss

14
CSS external style sheet

• External style sheets can be written in any text
  editor, (notepad, wordpad, etc.)
• File should not contain any html tags
• Style sheet should be saved with a .css extension

15
CSS external style sheet

• Do not leave spaces between the property value
  and the units!
• Incorrect margin-left 20 px only works in
  IE6, not Mozilla/Firefox or Netscape
• Correct margin-left 20px

16
CSS Internal style sheet

• Internal style sheet should be used when a single
  document has a unique style
• Useful in building a page template. Style can be
  copied to external style sheet when template is
  complete. Embedded style sheet should be used
  when a single document has a unique style

17
CSS Internal style sheet

• ltheadgt
• ltstyle type"text/css"gt
• hr color sienna
• p margin-left 20px
• body background-imageurl("images/back40.gif")
• lt/stylegt
• lt/headgt

Embedded in the ltheadgt tags
18
CSS inline style sheet

• Inline style loses many advantages of style
  sheets by mixing content with presentation
• Use this method sparingly when a style is to be
  applied to a single occurrence of an element.

19
CSS inline style sheet

• Use the style attribute in the relevant tag
• Style attribute can contain any CSS property
• ltp style"color sienna margin-left 20px"gt
• This is a paragraph
• lt/pgt

20
CSS in action

• Lets change some style on my site

21
(No Transcript)
22
(No Transcript)