CSS

1
CSS

• Cascading Style Sheets
• More recycled material from Deitel and Deitel

2
CSS

• A way of specifying how a web page looks
• Style information can be stored separately from
  the actual web page
• Significantly extends the control over web page
  appearance - e.g. precise positioning of images
  and text
• In HTML 4 and XHTML 1 many tags and attributes
  have been deprecated (i.e. discouraged and may
  ultimately be removed) in favour of the
  corresponding way of doing things with style
  sheets.
• One of the enabling technologies of Dynamic
  HTML
• Can be used in conjunction with XML

3
History

• W3C approved CSS level 1 standard in late 1996
• Browser support from IE version 3 and Navigator
  version 4
• W3C approved CSS level 2 standard in May 1998
• 2.1 and 3 still under development
• The newest browsers claim CSS level 2
• but it is not easy to ascertain how fully

4
Style Rule Format

• body color white background black
  font-family arial

declaration enclosed in s
selector - what rule applies to (body tag in this
case)

• Declaration consists of series of property value
  pairs separated by
• Approx 50 different properties
• Selector can be tag (e.g. body) or an invented
  classname (e.g. ghastly) preceded by a . - more
  than one can be separated by ,s

5
Inline.html

• 1 lt?xml version"1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- Fig. 6.1 inline.html --gt
• 6 lt!-- Using inline styles --gt
• 7
• 8 lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• 9 ltheadgt
• 10 lttitlegtInline Styleslt/titlegt
• 11 lt/headgt
• 12
• 13 ltbodygt
• 14
• 15 ltpgtThis text does not have any style
  applied to it.lt/pgt
• 16
• 17 lt!-- The style attribute allows you to
  declare --gt
• 18 lt!-- inline styles. Separate multiple
  styles --gt
• 19 lt!-- with a semicolon.
  --gt

6
(No Transcript)
7
Declared.html

• 1 lt?xml version"1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- Fig. 6.2 declared.html
  --gt
• 6 lt!-- Declaring a style sheet in the header
  section. --gt
• 7
• 8 lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• 9 ltheadgt
• 10 lttitlegtStyle Sheetslt/titlegt
• 11
• 12 lt!-- This begins the style sheet
  section. --gt
• 13 ltstyle type"text/css"gt
• 14
• 15 em background-color
  8000ff
• 16 color white
• 17
• 18 h1 font-family arial,
  sans-serif
• 19

Styles placed in the head apply to all elements
in the document.
8
Declared.html

• 27 ltbodygt
• 28
• 29 lt!-- This class attribute applies the
  .blue style --gt
• 30 lth1 class"special"gtDeitel
  Associates, Inc.lt/h1gt
• 31
• 32 ltpgtDeitel Associates, Inc. is an
  internationally
• 33 recognized corporate training and
  publishing organization
• 34 specializing in programming languages,
  Internet/World
• 35 Wide Web technology and object
  technology education.
• 36 Deitel Associates, Inc. is a member
  of the World Wide
• 37 Web Consortium. The company provides
  courses on Java,
• 38 C, Visual Basic, C, Internet and
  World Wide Web
• 39 programming, and Object
  Technology.lt/pgt
• 40
• 41 lth1gtClientslt/h1gt
• 42 ltp class"special"gt The company's
  clients include many
• 43 ltemgtFortune 1000 companieslt/emgt,
  government agencies,
• 44 branches of the military and business
  organizations.
• 45 Through its publishing partnership
  with Prentice Hall,

9
Notice the styles defined in the CSS are applied
to all paragraphs, headers, and bolded text.
10
Advanced.html

• 1 lt?xml version"1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- Fig 6.3 advanced.html --gt
• 6 lt!-- More advanced style sheets --gt
• 7
• 8 lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• 9 ltheadgt
• 10 lttitlegtMore Styleslt/titlegt
• 11
• 12 ltstyle type"text/css"gt
• 13
• 14 a.nodec text-decoration none
• 15
• 16 ahover text-decoration
  underline
• 17 color red
• 18 background-color
  ccffcc
• 19

11
Advanced.html

• 35 ltulgt
• 36 ltligtMilklt/ligt
• 37 ltligtBread
• 38 ltulgt
• 39 ltligtWhite breadlt/ligt
• 40 ltligtRye breadlt/ligt
• 41 ltligtWhole wheat breadlt/ligt
• 42 lt/ulgt
• 43 lt/ligt
• 44 ltligtRicelt/ligt
• 45 ltligtPotatoeslt/ligt
• 46 ltligtPizza ltemgtwith
  mushroomslt/emgtlt/ligt
• 47 lt/ulgt
• 48
• 49 ltpgtlta class"nodec" href"http//www.fo
  od.com"gt
• 50 Go to the Grocery storelt/agtlt/pgt
• 51
• 52 lt/bodygt
• 53 lt/htmlgt

12
(No Transcript)
13
Linking an External Style Sheet

• ltlink relstylesheet hrefss1.css type"text/css"gt

standard filename extension
mime type

• IE also supports a method of importing multiple
  style sheets using _at_import.
• Inheritance of body style by other tags
  enclosed within it
• e.g. the font for the whole document

14
Styles.css

• 1 / Fig. 6.4 styles.css /
• 2 / An external stylesheet /
• 3
• 4 a text-decoration none
• 5
• 6 ahover text-decoration underline
• 7 color red
• 8 background-color ccffcc
• 9
• 10 li em color red
• 11 font-weight bold
• 12 background-color ffffff
• 13
• 14 ul margin-left 2cm
• 15
• 16 ul ul text-decoration underline
• 17 margin-left .5cm

15
External.html

• 1 lt?xml version"1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- Fig. 6.5 external.html --gt
• 6 lt!-- Linking external style sheets --gt
• 7
• 8 lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• 9 ltheadgt
• 10 lttitlegtLinking External Style
  Sheetslt/titlegt
• 11 ltlink rel"stylesheet" type"text/css"
  
• 12 href"styles.css" /gt
• 13 lt/headgt
• 14
• 15 ltbodygt
• 16
• 17 lth1gtShopping list for
  ltemgtMondaylt/emgtlt/h1gt
• 18 ltulgt
• 19 ltligtMilklt/ligt

16
External.html

• 32 ltpgt
• 33 lta href"http//www.food.com"gtGo to
  the Grocery storelt/agt
• 34 lt/pgt
• 35
• 36 lt/bodygt
• 37 lt/htmlgt

The documents rendered with an external CSS
should be the same as those rendered with an
internal CSS.
17
Types of Style Sheet Properties

• Font
• font-family e.g. arial or serif
• font-size
• font-style e.g. normal or italics
• Colour
• color text colour
• background-color
• background-image
• background-attachment scroll or fixed
• Text
• letter-spacing
• text-align
• text-transform e.g. uppercase, lowercase
• list-style-type e.g. disk, square, lower-roman
• Positioning and layout
• position
• top - y co-ordinate of element top
• left - x co-ordinate of element left
• z-index - control which elements appear on top
  of others

18
W3C CSS Validation Service
19
W3C CSS Validation Service
20
Positioning

• Key properties
• top - offset of elements top edge
• left - offset of elements left edge
• Relative versus absolute positioning
• positionrelative
• elements position is relative to where it would
  have been.
• positionabsolute
• elements position is relative to the page top
  left

21
Positioning
ltpgt I feel I am ltspan style"positionabsolute
top100px left30px"gt falling lt/spangt lt/pgt
30 pixels
100 pixels
22
Positioning2.html

• 1 lt?xml version"1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- Fig. 6.9 positioning2.html --gt
• 6 lt!-- Relative positioning of elements --gt
• 7
• 8 lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• 9 ltheadgt
• 10 lttitlegtRelative Positioninglt/titlegt
• 11
• 12 ltstyle type"text/css"gt
• 13
• 14 p font-size 1.3em
• 15 font-family verdana,
  arial, sans-serif
• 16
• 17 span color red
• 18 font-size .6em
• 19 height 1em

23
Positioning2.htmlProgram Output

• 35
• 36 ltbodygt
• 37
• 38 ltpgtThe text at the end of this
  sentence
• 39 ltspan class"super"gtis in
  superscriptlt/spangt.lt/pgt
• 40
• 41 ltpgtThe text at the end of this
  sentence
• 42 ltspan class"sub"gtis in
  subscriptlt/spangt.lt/pgt
• 43
• 44 ltpgtThe text at the end of this
  sentence
• 45 ltspan class"shiftleft"gtis shifted
  leftlt/spangt.lt/pgt
• 46
• 47 ltpgtThe text at the end of this
  sentence
• 48 ltspan class"shiftright"gtis shifted
  rightlt/spangt.lt/pgt
• 49
• 50 lt/bodygt
• 51 lt/htmlgt

24
Background.html

• 1 lt?xml version"1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- Fig. 6.10 background.html
  --gt
• 6 lt!-- Adding background images and
  indentation --gt
• 7
• 8 lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• 9 ltheadgt
• 10 lttitlegtBackground Imageslt/titlegt
• 11
• 12 ltstyle type"text/css"gt
• 13
• 14 body background-image
  url(logo.gif)
• 15 background-position bottom
  right
• 16 background-repeat
  no-repeat
• 17 background-attachment
  fixed
• 18
• 19 p font-size 18pt

25
Background.html

• 29 ltbodygt
• 30
• 31 ltpgt
• 32 This example uses the
  background-image,
• 33 background-position and
  background-attachment
• 34 styles to place the ltspan
  class"dark"gtDeitel
• 35 Associates, Inc.lt/spangt logo in the
  bottom,
• 36 right corner of the page. Notice how
  the logo
• 37 stays in the proper position when you
  resize the
• 38 browser window.
• 39 lt/pgt
• 40
• 41 lt/bodygt
• 42 lt/htmlgt

26
Width.html

• 1 lt?xml version"1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- Fig. 6.11 width.html
  --gt
• 6 lt!-- Setting box dimensions and aligning
  text --gt
• 7
• 8 lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• 9 ltheadgt
• 10 lttitlegtBox Dimensionslt/titlegt
• 11
• 12 ltstyle type"text/css"gt
• 13
• 14 div background-color ffccff
• 15 margin-bottom .5em
• 16 lt/stylegt
• 17
• 18 lt/headgt
• 19

27
Width.html

• 32 ltdiv style"width 20 height 30
  overflow scroll"gt
• 33 This box is only twenty percent of
• 34 the width and thirty percent of the
  height.
• 35 What do we do if it overflows? Set the
• 36 overflow property to scroll!lt/divgt
• 37
• 38 lt/bodygt
• 39 lt/htmlgt

28
Floating.html

• 1 lt?xml version"1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- Fig. 6.12 floating.html --gt
• 6 lt!-- Floating elements and element boxes --gt
• 7
• 8 lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• 9 ltheadgt
• 10 lttitlegtFlowing Text Around Floating
  Elementslt/titlegt
• 11
• 12 ltstyle type"text/css"gt
• 13
• 14 div background-color ffccff
• 15 margin-bottom .5em
• 16 font-size 1.5em
• 17 width 50
• 18
• 19 p text-align justify

29
Floating.html

• 34 ltpgtDeitel Associates, Inc. is an
  internationally
• 35 recognized corporate training and
  publishing organization
• 36 specializing in programming languages,
  Internet/World
• 37 Wide Web technology and object
  technology education.
• 38 Deitel Associates, Inc. is a member
  of the World Wide
• 39 Web Consortium. The company provides
  courses on Java,
• 40 C, Visual Basic, C, Internet and
  World Wide Web
• 41 programming, and Object
  Technology.lt/pgt
• 42
• 43 ltdiv style"float right padding
  .5em
• 44 text-align right"gt
• 45 Leading-edge Programming
  Textbookslt/divgt
• 46
• 47 ltpgtThe company's clients include many
  Fortune 1000
• 48 companies, government agencies,
  branches of the military
• 49 and business organizations. Through
  its publishing
• 50 partnership with Prentice Hall, Deitel
  Associates,
• 51 Inc. publishes leading-edge
  programming textbooks,
• 52 professional books, interactive
  CD-ROM-based multimedia

30
(No Transcript)
31
Common units of measurement

• Many style properties take values that are length
  measurements e.g.
• font-size24pt line-height2em
  border-width10px
• The available units are

Some values are specified as percentages. The
meaning varies according to the property being
specified e.g. h1 font-size 120 - means 120
of the current font-size .box positionabsolute
top15 left55 - means 15 and 55 of the
containers height and width respectively
32
Boxes

• Each element in a document is considered to be in
  a (possibly invisible) box.
• You have control over the boxs
• border - can make it visible and choose its
  width, style and colour
• padding - the space between the border (visible
  or not) and the contents
• margin - the space between the border and other
  elements on the page

33
Borders.html

• 1 lt?xml version"1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- Fig. 6.14 borders.html --gt
• 6 lt!-- Setting borders of an element --gt
• 7
• 8 lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• 9 ltheadgt
• 10 lttitlegtBorderslt/titlegt
• 11
• 12 ltstyle type"text/css"gt
• 13
• 14 body background-color ccffcc
  
• 15
• 16 div text-align center
• 17 margin-bottom 1em
• 18 padding .5em
• 19

34
Borders.html

• 35
• 36 lt/stylegt
• 37 lt/headgt
• 38
• 39 ltbodygt
• 40
• 41 ltdiv class"thick groove"gtThis text
  has a borderlt/divgt
• 42 ltdiv class"medium groove"gtThis text
  has a borderlt/divgt
• 43 ltdiv class"thin groove"gtThis text has
  a borderlt/divgt
• 44
• 45 ltp class"thin red inset"gtA thin red
  line...lt/pgt
• 46 ltp class"medium blue outset"gt
• 47 And a thicker blue linelt/pgt
• 48
• 49 lt/bodygt
• 50 lt/htmlgt

A sampling of the different types of borders that
can be specified.
35
Borders2.html

• 1 lt?xml version"1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- Fig. 6.15 borders2.html --gt
• 6 lt!-- Various border-styles --gt
• 7
• 8 lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• 9 ltheadgt
• 10 lttitlegtBorderslt/titlegt
• 11
• 12 ltstyle type"text/css"gt
• 13
• 14 body background-color ccffcc
  
• 15
• 16 div text-align center
• 17 margin-bottom .3em
• 18 width 50
• 19 position relative

36
(No Transcript)
37
Layout and positioning
.headerText positionabsolutetop0
left30 backgroundblackborder-styleridge
margin-top10pxpadding.5ex .5em
text-aligncenterfont-weightbold z-index1
.button border5px outset 339933
margin4px
.text positionabsolute top15
left55 width45 height80
border10px ridge padding5
background-imageurl(backgr.gif)
background-attachmentfixed
overflowautoz-index4
.navbuttons positionabsolutetop0
left0 backgroundwhiteborder5px outset
margin10px z-index7
.caption positionrelative top-2.5ex
left1em font-styleitalic z-index3
.picture positionabsolute top20
left5z-index2
38
Layout and Positioning
Extract from the style sheet (skel.css)
.... .picture positionabsolute top20
left5 z-index2 .caption
positionrelative top-2.5ex left1em
font-styleitalic z-index3
.... ltdiv classpicturegt ltimg src"skullsmall.gif
" width372 height318 alt"The skull"gtltbr
/gt ltdiv classcaptiongtFig 3 - Skulllt/divgt lt/divgt .
...
Extract from the HTML document
The relative positioning of the caption makes it
overlap the same space as the picture. The
higher z-index ensures it appears on top of,
rather than hidden by the picture.
39
The panel of navigation buttons
Extract from the style sheet (skel.css)
The navigation panel is assembled from three
basic gifs
.navbuttons positionabsolute top0 left0
backgroundwhite border5px
outset margin10px
z-index7 .button border5px outset
339933 margin4px
Extract from the HTML document
ltdiv classnavbuttonsgt lta hrefdummy.htmlgt ltimg
classbutton srcback.gif alt"back" width38
height38gtlt/agt lta hrefdummy.htmlgt ltimg
classbutton srcforward.gif alt"next" width38
height38gtlt/agt lta hrefdummy.htmlgt ltimg
classbutton srchome.gif alt"home" width38
height38gtlt/agt lt/divgt
What is the effect of the margin property of the
button class?
40
extract from the HTML document
ltdiv classtextgt ltpgtThe Skulllt/pgt ltpgtThe skull is
one of the principle groups of bones in the
human anatomy. The skull consists of
twenty-six bones eight bones form the lta
hrefdummy.htmlgt craniumlt/agt, which houses the
brain and lta href dummy.htmlgtear ossicles lt/agt,
plus fourteen facial bones, which form the
front of the face, jaw, nose, orbits, and the
roof of the mouth, three more bones ... lt/div
extract from the HTML document The text region
Extract from the style sheet
.text positionabsolute top15
left55 width45
height80border10px ridge
padding5 overflowauto
background-imageurl(backgr.gif)
background-attachmentfixed z-index4
overflowauto means that when the contents do not
all fit in the box a scroll bar will appear to
allow them to be viewed background-attachmentfixe
d means that the background image will not scroll
with the contents.
41
What happens if the document is viewed in a
browser that doesnt understand style sheets?
Where does this message come from?
ltdiv classbrowserWarninggt This page is best
viewed using a browser that can process Cascading
Style Sheets of the type supported by Internet
Explorer 4 or above lt/divgt
42
What happens if the document is viewed in a
browser that does understand style sheets but not
this type?
Nasty mess! One way to tackle this problem is to
include browser sniffer code. For example
replace the ltlinkgt in the HTML document with the
following JavaScript
ltscript typetext/javascript"gt lt!-- if
((navigator.appName "Microsoft Internet
Explorer" parseInt(navigator. appVersion)
gt4) (navigator.userAgent.toLowerCase()
.indexOf('gecko' ! -1)))
document.write("ltlink rel'stylesheet'
type'text/css href'skel.css/gt") // --gt lt/
scriptgt
43
Full code for positioning example
lt?xml version"1.0"?gt lt!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN" "http//www.w3
.org/TR/xhtml1/DTD/xhtml1-strict.dtd"gt lthtml
xmlnshttp//www.w3.org/1999/xhtmlgt
ltheadgtlttitlegtStyle Sheet Example -
positioninglt/titlegt ltscript type"text/javascript
"gt lt!-- // This style sheet works for IE 4 and
Netscape 6 if ((navigator.appName
"Microsoft Internet Explorer"
parseInt(navigator. appVersion) gt4)
(navigator.userAgent.toLowerCase().indexOf('g
ecko' ! -1))) document.write("ltlink rel
'stylesheet' type'text/css' href'skel.css/gt")
// --gt lt/scriptgt lt/headgt
ltbodygt ltdiv classbrowserWarninggt This page
is best viewed with Internet Explorer 4 or above
with JavaScript enabled lt/divgt ltdiv
classnavbuttonsgtlta hrefdummy.htmlgt ltimg
classbutton srcback.gif alt"back" width38
height38gtlt/agt lta hrefdummy.htmlgt
ltimg classbutton srcforward.gif alt"next"
width38 height38gtlt/agt lta
hrefdummy.htmlgt ltimg classbutton
srchome.gif alt"home" width38
height38gtlt/agt lt/divgt
44
ltdiv classheaderTextgt Exploring the human
skeleton - the skull lt/divgt ltdiv
classpicturegt ltimg src"skullsmall.gif"
width372 height318 alt"The skull"gtltbr /gt
ltdiv classcaptiongtFig 3 - Skulllt/divgt lt/divgt lt
div classtextgt ltpgtThe Skulllt/pgt
ltpgtThe skull is one of the principle groups of
bones in the eight bones form the lta
hrefdummy.htmlgtcraniumlt/agt, which houses the
brain and lta hrefdummy.htmlgtear ossicleslt/agt,
plus fourteen facial bones, which form the front
of the face, jaw, nose, orbits, and the roof of
the mouth, three more bones make up the inner ear
ossicles, blah blah blah the lower sides of the
cavity and two palate bones form the floor of the
nasal cavity as well as the roof of the mouth.
The mandible is the only movable part of the
skull, forming the lower jaw and mounting the
teeth. lt/pgt ltpgtetclt/pgt lt/divgt
lt/bodygt lt/htmlgt
45
skel.css
body background339933colorwhite
font-familyVerdana, sans-seriffont-size12pt /
pseudo-classes specifying the appearance of
links / alink coloryellow avisited
colorCCCC33 aactive coloryellow /
classes to specify the formatting of the major
page elements / .picture positionabsolute
top20 left5 z-index2 .text
positionabsolute top15 left55 width45
height80
border10px ridge padding5 overflowauto
background-imageurl(backgr.gif)
background-attachmentfixed
z-index4 .navbuttons positionabsolute
top0 left0
backgroundwhite border5px outset
margin10px z-index7 .headerText
positionabsolute top0 left30
backgroundblack border-styleridge
margin-top10px
padding.5ex .5em text-aligncenter
font-weightbold
z-index1 .caption positionrelative
top-2.5ex left1em
font-styleitalic
z-index3 .button border5px outset
339933 margin4px .browserWarning
displaynone
46
User_absolute.html

• 1 lt?xml version"1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- Fig. 6.16 user_absolute.html --gt
• 6 lt!-- User styles --gt
• 7
• 8 lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• 9 ltheadgt
• 10 lttitlegtUser Styleslt/titlegt
• 11
• 12 ltstyle type"text/css"gt
• 13
• 14 .note font-size 9pt
• 15
• 16 lt/stylegt
• 17 lt/headgt
• 18
• 19 ltbodygt

47
Styles set by the author have higher precedence
over the styles set by user style sheets.
48
Userstyles.css

• 1 / Fig. 6.17 userstyles.css /
• 2 / A user stylesheet /
• 3
• 4 body font-size 20pt
• 5 color yellow
• 6 background-color 000080

49
User Style Sheets
Setting the users style sheet in IE.
50
User Style Sheets
51
User_relative.html

• 1 lt?xml version"1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- Fig. 6.20 user_relative.html --gt
• 6 lt!-- User styles --gt
• 7
• 8 lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• 9 ltheadgt
• 10 lttitlegtUser Styleslt/titlegt
• 11
• 12 ltstyle type"text/css"gt
• 13
• 14 .note font-size .75em
• 15
• 16 lt/stylegt
• 17 lt/headgt
• 18
• 19 ltbodygt

52
Output before relative measurement is used to
define the font in the document.
53
User Style Sheets
Output when relative measurement is used. By
using relative measurements the user defined
styles are not overwritten.
54
Pros and Cons of Style Sheets

• Some advantages
• Enhanced control over the appearance of pages
• Style can be stored separately from a page
• shared between several pages
• easy to change and maintain
• Clear separation of content and formatting
  information
• enhanced compatibility with assistive
  technologies
• XHTML can be kept simple and uncluttered
• Enables DHTML
• Some disadvantages
• Browser support - not supported by older browsers
• Inconsistent support by current browsers
• accessibility issue
• Authoring tool support
• Complexity