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