Cascading Style Sheets

1
Cascading Style Sheets

• Examples
• Why use a Style Sheet
• Linking to an External Style Sheet
• Basic Formatting
• Conclusions

2
Style Sheets

• Keep the decoration separate from the HTML code.
• Easier to control and maintain.
• Makes consistency easier.

3
Sony (sony.css)
4
(No Transcript)
5
Pepsi (pwstylesheet.css)
6
Without a Style Sheet
Imagine you have a Web site with 20 pages. Each
page has at least one h1 header and two h2
headers. lth1gtltfont color"FF0000"gtContactlt/h1gt lth2
gtltfont color0000FFgtMarketinglt/h2gt etc. 20 x
(12) 60to change these styles, you would need
to edit every instance of h1 and h2. Even with
an authoring tool, this is a big job.
7
Using Styles Saves Time
To modify the style of the site, you only need to
edit the CSS, not every single page.
400 page Web site
CSS
8
Syntax

• Styles can be Internal (in the header) or
  External (in a style sheet with a .css extension)
• Selector Declaration where a declaration is a
  property value pair.
• h1 color 101010
• body background-color 222222
• Cascading why?

9
Internal Style in the Header
lthtmlgtltheadgt ltstyle type"text/css"gt body
background-color 000000 h1 color
FFFF00 h2 color FF6633 lt/stylegt lttitlegtA
Seasonal Style Sheetlt/titlegtlt/headgt ltbodygt lth1gtDon
t Miss Our Next Pagelt/h1gt lth2gtor youll regret
it!lt/h2gt lt/bodygtlt/htmlgt
yellow pink
10
Linking to an External Style Sheet

• external file with only styles
• .css extension
• Looks like (Pepsi, Sony)
• ltlink hrefpath/file.css relstylesheet
  typetext/cssgt

11
Formatting Using Styles

• Html Selectors
• Class Selectors
• ID Selectors
• Pseudo-Classes
• Pseudo-Elements

12
HTML Selectors

• Comments
• / These are the styles for the dog collar
  promotion. /
• Alignment
• h1 text-align center
• Font
• p font-family sans-serif
• Color
• p color 123456

13
Combining Selectors

• Group Selectors
• h1, h2, h3 color 999999
• Combining Declarations
• h1 color 999999 font-size 24pt font-family
  sans-serif
• Descendant Selectors
• p b color 000000 font-size 24pt affects
  all bold contained in the paragraph

14
Class Selectors (Custom Class)

• Define your own style not related to a tag.
• Define the class in the header and apply it in
  the context of the page.
• .xmaspromo font-size 16pt font-weight bold
  color FF0000
• ltp classxmaspromogtBuy, buy, buy!!!lt/pgt

15
ID Selectors

• For special cases if you need flexibility.
• For example, you have a paragraph style but, you
  would like one paragraph to be another color.
• ID Selector format in the style sheet
• bluetext color blue
• In the body
• ltp idbluetextgtblah, blah, blahlt/pgt

16
Pseudo-Classes

• For changing the link, visited, active and hover
  states.
• Link what the link will look like
• Visited a recently visited link
• Hover when the mouse is over the link
• Active when the link is clicked
• You can use these styles to create a rollover
  effect or to get rid of the underline in the
  hyperlink

17
Pseudoclass Example
18
Pseudo-Elements

• Used for making the first character in a
  paragraph larger than the rest. Like the
  religious scripture written by monks.
• In the head
• P.doprcap first-letter font-size 300 float
  left color 0000FF
• In the body
• ltp classdropcapgtblah, blah, blahlt/pgt

19
Conclusions

• Styles are the future of Web design.
• Style Sheets
• Separate the design from the content.
• Make it easy to maintain your site in that you
  only need to edit the css when you want to change
  a style.
• They force your site to be consistent in that
  every page follows the rules of the style sheet.
• Why are cascading style sheets, cascading?
• You can have more than one and the rules can be
  additive.
• If a style isnt defined in one, the page
  inherits the styles from the parent style sheet.