Cascading Style SHEETS

1
Cascading Style SHEETS
CSS

• for formatting and layout control

2
Why Use CSS?

• Consistency and standardization (W3C)
• Additional and consistent control to look and
  layout of all web pages in a site
• Changes can be made to multiple pages through a
  single external source SAVES TIME!!!
• Allows for more structurally sound code

3
Vocabulary Equivalents

• HTML

• CSS

• Selectors

• Elements/Tags

• Declarations
• Properties
• Values

• Definitions
• Attributes
• Values

• Syntax
• Curly Braces
• Colons
• No quotes
• Semi-colons

• Syntax
• ltAngle Bracketsgt
• Equal signs
• Quotes
• Spaces

4
HTML Code
Located in ltbodygt AREA WITHIN ltFONTgt TAG

• ltfont size2 faceverdanagtlt/fontgt

CSS Code
body font-size medium font-family verdana
Located in ltheadgt area within ltstylegt tag
LINKED to outside CSS file in ltheadgt area
within ltLINKgt tag
5
Locations for CSS

• Within a separate Notepad file with a .css
  extension then linked with a ltlinkgt tag in the
  ltheadgt section of an HTML page
• Within the ltheadgt area within a ltstylegt tag
• Embedded within a line of HTML code as a style
  attribute with declarations listed in one set of
  quotes

6
In Notepad, linked to HTML page

• lthtmlgt
• ltheadgt
• lttitlegtCSS Samplelt/titlegt
• ltlink relstylesheet typetext/css
  hreffilename.cssgt
• lt/headgt

7
In the ltheadgt section
Takes precedence over External CSS

• lthtmlgt
• ltheadgt
• lttitlegtCSS Samplelt/titlegt
• lt/headgt

8
Embedded in HTML code
Takes precedence over External CSS AND CSS
embedded in the ltHEADgt section

• lthtmlgt
• ltheadgt
• lttitlegtCSS Samplelt/titlegt
• lt/headgt
• ltbodygt
• ltp stylefont-size small color red
  font-weight bold font-family arialgtSample
  textlt/pgt

9
CSS Online RESOURCES

• Creating Order from Chaos ?
• Webmonkey - CSS Resource Pages http//hotwired.lyc
  os.com/webmonkey/reference/stylesheet_guide/
• Cascading Style Sheetshttp//www.webreference.com
  /authoring/style/sheets/
• The CSShark Answers FAQsThe CSS Know-How
  Sitehttp//www.mako4css.com/
• W3Schools CSS Samples http//www.w3schools.com/css
  /css_examples.asp

10
Read the introduction at WebMonkey

• http//hotwired.lycos.com/webmonkey/reference/styl
  esheet_guide/

YesRIGHT NOW!!!
11
Go to the class agenda for today

• Click on the link within the item
• CSS Practice

Read it NOW START it TODAY!!!
12
SAMPLE CSS