Cascading Style Sheets CSS

1
Internet Technology (ITNET1)

• Presentation (5)
• Cascading Style Sheets (CSS)

2
Topics in this presentation

• CSS Cascading Style Sheets
• Purpose of CSS
• CSS Types and versions
• Practical use of CSS
• XSL vs CSS
• CSS as
• In line
• Internally
• Externally
• CSS Positioning

I must apologize for the poor english in some
slides. I did not make these !
3
Purpose of CSS

• CSS is a simple way to set a documents style
  information (primarily fonts, colors and
  positioning) to HTML (and XML)
• Technology to separate content and presentation
  (like STRICT XHTML and XML)
• and practical to ease change in design (like a
  kind of template)
• CSS is a W3C recommendation
• http//www.w3.org/Style/CSS

4
CSS in practice

• In practice HTML is still the main source to
  presentation formatting, and CSS is only used
  with obviously advantages to fonts and colors
• But of course some designers used it more than
  others
• And this may easily change to CSS becomes a major
  norm
• In e.g. Visual Studio ASP.NET visual designer,
  CSS Positioning is used extensively

5
CSS Versions !!! Three of the bastards

• Cascading Style Sheets, level 1 (CSS1) became W3C
  Recommendation in December 1996. The CSS language
  is given in
• http//www.w3.org/TR/REC-CSS1
• CSS2, W3C Recommendation may 1998, extends CSS1
  and adds support for media specific style sheets
  (ex.. for printers and speech or sound devices),
  features downloading new fonts, element
  positioning and tables. (2009 CSS 2.1 is
  currently state of the art)
• http//www.w3.org/TR/REC-CSS2
• CSS Mobile Profile became W3C Candidate
  Recommendation specification in October 2001
• http//www.w3.org/TR/css-mobile
• CSS3 is under construction (from 2005) follow
  this work at
• http//www.w3.org/Style/CSS/current-work
• ATTENTION PLEASE. The specifications are OPEN, so
  the browsers may use them to the extent they
  wish. Test the Browsers for level of support.

6
XSL vs. CSS

• W3C and the XSL family
• The Extensible Stylesheet Language
• Using XML to format documents
• more simple language than the sometime
  cryptically CSS language
• Opens the way of a automatically formatting
  procedure XSL Transformations (XSLT) which is a
  language for transforming XML documents into
  other XML documents
• May also be done by server side scripting
• Why two ways of formatting techniques?
• Mostly out of practically reasons
• The results of a StyleSheets are completely
  dependant of the different browsers
  interpretation and implementation
• The so far gained experiences to the HTML
  developers is enormous and it is of course still
  used (Habits are the most difficult thing to
  change)

7
XSL vs. CSS II
8
Will XSL substitute CSS?

• Why does W3C recommend two different style
  languages? Which one should you use? Basically,
  the rule can be summarized very succinctly
• Use CSS when you can, use XSL when you must.
• http//www.w3.org/Style/CSS-vs-XSL eventually
  read in cursory

9
3 ways using CSS with HTML

• External Stylesheet
• ltlink relstylesheet hrefstyle.cssgt
• The composition way. Style information is put
  into its own separate file/document
• Inline style-(sheet)
• ltinput typetext stylecolor ff0000gt
• Formatting put into the HTML tag
• Internal Stylesheet
• ltstyle typetext/cssgt
• div text-align right
• lt/stylegt
• Embedded in the beginning of a HTML document
  (typically)

10
CSS Syntaks

• div color red padding-left 3cm

Selector (tag)
Property
Value
Declaration
11
Inline styles

• Style as in line code put into a tag
• Use it carefully in special cases (SW
  recommendation)
• Like CSS Positioning
• Used extensively in Visual Studio
• What problems do you see with inline?

12
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-strict.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 20 ltp style "font-size 20pt"gtThis
text has the 21 ltemgtfont-sizelt/emgt style
applied to it, making it 20pt. 22 lt/pgt 23
24 ltp style "font-size 20pt color
0000ff"gt 25 This text has the
ltemgtfont-sizelt/emgt and 26 ltemgtcolorlt/emgt
styles applied to it, making it 27 20pt.
and blue.lt/pgt 28 29 lt/bodygt 30 lt/htmlgt
Inline.html
13
Internal stylesheets

• Applies to one whole HTML document and thereby
  all of its tags.
• Should be avoided.. But is of course allowed.
• (Embedded Web server with limited resources)

14
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-strict.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 20
p font-size 14pt 21 22
.special color blue 23 24
lt/stylegt 25 lt/headgt 26
Declared.html
Styles placed in the head apply to all elements
in the document.
15
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,
46 Deitel Associates, Inc. publishes
leading-edge 47 programming textbooks,
professional books, interactive 48
CD-ROM-based multimedia Cyber Classrooms,
satellite 49 courses and World Wide Web
courses.lt/pgt 50 51 lt/bodygt 52 lt/htmlgt
Declared.html
Notice the styles defined in the CSS are applied
to all paragraphs, headers, and bolded text.
16
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-strict.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 20
li em color red 21
font-weight bold 22 23 ul
margin-left 75px 24 25 ul ul
text-decoration underline 26
margin-left 15px 27 28
lt/stylegt 29 lt/headgt 30 31 ltbodygt 32
33 lth1gtShopping list for
ltemgtMondaylt/emgtlt/h1gt 34
Advanced.html
17
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
Advanced.html
18
Program Output
19
External stylesheets

• The right way to do styling!
• Decouples the CSS from the XHTML Styling is found
  in its own document (ex. style.css)
• The main document links/references to the
  stylesheet
• Gives many main HTML document the possibility of
  using/linking the same stylesheet document
• Changes done in the CSS document propagates to
  all HTML document

20
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
Styles.css
Here is a separate stylesheet document, that may
be linked to (referenced) from XHTML documents
21
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-strict.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/19
99/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 20
ltligtBread 21 ltulgt 22
ltligtWhite breadlt/ligt 23
ltligtRye breadlt/ligt 24 ltligtWhole
wheat breadlt/ligt 25 lt/ulgt 26
lt/ligt 27 ltligtRicelt/ligt 28
ltligtPotatoeslt/ligt 29 ltligtPizza
ltemgtwith mushroomslt/emgtlt/ligt 30
lt/ulgt 31
External.html
22
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
External.htmlProgram Output
The documents rendered with an external CSS
should be the same as those rendered with an
internal CSS.
23
W3C CSS Validation Service

• Like XHTML it is possible to get your CSS
  documents validated
• Use this service and also se what future support
  you may expect

24
CSS Positioning

• Instead of doing layout using tables (like in MS
  Word) you may use CSS positioning
• Ex. When using STRICT XHTML or XML
• This paradigm is strongly depend on standards and
  tool support (It is therefore improved in time)
• Good for some problems
• Specialy DHTML designers may have real use of
  positioning when doing interactive user
  interfaces
• Alternative technology is as example Flash

25
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-strict.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/19
99/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 20 ltpgtltimg src "circle.gif"
style "position absolute 21 top
25px left 100px z-index 2" alt 22
"Second positioned image" /gtlt/pgt 23 24
lt/bodygt 25 lt/htmlgt
Positioning.html
The effect of the z-index property is several
images layered on top of one another.
26
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-strict.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/1
999/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 20
21 .super position
relative 22 top -1ex
23 24 .sub position
relative 25 bottom
-1ex 26 27 .shiftleft
position relative 28
left -1ex 29 30 .shiftright
position relative 31
right -1ex 32 33 lt/stylegt 34
lt/headgt
Positioning2.html
27
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
Positioning2.htmlProgram Output
28
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-strict.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 20
color aa5588 21
text-indent 1em 22
font-family arial, sans-serif 23 24
.dark font-weight bold 25 26
lt/stylegt 27 lt/headgt 28
Background.html
29
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
Background.htmlProgram Output
30
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-strict.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 20 ltbodygt 21 22
ltdiv style "width 20"gtHere is some 23
text that goes in a box which is 24
set to stretch across twenty percent 25
of the width of the screen.lt/divgt 26 27
ltdiv style "width 80 text-align
center"gt 28 Here is some CENTERED text
that goes in a box 29 which is set to
stretch across eighty percent of 30 the
width of the screen.lt/divgt 31
Width.html
31
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
Width.htmlProgram Output
32
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-strict.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
20 21 lt/stylegt 22 23
lt/headgt 24 25 ltbodygt 26 27
ltdiv style "text-align center"gt 28
Deitel Associates, Inc.lt/divgt 29 30
ltdiv style "float right margin .5em 31
text-align right"gt 32
Corporate Training and Publishinglt/divgt 33
Floating.html
33
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 53 Cyber Classrooms,
satellite courses and World Wide Web 54
courses.ltspan style "clear right"gt Here is
some 55 unflowing text. Here is some
unflowing text.lt/spangtlt/pgt 56 57
lt/bodygt 58 lt/htmlgt
Floating.html
34
Flow and box model

Margin
Border
Content
Padding
Fig. 6.13 Box model for block-level elements.
35
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-strict.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/xht
ml"gt 9 ltheadgt 10 lttitlegtBorderslt/tit
legt 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 20 .thick
border-width thick 21 22
.medium border-width medium 23 24
.thin border-width thin 25 26
.groove border-style groove 27 28
.inset border-style inset 29 30
.outset border-style outset 31
32 .red border-color red 33
34 .blue border-color blue
Borders.html
36
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
Borders.htmlProgram Output
A sampling of the different types of borders that
can be specified.
37
User Style Sheets

Users can set their own stylesheets.
Cascading A waterfall or a series of small
waterfalls over steep rocks Styles cascade from
parents to children, styles mingle from designer
(top), user (second) , browser
38
Style Sheets finished

• Consider your use of CSS then be consequent in
  use!
• Be care full using the Golden Hammer