Cascading Style Sheets CSS

1
Cascading Style Sheets (CSS)

• Introduction

2
What is CSS?

• Language that defines how HTML documents are
  presented in a browser
• Example Code (without CSS)
• lth1gtltfont color663366 faceVerdana, Arial,
  Helvetica, sans-serifgtmy headinglt/fontgtlt/h1gt
• Example Code (with CSS)
• lth1gtmy headinglt/h1gt(appearance is defined
  elsewhere, once for all pages)

3
Why Use CSS?

• Separates content and structure from presentation
• Leaner code is easier to read/debug downloads
  more quickly (smaller file sizes)
• Improves accessibility users can override your
  styles with theirs
• Greater flexibility (CSS does things HTML alone
  cannot)
• Reduced development and maintenance time (and
  greater consistency)
• Many presentation tags (font, color) have been
  eliminated in new standards

4
3 ways to Implement

• Inline
• Placed within html code
• Defines single element
• Not as useful as other methods
• Embedded
• Placed with head tag
• Controls elements on one page
• External
• Most useful method
• Styles are placed in an external css file (style
  sheet)
• Multiple pages link to the same style sheet
• You can change presentation site-wide by changing
  and uploading ONE CSS FILE

5
Inline CSS Code

• lth1 style font-family Verdana, Arial,
  Helvetica, sans-serif color 663366gtmy
  headinglt/h1gt

6
Embedded CSS Code

• ltheadgt
• lttitlegtEmbedded CSSlt/titlegt
• ltstyle typetext/cssgt
• lt!- -
• h1
• font-family Verdana, Arial, Helvetica
• color 663366
• - -gt
• lt/stylegt
• lt/headgt

7
External CSS Code

• Code in stylesheet
• h1
• font-family Verdana, Arial, Helvetica
• color 663366
• Link to stylesheet
• ltlink hrefmyStyles.css relstylesheet
  typetext/css /gt

8
Using Styles

• Redefine HTML tags
• Change the way a particular tag looks (body, p,
  td, h1, h2, h3, etc.)
• Create CSS Classes
• Allows you to create rules for a particular
  element
• Example I have a lightbg class that changes
  the table background color - I dont want it
  applied to ALL tables, so I create a special class

9
Dreamweaver CSS

• Dreamweaver makes creating and applying styles
  easy