Technologies for an Information Age: 'opennet Cascading Style Sheets

1
Technologies for an Information Age .opennet
Cascading Style Sheets

• Fall Semester 2001 MW 500 pm - 620 pm CENTRAL
  (not Indiana) Time
• Bryan Carpenter and Geoffrey Fox
• PTLIU Laboratory for Community Grids

Computer Science, Informatics, Physics Indiana
University Bloomington IN 47404 gcf_at_indiana.edu
2
Cascading Style Sheets

• In a following lecture we will be discussing the
  Extensible Style Language, XSL.
• XSL incorporates a general framework for
  converting an XML file to another format, in
  particular one suitable for displaying in a Web
  browser.
• Cascading Style Sheets (CSS) is an older
  specification that provides an alternative,
  simpler, approach to displaying XML in a browser.
• CSS is less general than XSL.
• It was designed as a way to control the display
  of HTML documents, but it can also be used with
  other SGML-based languages, including XML.

3
Basic Concepts

• The structure of a CSS style sheet is very much
  simpler than an XSLT style sheetit is just a
  plain list of rules.
• A rule consists of a selectortypically a tag
  name, perhaps with some qualifiersand a list of
  declarations that apply to elements matching the
  selector.
• A declaration is just a property-value pair.
• For example the declaration color blue sets the
  text color to blue in the selected elements.
• Style sheets cascade in the sense that if more
  than one style sheet is in effect for a document
  (this is regarded as the normal situation),
  declarations from some sheets may cascade through
  declarations in other sheets, conditional on some
  conflict resolution rules.
• This can be thought of as a kind of inheritance.

4
Example

• Here is an XML source file that uses a CSS style
  sheet
• lt?xml-stylesheet type"text/css"
  href"emptable.css" version"1.0"?gt
• ltEMPLOYEEgt
• ltPERSONgt
• ltEMPNOgt100lt/EMPNOgt
• ltENAMEgtJAMES lt/ENAMEgt
• ltJOBgtPRESIDENTlt/JOBgt
• lt/PERSONgt
• ltPERSONgt
• ltEMPNOgt201lt/EMPNOgt
• ltENAMEgtKELLY lt/ENAMEgt
• ltJOBgtCLERKlt/JOBgt
• lt/PERSONgt
• . . .
• lt/EMPLOYEEgt

5
Style Sheet emptable.css with Display

• PERSON display block
• EMPNO color red
• ENAME color blue font-weight bold
• JOB color green font-style italic

6
Remarks

• The example style sheet has four rules.
• The selectors are just element names.
• The declaration display block causes the PERSON
  element to be treated as a blockit starts and
  ends with a new line.
• By default the other elements are inline.
• The declarations for these elements specify
  color, font-weight, and font-style properties for
  the enclosed text, in an obvious way.

7
CSS1 vs CSS2

• W3C distinguishes two separate specifications
  CSS level 1 and CSS level 2.
• Level 1 is a subset of Level 2.
• Level 2 adds media-specific style sheets that can
  support different kinds of display technology
• Visual browsers, Aural devices, Handheld devices,
  etc.
• Level 2 also adds interesting features like
  content positioning, table layout, and so on.
• CSS1 specification is about 70 pages long. CSS2
  is 300 pages long.
• Neither specification is fully supported by any
  browser, but Netscape 6 probably comes closest.

8
Basics

• An example rule taken from the CSS1
  specification
• H1 color blue
• This rule contains a selector H1 and a single
  declaration color blue.
• The declaration sets the property color to the
  value blue.
• CSS1 defines about 50 properties.
• The selector links the style sheet rules to
  elements in the source file. Any element name is
  a valid selector.
• In this example we are specifying properties for
  level 1 headers.
• Any user agent (i.e. Web browser) is considered
  to have a default style sheet.
• Properties need only be specified for elements
  where the author wishes to override the default
  values.

9
Linking HTML to Style Sheet Rules

• In XML, one uses the xml-stylesheet processing
  instruction to specify a style sheet for a
  document.
• In plain HTML there are several approaches. Here
  is an example taken from the CSS1 specification
• ltHTMLgt
• ltHEADgt
• ltTITLEgttitlelt/TITLEgt
• ltLINK RELSTYLESHEET
  TYPEtext/css
• HREFhttp//style.com/c
  ool TITLECoolgt
• ltSTYLE TYPEtext/cssgt
• _at_import url(http//style.com/bas
  ic)
• H1 color blue
• lt/STYLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtHeadline is bluelt/H1gt
• ltP STYLEcolorgreengtWhile the
  paragraph is green.lt/Pgt
• lt/BODYgt
• lt/HTMLgt

10
Remarks

• link element with STLYSHEET relation to main
  document.
• style element in HTML head element gives style
  declarations for whole document. In particular
  you may include a style file here.
• Note however that style.com is the actually the
  online home of Vogue, and doesnt have cool or
  basic CSS documents ?
• style attribute on individual element of document.

11
Grouping

• To give identical declarations for a group of
  selectors, a rule may start with a
  comma-separated group of selectors
• H1, H2, H3 font-family helvetica
  
• This sets the same font for headers at all
  levels.
• Several declarations applying to the same
  selector can be grouped, separated by semicolons
• H1 font-weight bold
• font-size 12pt font-height 14pt
  font-family helvetica
• Certain properties group together, e.g. there is
  a font property whose value is a fixed-order list
  of font-related properties
• H1 font bold 12pt/14pt helvetica
• by definition, equivalent to the preceding
  example.

12
Inheritance

• Suppose the style rule
• H1 color blue
• is in effect.
• In this example
• ltH1gtThe headline ltEMgtislt/EMgt importantlt/H1gt
• the EM element inherits the color attribute
  from its parent element, although no color
  declaration has been given for EM.
• Many properties may be inherited in this way.
• Thus one can set a default property for the whole
  document by giving a rule for the BODY element.

13
Contextual Selectors

• If we specifically want EM elements inside H1
  elements to turn a different color, we can use a
  contextual selector
• H1 EM color red
• The juxtaposed list of selectors H1 EM means
  this declaration applies only to EM elements
  immediately nested inside H1 elements.
• Behaves something like an Xpath selection, as we
  will see in later lecture on XLST.
• Although not immediately relevant to XML, here is
  a useful style sheet using contextual selectors
• OL LI list-style upper-roman
• OL LI LI list-style
  upper-alpha
• OL LI LI LI list-style
  decimal

14
HTML lists with contextual selectors
15
Pseudo-elements

• In CSS1 there are two kinds of pseudo elements
  first-line and first-letter.
• These keywords can be attached to selectors as
  qualifiers, separated by a colon.
• Example
• Pfirst-line font-variant small-caps
• Pfirst-letter color red

16
Classes

• Selectors in CSS style sheets can also be based
  on the value of an attribute called CLASS.
• For this to work, the elements in the source
  document must be annotated with this attribute.
• In the CSS rule, the class is attached as a
  qualifier to the (otherwise possibly empty)
  selector, separated by period.
• H1.PASTORAL color green
• .RED color red
• The rules might be exploited as follows
• lth1 CLASS"PASTORAL"gt6th Symphonylt/h1gt
• ltpgt First movement.
• ltp CLASS"RED"gt Second movement.
• ltpgt Other movements.

17
Miscellaneous Properties

• The display property controls, in particular,
  whether an element is displayed as a standalone
  block, or as an inline element in the ordinary
  flow of text.
• There are may properties that control text style
  and layout. These properties include
• float Describes how text should flow around an
  element.
• font-family The font face
• font-size
• font-weight
• line-height
• text-align Can be left, right, center, justify
• text-decoration Can be underline, etc.
• vertical-align Supports subscripts, superscripts,
  etc.

18
Miscellaneous Properties

• Setting colors and backgrounds
• color
• background-color
• background-image A URL
• background-attachment Does background scroll?
• Margins and alignments
• line-height Sets any value
• margin-right, margin-left, . . .
• text-indent Of first line of block elements.
• Borders
• border-style May be dotted, dashed, solid, etc.

19
References

• Inside XML, Chapter 9 Cascading Style Sheets.
• Cascading Style Sheets, level 1,
• http//www.w3.org/TR/REC-CSS1
• Cascading Style Sheets, level 2,
• http//www.w3.org/TR/REC-CSS2