Cascading Style Sheets

1
Cascading Style Sheets

• August 25-26, 2004

2
What is CSS?

• a means for web authors to separate the
  appearance of web pages from the content of web
  pages
• is a recommendation of the World Wide Web
  Consortium (the W3C).

3
History of CSS

• CSS 1 became a recommendation in late 1996
• CSS 2 became a recommendation in May of 1998.
• CSS 2, revision 1 was released in January 2003

4
CSS Mobile Profile

• a scaled down version of CSS 2.1 specification,
  appropriate to mobile, or wireless devices

5
Style Sheet

• A text file with a .css extension
• SS may be in a embedded in a web page or,
  preferably, in a separate file with the .css
  extension.

6
Embedded vs Linked SS

• Embedded
• ltstyle type"text/css"gt lt/stylegt
• Linked
• ltlink rel"stylesheet" type"text/css"
  hrefbasicstyle.css" /gt

7
Rules

• Correspond to elements in an HTML document.
  Elements are ltpgt, ltbodygt
• Rules correspond to HTML elements.
• A Rule which selects the body is called a body
  selector or
• body
• An example
• p font-family verdana color red

8
Syntax

• body
• font-family Verdana, Times New Roman",
  Helvetica, sans-serif
• font-size 1em
• text-align justify

9
Syntax

• Every statement must have a selector and a
  declaration.
• The declaration is one or more properties
  separated by semicolons.
• Each property has a property name followed by a
  colon and then the value for that property.
• Sometimes a property can take a number of values.
  The values in the list should be separated by a
  comma and a space.
• White space can be used to make your style sheet
  easier to read and write.

10
Comments

• / This is a style sheet comment /
• What is the syntax of an HTML comment?

11
Why Shouldnt Your bgcolorffffff?
12
Download a Web Page

• Create a working directory (playpen)
• Download (Right click the link/ Save target as)
  the Bill of Rights web page from the class
  schedule to the playpen directory.

13
Link To An External CSS

• Using Notepad to edit BillOfRights.html, insert
  the following line in the head section (between
  ltheadgt and lt/headgt tags) of the html document.
• ltlink rel"stylesheet" type"text/css"
  hrefbasicss.css"gt
• Select File / Save to save the change to
  BillOfRights.html

14
Create CSS

• Create a new file with Notepad.
• Save it as basicss.css in your playpen directory
• Verify that the .css extension is correct in
  Windows Explorer.

15
Work Tutorial

• Display the BillOfRights in a browser on your
  desktop.
• Open a new browser window and select the
  hyperlink at the beginning of the webpage to the
  CSS tutorial.
• Use basicss.css and BillOfRights.html to
  experiment with CSS as you read through the
  tutorial, CSS From the Ground Up.

16
Note

• When you reach Section 7 on ltdivgt lt/divgt tags you
  will want to add an embedded style sheet section
  into your BillOfRights.html document.
• Stop when you finish Section 10.
• Email us your .css and .html. Copy yourself.

17
Homework

• Email us your .css and .html. Copy yourself.
• Develop a web page named index.html for use in
  our class.
• Have at least one link on the page to your
  BillOfRights page.
• Bring your formatted BillOfRights.html with its
  basicss.css and your web page, index.html to our
  next class.