Cascading Style Sheets

1
Cascading Style Sheets
2
What is CSS?

• Short for Cascading Style Sheets, a new feature
  being added to HTML that gives more control over
  how pages are displayed. With CSS, you can create
  style sheets that define how different elements,
  such as headers and links, appear. These style
  sheets can then be applied to any Web page.
• 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
Basic HTML Page
lthtmlgt   ltheadgt lttitlegt My Page
lt/titlegt lt/headgt   ltbodygt  Heres my
page. lt/bodygt   lt/htmlgt
5
A Style Sheet

• A style sheet is a simple concept it's a page of
  style definitions or specifications that tell the
  browser how to display the various elements on a
  page.
• You can build our style sheet into the head
  element of your web page
• ltheadgt
• lttitlegt My Page lt/titlegt
• ltstyle type"text/css"gt mediaallgt
• lt!--
• -- gt
• lt/stylegt
• lt/headgt

6
External Style Sheet

• You can also use an external style file by
  placing the following in the head element of your
  page

ltheadgt lttitlegt My Page lt/titlegt ltlink
rel"stylesheet" type"text/css"
hrefbasicstyle.css" mediascreen/gt lt/headgt

• basicstyle is a text file with a .css
  extension
• located in the same directory as your html
• document.

7
Rules

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

8
Syntax

• ltstyle type"text/css" media"all"gt
• lt!--
• body
• background-color e8eae8 color
  5d665b
• margin 50px
• font-family Verdana, Geneva,
• Arial, sans-serif
• font-size small
• line-height 180
• --gt
• lt/stylegt

9
Syntax

• Every CSS 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 starting web page to the playpen directory.

13
Link To An External CSS

• Using Notepad to edit startingPage, 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
  startingPage.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 startingPage in a browser on your
  desktop.
• Open a new browser window and select the
  hyperlink at the beginning of the webpage to
  access the CSS tutorial.
• Use basicss.css and startingPage.html to
  experiment with CSS as you read through the
  tutorial, CSS From the Ground Up.

16
Note

• Stop when you finish Section 10.
• Email your .css and .html to me
  bruce_at_cs.unca.edu Copy yourself.