Dynamic HTML Cascading Style Sheets CSS

1
Dynamic HTML -Cascading Style Sheets (CSS)
Outline 6.1 Introduction 6.2 Inline
Styles 6.3 Embedded Style Sheets 6.4
Conflicting Styles 6.5 Linking External Style
Sheets 6.7 Positioning Elements 6.8
Backgrounds 6.9 Element Dimensions 6.10 Text
Flow and the Box Model 6.11 User Style
Sheets 6.12 Internet and World Wide Web
Resources
2
CSS

• Allow to specify the style of page elements
  (spacing, margins, etc.) separately from the
  structure of your document (section header, body
  text, links, etc.). This separation of structure
  from content allows greater manageability and
  makes changing the style of your document easier.
• CSS is...
• Flexible, and a fairly logical language, easy to
  use and to implement.
• Offers site-wide, rich styling.
• Keeps the structure of a document.
• Compacts the file size by reducing HTML 'clutter'
  and
• Reduces the time spent for maintaining and
  changing the site.

3
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

4
Program Output
5
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.
6
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,

7
Program Output
Notice the styles defined in the CSS are applied
to all paragraphs, headers, and bolded text.
8
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

9
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.food.com"gt
• 50 Go to the Grocery storelt/agtlt/pgt
• 51
• 52 lt/bodygt
• 53 lt/htmlgt

10
Program Output
11
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

12
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

13
External.htmlProgram Output

• 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.
14
6.6 W3C CSS Validation Service
Fig. 6.6 Validating a CSS document. (Courtesy of
World Wide Web Consortium (W3C).)
15
6.6 W3C CSS Validation Service
Fig. 6.7 CSS validation results. (Courtesy of
World Wide Web Consortium (W3C).)
16
Positioning.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.8 positioning.html --gt
• 6 lt!-- Absolute positioning of elements --gt
• 7
• 8 lthtml xmlns "http//www.w3.org/1999/xhtml"gt
  
• 9 ltheadgt
• 10 lttitlegtAbsolute Positioninglt/titlegt
• 11 lt/headgt
• 12
• 13 ltbodygt
• 14
• 15 ltpgtltimg src "i.gif" style
  "position absolute
• 16 top 0px left 0px z-index 1"
  alt
• 17 "First positioned image" /gtlt/pgt
• 18 ltp style "position absolute top
  50px left 50px
• 19 z-index 3 font-size
  20pt"gtPositioned Textlt/pgt

In the past, controlling of elements in HTML
document was difficult positioning was basically
up to the browser. CCS introduces the position
property and a capability called absolute
positioning, which gives us greater control over
how our documents are displayed.
17
Program Output
The effect of the z-index property is several
images layered on top of one another.
18
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

19
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

Since relative positioning keeps elements in the
flow of text in your documents, be careful to
avoid overlapping text unintentionally.
20
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

21
Background.htmlProgram Output

• 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

22
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

23
Width.htmlProgram Output

• 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

24
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

25
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

26
Program Output
27
6.10 Test Flow and Box Model
Margin
Border
Content
Padding
Fig. 6.13 Box model for block-level elements.
28
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

29
Borders.htmlProgram Output

• 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.
30
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

31
Program Output
32
User Style Sheets

• An important issue to keep in mind when adding
  style sheets to your site is what kind of users
  will be viewing your site. Users have the option
  to define their own user style sheets to format
  pages based on their own preferences for
  example, visually impaired people might want to
  increase the text size on all pages they view.
• Possibility of conflicts between user styles and
  author styles

33
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

34
Program Output
Styles set by the author have higher precedence
over the styles set by user style sheets.
35
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

36
6.11 User Style Sheets
Setting the users style sheet in IE.
Fig. 6.18 Adding a user style sheet in Internet
Explorer 5.5.
37
6.11 User Style Sheets
Fig. 6.19 Web page with user styles applied.
38
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

39
Program Output
Output before relative measurement is used to
define the font in the document.
40
6.11 User Style Sheets
Fig. 6.21 Using relative measurements in author
styles.
Output when relative measurement is used. By
using relative measurements the user defined
styles are not overwritten.
41
Internet Resources

• http//style.webreview.com
• http//www.mako4css.com/index.htm