Cascading Style Sheets - PowerPoint PPT Presentation

1 / 25
About This Presentation
Title:

Cascading Style Sheets

Description:

Cascading Style Sheets – PowerPoint PPT presentation

Number of Views:82
Avg rating:3.0/5.0
Slides: 26
Provided by: stude1
Category:

less

Transcript and Presenter's Notes

Title: Cascading Style Sheets


1
Cascading Style Sheets
  • Jeff Walker

2
Cascading Style Sheets (CSS)
  • A way of separating content from presentation
  • Used with HTML, XHTML, XML

3
Advantages of Style Sheets
  • Can change entire look feel of document with
    a few edits
  • Same style sheet can apply to multiple documents
  • Markup is neater

4
More advantages
  • Content is more easily maintained
  • Can gear text to multiple devices, rather than
    just desktops
  • Documents usually load more quickly
  • OReilly disagrees with this point.

5
CSS History
  • 1996 CSS1 specification released
  • Color, font, backgrounds
  • 1998 CSS2 specification released
  • Page-based layout
  • Document layout without using HTML tables to
    position items

6
CSS Future
  • CSS3 Still in draft stages
  • Modular organization
  • Effectively a desktop publishing environment with
    features geared toward international and
    multimedia contexts

7
CSS Support
  • IE5 and Navigator 4 do not fully support CSS1 or
    CSS2
  • IE6 supports CSS1
  • Opera 5.12 fully supports CSS1 and most of CSS2
    (www.opera.com)

8
How CSS works
  • A style sheet tells the browser how to render a
    document
  • Multiple style sheets can work together to
    produce the look of a document--Cascading

9
Writing CSS
  • p font-size 12pt font-style italic
  • color green
  • p element to which style relates
  • font-size property of element
  • semi-colons separate properties
  • colons separate properties and their values

10
Some CSS rules
  • CSS rules are case-insensitive
  • Style sheets can be external or imbedded
  • Style rules can be written in-line
  • ltp stylefont-size 150gt

11
Common CSS Mistakes
  • Leaving out semi-colons
  • Leaving out the lt/stylegt end tag on embedded
    style sheets
  • Dont misspell color names

12
Mistakes, continued
  • Color is spelled color, not colour
  • Your problem may be your browser!

13
Setting Colors
  • Name using the 16 VGA colors
  • p color red background yellow
  • Name using Hex Code
  • h2 color 006699 (turquoise)
  • Name using RGB notation
  • h3 color rgb(100, 100, 100)

14
Background Images
  • ltstyle typetext/css
  • pre background-color white
  • background-attachment fixed
  • background-image url
    (yellow_fabric.gif)
  • background-position top left
  • background-repeat no-repeat
  • padding 2em
  • lt/stylegt

15
Setting Margins Borders
  • Margins
  • body margin-left 10 margin-right10
  • Borders
  • div.box border solid border-width thin
    padding 0.2em

16
Controlling Fonts
  • Size
  • h1 font-size 20pt
  • h2 font-size 140
  • Weight
  • h1 font-weight bolder
  • h2 font-weight 300

17
Further Controlling Fonts
  • Style
  • p font-style normal
  • em font-style italic
  • Case
  • span text-transform uppercase
  • span font-variant small-caps

18
Controlling Fonts (part 3)
  • The font itself
  • body font-family Garamond, Times New Roman,
    serif
  • Classes
  • p.special color red background yellow
  • p.small font-size 90
  • p.large font-size 200

19
Text Properties
  • Letter spacing adds space between adjacent
    letters
  • p letter-spacing 2px
  • Line-height Use to change line-spacing
  • p line-height 14pt
  • p line-height 120
  • p line-height 2.0

20
Text Properties II
  • Text-align right, left, center, justify
  • Text-decoration underline, overline,
    line-through
  • Text-indent default is zero
  • p text-indent 3em
  • p.outdent text-indent -3em margin-left 3em

21
Text Properties 3
  • Vertical-align baseline, middle, sub, super,
    text-top, text-bottom, top, bottom
  • Word-spacing
  • h3 word-spacing 25px

22
Some Tips
  • Use multiple selectors
  • h1, h2, h3, h4 text-align center
  • Enclose the style properties in comments if
    embedding the style sheet

23
Embedded Style Sheet
  • ltheadgt
  • lttitlegtExample of named styleslt/titlegt
  • ltstyle typetext/cssgt
  • lt!- -p.color background yellow padding
    1.5em
  • border none
    margin-left 0.5 width100
  • p.small font-sizesmall
    margin-left 30
  • p.normal font-weight bold
    font-size larger
  • color black
    margin-left 30
  • - -gt
  • lt/stylegt
  • lt/headgt

24
External Style Sheet
  • ltlink relstylesheet hreffirst-link.css /gt
  • p.color background yellow padding 1.5em
  • border none
    margin-left 0.5 width100
  • p.small font-sizesmall
    margin-left 30
  • p.normal font-weight bold
    font-size larger
  • color black
    margin-left 30

25
Examples
  • http//www.w3.org/StyleSheets/Core/preview
Write a Comment
User Comments (0)
About PowerShow.com