Chapter 3 Cascading Style Sheets

1
Chapter 3 Cascading Style Sheets
2
Objectives

• Compare CSS formatting with HTML formatting.
• Describe and compare the 3 levels of style
  sheets.
• Apply style classes and pseudo-classes in style
  sheets.
• Apply font, color background, text, box,
  positioning, and filter properties in style
  sheets.

3
Introduction

• HTML is primarily concerned with content, rather
  than style. However, tags have presentation
  properties, for which browsers have default
  values.
• The CSS1 cascading style sheet specification was
  developed in 1996 followed by CSS2 in 1998. CSS
  provides Web authors a powerful and flexible way
  to control the presentation details of documents.

4
Introduction

• Provide the means to control and change
  presentation of HTML documents
• Not technically HTML, but can be embedded in HTML
  documents
• One of the most important capabilities of style
  sheets is that they allow you to impose a
  standard style on a whole document, or even a
  whole collection of documents

5
Introduction

• Style is specified for a tag by the values of its
  properties.
• Current browsers do not implement all of CSS2
• Example HTML vs. CSS

6
Levels of Style Sheets

• HTML style sheets are called cascading style
  sheets because they can be defined at three
  different levels to specify the style of a
  document. Lower-level style sheets can override
  higher-level style sheets, so the style of the
  content of a tag is determined through a cascade
  of style sheet applications.

7
Levels of Style Sheets

• Inline - specified for a specific occurrence of a
  tag and apply only to that tag
• This is fine-grain style, which defeats the
  purpose of style sheets - uniform style
• Document-level style sheets - apply to the whole
  document in which they appear
• External style sheets - can be applied to any
  number of documents

8
Levels of Style Sheets

• When more than one style sheet applies to a
  specific tag in a document, the lowest level
  style sheet has precedence.
• Note IE implementation is a bit different. It
  takes a nearest first approach.
• Example What color is it?

9
Levels of Style Sheets

• Inline style sheets appear in the tag itself
• Document-level style sheets appear in the head of
  the document
• External style sheets are in separate files,
  potentially on any server on the Internet
• Written as text files with the MIME type text/css
• ltlinkgt tag is used to specify that the browser is
  to fetch and use an external style sheet file
• ltlink rel stylesheet type "text/css" href
  "http//www.wherever.org/termpaper.css"gtlt/linkgt

10
Style Specification Formats

• Format depends on the level of the style sheet
• Inline Style sheet appears as the value of the
  style attribute
• General form
• style "property_1 value_1
• property_2 value_2
• property_n value_n
• Scope of an inline style sheet is the content of
  the tag

11
Style Specification Formats

• Document-level
• Style sheet appears as a list of rules that are
  the content of a ltstylegt tag
• The ltstylegt tag must include the type attribute,
  set to "text/css"
• The list of rules must be placed in an HTML
  comment, because it is not HTML

12
Style Specification Formats

• Comments in the rule list must have a different
  form - use C comments (//)
• General form
• ltstyle type "text/css"gt
• lt!--
• rule list
• --gt
• lt/stylegt

13
Style Specification Formats

• Form of the rules
• selector list of property/values
• The selector is a tag name or a list of tag
  names, separated by commas.
• Each property/value pair has the form property
  value
• Pairs are separated by semicolons, just as in the
  value of a ltstylegt tag

14
Style Specification Formats
H1 text-aligncenter font-familyArial
15
Style Specification Formats

• External style sheets
• Form is a list of style rules, as in the content
  of a ltstylegt tag for document-level style sheets
• E.g.
• H1colorred
• H1,H2 background-colorwhite

16
Style Classes

• Used to allow different occurrences of the same
  tag to use different style specifications
• A style class has a name, which is attached to a
  tag name
• For example,
• p.normal property/value list
• p.special property/value list

17
Style Classes

• The class you want on a particular occurrence of
  a tag is specified with the class attribute of
  the tag
• For example,
• ltp class normal"gt
• ...
• lt/pgt
• ...
• ltp class special"gt
• ...
• lt/pgt

18
Style Classes

• A generic class can be defined if you want a
  style to apply to more than one kind of tag
• A generic class must be named, and the name must
  begin with a period.
• For example .really-big
• Use it as if it were a normal style class
• lth1 class "really-big"gt lt/h1gt
• ...
• ltp class "really-big"gt lt/pgt

19
Style Classes

• Example

20
Anchor Pseudo-Classes

• Anchor pseudo-classes can be used to specify the
  hyperlink effect
• Alink color red / unvisited link /
• Avisited color blue / visited links /
• Aactive color lime / active links /
• Ahover color green / hovering links /

21
Pseudo-classes

• pseudo-classes can be combined with normal
  classes
• A.externalvisited color blue
• lta classexternal href"http//out.side/"gtextern
  al linklt/Agt
• Note that normal class names precede
  pseudo-classes in the selector.

22
Pseudo-classes

• Example of pseudo-classes
• Questions
• How to remove underlines of all links? (hint
  text-decorationnone)
• How to remove underlines of only some links ?
• Answers
• A text-decorationnone
• A.nolinetext-decorationnone
• A.nolinevisited text-decorationnone

23
Style properties

• There are more than 50 different properties in 5
  categories
• - Font (e.g. font-family, font-size)
• - Color and background (e.g. color,
  background-color, background-image)
• - Text (e.g. text-decoration, text-align)
• - Box (e.g. margin, padding, border)
• - Classification (e.g. list-style, display)

24
Property Value Forms

• Keywords - left, small, Not case sensitive
• Length - numbers, maybe with decimal points
• Length units px, in, cm, mm, pt, pc (picas, 12
  points), em ( height of the letter m),
  x-height ( height of the letter x)
• No space is allowed between the number and the
  unit specification. e.g., 1.5 in is illegal!

25
Property Value Forms

• Percentage - just a number followed immediately
  by a percent sign
• URL values
• url(protocol//server/pathname)
• Colors
• Color name
• rgb(n1, n2, n3), Numbers can be decimal or
  percentages
• Hex form XXXXXX

26
Property Value Forms

• Property values are inherited by all nested tags,
  unless overriden.
• For example, if we set property value (e.g.
  font-size, color, etc.) for the ltbodygt tag, then
  the whole document will inherit that property
  value automatically. Unless overridden, every tag
  in the document inherits the property values of
  ltbodygt.

27
Font Properties

• font-family
• Value is a list of font names - browser uses the
  first in the list it has
• E.g. font-familyArial, Helvetica, Courier
• Generic fonts serif, sans-serif, cursive,
  fantasy, and monospace (defined in CSS)
• If a font name has more than one word, it should
  be single-quoted
• Example

28
Font Properties

• font-size
• Possible values a length number or a name, such
  as smaller, xx-large, etc.
• font-style
• italic, oblique (useless), normal
• font-weight - degrees of boldness
• bolder, lighter, bold, normal
• Could specify as a multiple of 100 (100 900)

29
Font Properties

• font
• For specifying a list of font properties
• font bolder 14pt Arial Helvetica
• Order must be style, weight, size, name(s)
• Example font properties

30
Color and Background Properties

• Color is a problem for the Web for two reasons
• 1. Monitors vary widely
• 2. Browsers vary widely
• There are three color collections
• 16 colors
• 216 colors
• 16 million different colors

31
Color and Background Properties

• 1. There is a set of 16 colors that are
  guaranteed to be displayable by all graphical
  browsers on all color monitors
• black 000000 green 008000
• silver C0C0C0 lime 00FF00
• gray 808080 olive 808000
• white FFFFFF yellow FFFF00
• maroon 800000 navy 000080
• red FF0000 blue 0000FF
• purple 800080 teal 008080
• fuchia FF00FF aqua 00FFFF

32
Color and Background Properties

• 2. There is a much larger set, the Web Palette
• - 216 colors
• - Use hex color values of 00, 33, 66, 99, CC,
  and FF
• 3. Any one of 16 million different colors

33
Color and Background Properties

• The color property specifies the foreground color
  of elements
• lttable border "5px"gt
• lttrgt
• ltth style "color red"gt Apple lt/thgt
• ltth style "color orange"gt Orange lt/thgt
• ltth style "color orange"gt Screwdriver
  lt/thgt
• lt/trgt
• lt/tablegt
• Example

34
Color and Background Properties

• The background-color property specifies the
  background color of elements
• ltp style "font-size 24 color blue
• background-color red"gt
• To really make it stand out, use a red
• background!
• lt/pgt
• Example

35
Color and Background Properties

• background-image (url(URL))
• background-attachment(scroll/fixed)
• for example
• body
• background-imageurl(background.jpg)
  background-attachmentfixed

36
Text Properties

• line-height
• text-align(left/right/center)
• text-decoration(none/underline/overline)
• text-indent
• Example

Text
37
Box Properties

• Each box has a content area (e.g., text, an
  image, etc.) and optional surrounding padding,
  border, and margin areas the size of each area
  is specified by properties defined below. The
  following diagram shows how these areas relate
  and the terminology used to refer to pieces of
  margin, border, and padding

38
Box Properties

• Margin properties
• 'margin-top', 'margin-right', 'margin-bottom',
  'margin-left', and 'margin
• The 'margin' property is a shorthand property for
  setting 'margin-top', 'margin-right',
  'margin-bottom', and 'margin-left' at the same
  place in the style sheet.

39
Box Properties

• Padding properties
• 'padding-top', 'padding-right', 'padding-bottom',
  'padding-left', and 'padding
• Border properties
• Border width properties
• Border color properties
• Border style properties
• Border shorthand properties (width, style, color)

40
Box Properties

• Example

41
Positioning Properties

• position
• (static/relative/absolute)
• top, left
• width, height
• z-index
• Example

42
Filter Properties

• Filter is an expansion of CSS, it can apply
  certain effects on text, image, or other objects.
• Filter can only be applied to control elements
  body, button, div, img, input, marquee, span,
  table, td, textarea, th
• Use format
• filterfilter-name (parameters)
• Example1, exmaple2

43
Objectives

• Compare CSS formatting with HTML formatting.
• Describe and compare the 3 levels of style
  sheets.
• Apply style classes and pseudo-classes in style
  sheets.
• Apply font, color background, text, box,
  positioning, and filter properties in style
  sheets.

44
Classroom Exercises

• Page 83 Review Questions 1, 2, 9, 22
• Page 84 Exercises 1

45
Thats all for this chapter!