Styling the New Web

Course Plan

Part 1

Introduction, basic CSS: selectors, fonts, colours; Practical

Part 2

Intermediate-level stuff: advanced selectors, inheritance, margins, borders, padding; Practical

Part 3

Advanced stuff: text properties, background, positioning; Practical

Part 4

The Future: XML and XHTML; Practical

HTML and SGML

• HTML (up to now) has been an SGML application.
• SGML is intended to define the structure of documents

  For instance, <H1> </H1> defines a heading without specifying how it should look.

  <UL> <LI>... </UL>

  specifies a list of items.

• These classifications often have semantic significance. <I> and <B> were mistakes, use <EM> and <STRONG> instead

Contamination

• Netscape started to add their own tags, based on the idea that with their market penetration they could get a head start.
• Unfortunately most tags added by Netscape are presentation-oriented tags – which do not fit in the structure orientation of standard HTML – such as <BLINK> and <FONT>
• These do specify how the item should look, and have no inherent semantics; Microsoft also followed suit.

Style Sheets

• In order to get HTML back to being a structure language, W3C hosts work on Style Sheets, and producing a Style Sheet Language CSS – Cascading Style Sheets.
• Aims:
  • easy to write
  • easy to implement
  • has a development path.
• CSS is a 90% solution
• For all typesetting possibilities XSL is being developed

CSS

• CSS is a language that allows you to specify how a document, or set of documents, should look.
• Advantages:
  • Separates content from presentation
  • Makes HTML a structure language again
  • Makes HTML easier to write (and read)
  • All HTML styles (and more) are possible
  • You can define a house style in one file
  • Accessible for the sight-impaired
  • You can still see the page on non-CSS browsers
• CSS is also an enabling technology for XML

Motivation

Csszengarden.com is a website with essentially one HTML page.

And hundreds of beautiful, breathtaking CSS stylesheets applied to that one page.

Is uses very simple HTML: div, h1, h2, h3, span, p, ul/li, a, acronym

As you look at each presented page, you have to keep repeating to yourself: this is the same HTML page.

Separating Content and Presentation: Author Advantages

• Easier to write your documents
• Easier to change your documents
• Easy to change the look of your documents
• Access to professional designs
• Your documents are smaller
• Visible on more devices
• Visible to more people

Separating Content and Presentation: Webmaster Advantages

• Separation of concerns
• Simpler HTML, less training
• Cheaper to produce, easier to manage
• Easy to change house style
• Documents are smaller: less bandwidth
• Reach more people
• Search engines find your stuff easier
• Visible on more devices

Separating Content and Presentation: Reader Advantages

• Faster download (one of the top 4 reasons for liking a site)
• Easier to find information
• You can actually read the information if you are sight-impaired
• Information more accessible
• You can use more devices

Separating Content and Presentation: Implementor Advantages

• Improves the implementation (separation of concerns)
• Can produce smaller browsers

Levels

• CSS has been designed with upwards and downwards compatibility in mind.
  • CSS1: basic formatting, fonts, colours, layout; quick and easy to implement
  • CSS2: more advanced formatting; aural style sheets
  • CSS3: printing, multi-column, ...
• In general a valid CSS1 style sheet is also a valid CSS2 style sheet.
• In general a CSS2 style sheet can be read and used by a CSS1-supporting browser.

Check your log files!

• More than 95% of surfers now use a CSS1-compatible browser:
  • Microsoft IE 3, 4, 5, 6
  • Netscape 4, 6, 7 and its Mozilla-based relatives
  • Opera 3.5, 4, 5, 6, 7
• While the quality of the support for CSS on these browsers varies, though is continually improving, you never need to use the <FONT> tag again!
• Today we'll be largely talking about CSS1, since it is widely implemented

Why is Usability Important for Websites?

Forrester did research among 8000+ users on why they chose one website above another equivalent one. Reasons were:

• Content 75%
• Usability 66%
• Speed 58%
• Freshness 54%

All other reasons were 14% or lower.

CSS can't help you with Content or Freshness, but it can with the other two!

Why is CSS good for usability?

• Presentation is not hard-wired in the HTML
• Users can make their own choices (font size, colours, etc), and override the documents
• Pages load faster
• Pages become more accessible for the sight-impaired (who can use speech browsers)
• Pages are viewable on a wider range of platform types

Using CSS

Normally, you put your CSS descriptions in an external file, and link to that from your HTML:

<html>
<head>
<link rel="stylesheet"
      type="text/css"
      href="your-filename.css">
</head>
<body> ...</body>
</html>

Inline style is also possible

You can also put your style sheets in the head of your HTML document:

<head>
<style type="text/css">
           h1 { color: blue }
</style>
</head>

For many reasons, it is better to use external style sheets

Style sheets for XML

For XML use a processing instruction:

    <?xml-stylesheet type="text/css"
       href="your-filename.css"?>

Put before first element of the document

HTML Style Attributes

HTML also allows you to use a STYLE attribute:

<P STYLE="color: red">Stop!</P>

This is bad practice, and undoes many of the advantages of CSS.

Doesn't (necessarily) work for XML.

Warning about HTML: <p>

• <P> is not the same as <BR>!
• Don't do this:

  <H1>The Title</H1>
  This is the first paragraph<P>
  And this is the second

• But this:

  <H1>The Title</H1>
  <P>This is the first paragraph</P>
  <P>And this is the second</P>

• Your CSS will work better, and new versions of HTML require it anyway.

Warning about old browsers

CSS implementations are now quite good, but older browsers had a variety of mistakes. Unfortunately, some browser manufacturers want to offer backwards compatibility with those buggy old browsers. So they have two modes: compliant mode, and legacy mode.

To decide which mode to use they look at the document.

Legacy and compliant modes

• For XML it is always in compliant mode
• For HTML it is compliant mode if you include a DOCTYPE at the top of the document, for instance:

  <!DOCTYPE HTML
      PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
      "http://www.w3.org/TR/html4/loose.dtd">

So if you want your CSS to work right, always include a DOCTYPE at the head of your document.

Structure of CSS1

• CSS has rules consisting of selectors and blocks;
• Blocks are a series of declarations between curly brackets, separated by semicolons:

  H1 { font-family: helvetica, sans-serif;
       font-weight: bold }

• Declarations consist of a property followed by a value
  (declarations may also be empty):

      font-size: 10pt

Comments

• Comments are expressed between /* and */
• Example:

  /* This is a comment */

Basic Selectors

• Basic selectors are just element names
  • H1
  • BODY
  • P

• Several rules can be joined together using the comma:
  • H1, H2, H3, H4, H5, H6 { font-family: helvetica, sans-serif}
• Don't use html as a selector: use body instead

Warning about HTML: case

• HTML is case-insensitive. You can write

  <H1>Title</H1>
  or
  <h1>Title</h1>

• Therefore, you can write selectors either as

  H1 {font-weight: bold}
  or
  h1 {font-weight: bold}

• Newer versions of HTML are case sensitive, so specify your selectors in lower case

Examples

• h1, h2, h3 { font-family: helvetica, sans-serif }
• body { color: white; background-color: black }
• p { text-align: justify }

All matching rules apply

You can have as many rules as you like for a selector. All rules that apply to an element get applied. Clashing declarations are resolved by giving priority to more specific selectors, and later rules.

So

h1 {font-weight: bold}
h1 {font-size: 200%}

is equivalent to

h1 {font-weight: bold; font-size: 200%}

Styling text

There are a number of properties for affecting the style of text:

• font-size, font-weight, font-style, font-family, and font-variant
• line-height, vertical-align, word-spacing, letter-spacing
• text-align, text-decoration, text-transform, text-indent

font-size

• You can use absolute or relative sizes. Relative sizes are in relation to the parent element (e.g. <body>)
• Example: h1 {font-size: 200%}
• Example absolute sizes:

  10pt, small, medium, large,
  x-small, xx-small, x-large, xx-large

• Example relative sizes:

  larger, smaller, 120%, 1.2em

• Initial value is medium

Warning about 'initial values'

• Most CSS properties have 'initial values'
• 'Initial value' means 'if no other value has been assigned'
• For HTML (but not XML) most values have been assigned by the browser already
• Example: 'font-size' has an initial value of 'medium', but the browser will likely have set a larger value for <h1>

Lengths

Relative:

• Ems: 4em
• X height: 1ex
• Percentages: 120%

Absolute:

• Pixels: 12px
• Inches: 0.5in
• Cm: 2.5cm, Mm: 25mm
• Points: 10pt
• Picas: 2pc (1pc = 12pt)

Warning about font sizes

Don't use pixels for font sizes, because you don't know the resolution of the screen that anyone is using.

For instance, font-size: 12px will give you

• 12 point on a 72dpi screen
• 9 point on a 96dpi screen
• 6.9 point on a 125dpi screen

Similarly, avoid using point sizes as well:

• Many machines are not properly set up (the operating system doesn't know the screen resolution)
• Many people can't see text below a certain size, and so increase the base font-size

Respect these people: try to use relative font sizes. Use font-size: 100% for paragraph text, font-size: 120% or so for headings, font-size: 80% for copyright statements, etc.

font-weight

• Values: normal, bold, bolder, lighter, 100, 200, ..., 900
• normal = 400
• bold = 700
• Initial is normal
• Example: h1, h2, h3 {font-weight: bold}

font-style

• Values: normal, italic, oblique
• Initial: normal
• If you specify italic, but the font only has an oblique, you get that (but not vice versa)
• Example: em {font-style: italic}

font-family

• Values: a list of font names, followed by a generic font
• Generic fonts are: serif, sans-serif, monospace, cursive, fantasy:
  Serif, sans-serif, monospace, cursive, fantasy
• Each font in the list is tried in turn until one is found
• Example:

  h1, h2, h3 {font-family: arial, helvetica,
               sans-serif}

• Initial value depends on browser

You should always end with a generic family

Colours: color and background-color

• The foreground colour (text, borders, etc) is given with the color property
• The background colour is given with the background-color property
• Values are 16 colour names: black, white, gray, silver, red, maroon, yellow, olive, green, lime, blue, navy, purple, aqua, fuchsia, teal,
  or #F00, #FF0000, rgb(255, 0, 0), rgb(100%, 0, 0)
• Example:

  body {color: black; background-color: white}

Practical 1

Make a stylesheet that gives <em> elements a yellow background colour, and makes <strong> elements be white text on a black background.

Class Selectors

• If an element has a class attribute, you can select on it
• In the CSS:

  p.important { color: red }

• In the HTML:

  <p class="important">Do not phone 
     before 09:00!</p>

• or all "important" elements regardless of type:

  .important { color: red }

Use of HTML: span

• Use the <span> element as a carrier of class information:
  Do <span class="important">not</span> cross
• If you want such text to be styled in some way on non-CSS browsers as well, use <strong> or <em> instead:
  Do <em class="important">not</em> cross
  Do <strong class="important">not</strong> cross
• An element can have several classes:
  <p class="note important"> ...

Advice: use class names that describe the purpose, not the presentation. For instance, use class="important", not class="red".

ID Selectors

• You can select any element with a particular ID tag with #:

  #dateline { .... }
  
  <p id="dateline">Monday 12th May ...

• or a particular type of element with an ID:

  h2#index { .... }
  
  <h2 id="index">Index</h2>

Use an ID selector to document that there can only be one in the document, while there can be any number of elements using the same class.

Contextual Selectors

These allow you to address the nesting of the document:

h1 { font-weight: bold }
em { font-style: italic }

<h1><em>Now</em> is the time!</h1>

Now is the time

h1 em { font-weight: normal }

Now is the time

Examples of contextual selectors

• em { font-style: italic }
• em em { font-style: normal }
  Nested em's revert to normal font
• ul li { font-size: medium; color: red }
• ul ul li { font-size: small }
• ul ul ul li {font-size: x-small }
  Nested unordered lists use smaller fonts
• More specific selectors take precedence (more later), but all selectors apply. So since the first ul li rule sets the colour to red, all nested li's are red too.

Inheritance

• Note that in the following the <em> element is also blue. It is inherited by the <em> element.

  h1 { color: blue }
  <h1><em>Now</em> is the time</h1>

  Now is the time
• Many properties are inherited, but some are not, such as borders:

  Now is the time

  If the border-style were inherited by the <em>, you would get:

  Now is the time

Use of HTML: div

• Like <span> for inline text, use <div> to carry class or ID information for larger blocks:

  <div class="chapter">
  <h2>Chapter 2</h2>
  <p>It was dark. ... </p>
  
  ...
  
  </div>
  
  div.chapter h2 {font-family: pembo, cursive}

display

• Some elements (like <em>, <span>) are inline. Others (like <p>, <h1>) are blocks. The display property specifies this for the presentation
• Values: block, inline, list-item, none
• block: says that the element represents a block
• inline: that the element represents inline text
• list-item: that the element is a list item (<li> in HTML) (more properties later)
• none: the element is not displayed at all.
• Initial value: not important for HTML; different for CSS1 and CSS2, so never assume a default!

Example of display: none

In the CSS:

.notcss {display: none}

In the HTML:

<p class="notcss">
        Your browser doesn't support CSS
</p>

Example of display: none

You can use display: none with different stylesheets, to make different parts of the document visible. E.g. one stylesheet can show deletions with the text struck through:

del { text-decoration: line-through }

another can make the deletions not visible:

del { display: none }

NB with:

body {display: none}
h1 {display: block}

the h1's are still invisible, since the whole body is invisible

text-align

• Values: justify, left, right, center
• Applies to blocks (i.e. elements with display: block or list-item)
• Initial: not defined

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.

Box model

• All elements have this box model.
• The margin's colour is transparent
• The border's colour is by default the same as the text of the content, but can be set separately
• The padding has the same colour as the background colour of the content

height and width properties

• The 'height' and 'width' properties of an element affect the height and width of the 'content' part
• So if you set width to 4em, padding to 3em, border to 2em, and margin to 1em, the whole box will be (4 + 2×3 + 2×2 + 2×1) = 16em wide. (But see note later on 'auto' values).

Note major bug in early versions of IE, where width affected the whole box. This still shows up in modern IE if you forget the DOCTYPE.

Box model: margin, border, padding

• All three are changeable:

  h1 { margin: 2pt;
       border-width: 4pt;
       border-style: dotted;
       padding: 3pt}

• Also per part:

  h1 { border-top: 4pt solid red}

  also -left, -right and -bottom

Margins: margin-top, -right, -bottom, -left

• Examples of values: 0, auto, 2em, 3pt, 1%, ...
• Initial: 0
• Margins are in relation to enclosing element
• Percentage values refer to width of containing element
• Example: p { margin-left: 3em }
• Negative margins are allowed!
• Margins are transparent, so the enclosing element's background shows through
• auto means 'as calculated by the browser' (see width).

Warnings about use of margins

1. body {margin-left: 4em}
   h1 {margin-left: -4em}

   <h1> typically has a larger font-size to <body>, therefore the '-4em' on h1 is larger than the 4em on <body>

2. body {margin-left: 4em}
   h1 {margin-left: 0}

   h1 will have the same indent as the body (margins are relative to the parent element, not the screen)

Shortcuts: margin

• There are a number of shortcuts for some properties. For margins you can set all 4 sides at once:

  margin: 1em (sets all 4 to 1em)
  margin: 0 1em 0 2em

• The four values go clockwise and set top right bottom left respectively (TRBL: mnemonics treble, tribal, terrible, true-blue)
• Missing values are obtained from the opposite side: "margin: 0 1em" is the same as "margin: 0 1em 0 1em"

Use of margins

• Use margins for indenting:

  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.

  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.

  Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

• exdenting (using negative margins):

  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.

  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.

  Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

• adding space between paragraphs
• etc.

When vertical margins meet

When two margins meet vertically, only the larger is used (so the gap between a heading and the following paragraph is the larger of the heading's margin-bottom and the paragraph's margin-top)

Padding: padding-top, -right, -bottom, -left

• These properties are similar to margins
• Examples of values: 0, 2em, 3pt, 1%, ...
• Initial: 0
• Percentages refer to parent element's width

Padding

• Negative values are not allowed
• Padding takes the colour of the element's background
• Example: padding-top: 1em
• Property padding works like margin, and has up to 4 values (TRBL):

  padding: 1em 0em 2em 1em

Example of padding

blockquote
  { margin: 2em;
    background-color: yellow;
    padding: 2em
  }

Borders: width, style and color

Borders can have a width, style and color. For widths:

• Properties: border-top-width, -bottom-width, -right-width, -left-width
• Example values: thin, medium, thick, 1pt, 1em, ...
• Initial: medium (but see border-style)
• Example: border-left-width: 1pt

Shorthand: border-width

• Property border-width can have up to 4 values, just like margin and padding (TRBL)
• Example: border-width: 1pt 2pt
  • So top, bottom=1pt,
  • right, left= 2pt

border-style

• Property: border-style
• Values: none, dotted, dashed, solid, double, groove, ridge, inset, outset
• Initial: none
• Sets value for all 4 sides! (But see border-top, border-right, border-bottom, border-left)
  

dotted dashed solid double groove ridge inset outset

border-color

• Property: border-color
• Values: one to four colours (see color property)
• Initial: whatever value the color property has for this element
• Four values work like margin (etc): TRBL
• Example:

  border-color: red white blue

  (left side is thus also white)

Shorthands: border-top, -right, -bottom, -left

• Values: width style colour
• Example:

   p.note {border-left: medium solid black}

• Initial: as individual properties
• Values may be in any order (border-top: thin red 1pt)
• Any of the three values may be left out (but see warning later):

  border-top: thin blue

One last border shorthand: border

• Property: border
• Values: width style color
• Values may be in any order, and any may be omitted (but see warning)
• Sets all 4 sides
• Example

  p.warning {border: solid thick red}

Warning: border-style

If you set border-width, or border-color, and forget to set border-style, since the default is 'border-style: none' you will see no border!

Always set border-style if you want a border.

Warning about using shorthands

• Border and border-top (etc) also set the colour, so with:

  blockquote {color: black;
              border: red medium solid;
              border-left: dotted }

  even though the colour isn't mentioned in the border-left property, it is there! And its value is the value of color: therefore the left border will be black.

Better to be explicit.

Usage of borders

A border will often be too close to the text: use padding to set it off from the text:

The End The End

height and width

The height and width of elements is normally determined by context or by the element itself.

For instance, for text, the width is determined by the width of the window, and the height by the amount of text.

Images have an inbuilt size.

You can change these defaults with the height and width properties.

• Property: height
• Values: auto, 100px, 15em, ... (no percentages)
• Initial: auto

width

• Property: width
• Values: auto, 100px, 15em, 50%, ...
• Initial: auto
• Percentages: refer to parent's width
• auto: calculated size, or intrinsic width for images.
• Example, to create a page of thumbnails:

  img { width: 25% }

  height is auto so will also scale to preserve aspect ratio

Auto values for box model

• Normally 'width' is 'auto'
• If no value is 'auto', margin-right will be set to 'auto'

Example

<div class="outer">
   <div class="middle">
      <div class="inner">mmmmm</div>
   </div>
</div>

with

div {margin: 0.5em 1em;
     border: thin black solid}

gives:

Example (contd)

Setting respectively inner, middle and outer to width: 9em gives:

Practical 2

Make a stylesheet that indents all text except headings.

Make a stylesheet that hides all text except headings. Indent headings according to their importance (don't indent <h1>; indent <h2> a little; <h3> a little more, etc.)

Text properties: line-height

• The line-height is the distance between the base of one line, and the base of the next.
• Example values: normal, 1.2, 120%, 1.2em, 12pt, ...
• Initial: normal (browser specific)
• Better to use relative values
• If font-size is 10pt, then a line-height specified as 1.2, 120% or 1.2em would result in a line-height of 12pt. The extra space is equally spread above and below the line. (This paragraph has line-height: 100%, so should look a bit compressed)

Warning about line-height

• There is a difference in inheritance: a number (e.g. 1.2) is inherited by the children, but in the case of other factors (120%, 12em), the resulting value (e.g. 12pt) is inherited. If the child has a different font-size, but no specified line-height, it may look wrong. If in doubt, use numbers.

body {font-size: 10pt; line-height: 1.2}
h1 {font-size: 20pt}

h1 has a line-height of 20pt x 1.2 = 24pt

body {font-size: 10pt; line-height: 1.2em}
h1 {font-size: 20pt}

h1 inherits the same line-height as body, which is 10pt x 1.2em = 12pt

text-decoration

• Values: none, or any combination of: underline, overline, line-through, blink
• Initial: none
• Not all browsers implement blink.
• Example:

  a {text-decoration: underline}

  underline, overline, line-through, mixture

text-indent

• This specifies the indentation of the first line of a block of text
• Example values: 0, 4em, 1%, ...
• Initial: 0
• Use negative values for exdenting a line.

word-spacing, letter-spacing

• These are used tostretch a number of wordsor compress a number of words by adding extra spacing between letters or words
• Values: normal, 1px, 0.1em, ...
• Not widely implemented

vertical-align

• For effects like subscript and superscript
• Values: baseline, sub, super, top, text-top, middle, bottom, text-bottom
  Values: <percentage> (of line height; this is 100%)
• Initial: baseline
• Only trust baseline, sub, and super at present
• Example:

  sub {vertical-align: sub}

Background properties: background-image

• Example values: none, url(back.gif)
• See background-repeat, background-position and background-attachment for details of how it is displayed
• Works on any element, not just <body>!

background-position

• Specifies where background image is to be placed, or where repeating is to start from
• Example values: 0% 0%, top left, center, any reasonable mixture of top, bottom, center, left, right, ...
• Initial: 0% 0% (=top left)
• This example is bottom right

background-repeat

• Specifies how background image is to be displayed
• Values: repeat, no-repeat, repeat-x, repeat-y
• no-repeat: just once at start position
• repeat-x: repeat horizontally both sides of the start position
• repeat-y: repeat vertically above and below start position
• repeat: repeat in all directions (tile the element)
• Initial: repeat

background-attachment

• Specifies if the background scrolls with the page, or stays put
• Values: scroll, fixed
• Initial: scroll

• Use for instance to put a logo or water-mark that remains visible when the page is scrolled

Technique: Images for headlines

All too often Websites use images for major headings. This causes some problems:

• Google doesn't see the text, nor know it's a heading
• Other software doesn't know it's a heading
• Causes problems with accessible software
• Doesn't scale on the screen
• Doesn't work with browsers that don't handle images.

However, there is a technique that gives you the best of both worlds: put the text in the HTML and override it with an image in the CSS

Images for headlines

In the HTML, use a heading, with the text in a span:

<h1><span>Images for headlines</span></h1>

In the CSS, turn off the span:

h1 span {display: none}

and add a background image to the h1:

h1 { background-image: url(text.gif); 
     background-repeat: no-repeat;
     background-position: 50% 50%
     height: 80px; width: 80px;  }

Pseudo Classes: Anchors

a:link { color: blue }
a:visited { color: #f0f }
a:active { color: red }
a:link img { border-style: solid;
             border-color: blue }

• CSS2, but useful: when the mouse is over an element:

a:hover {background-color: yellow}

Note on <a>

a {color: green}
a:link {color: blue}

This will colour <a name="..."> elements green, and
<a href="..."> elements blue.

Beware!

p {color: red}
a:link {color: blue}

<p><a href="...">Click here</a></p>

"Click here" will be blue.

Pseudo element:
first-line, first-letter

• Note there are also selectors to select the first line
  and first letter of the formatted output:

p:first-line {font-variant: small-caps;
              color: blue}
p:first-letter {font-size: 200%;
                color: red}

• Not widely implemented

font-variant

• Values: normal, small-caps
• Uses a small-caps variant of the font
• Initial: normal

Float

• Move elements relative to the parent
• Values: none, left, right
• Example. Logo always on the side of the window:

  img.logo {float: right}
  img.logo {float: left}

• Initial: none

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, no sea takimata sanctus est Lorem ipsum dolor sit amet. *** Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, no sea takimata sanctus est Lorem ipsum dolor sit amet. *** Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.

Use of float

• Float works on any type of element, even text blocks!
• It can replace the use of tables for some layout

p.menu {float: left;
        background-color: yellow;
...

<p class="menu">Menu items ...</p>
<p>Text ...</p>

Technique: multi-columns using float

div.col {
    width: 31%;
    text-align: justify;
    padding-left: 1%;
    padding-right: 1%;
    border-left: solid 1px black;
    margin: 1em 0;
    float: left;
}
div.col.first {border-style: none}

An example of columns

Here is an example of columns using CSS:

And then back to single column format after the divs.

clear

• Allows an element to refuse floating elements one side or another
• Values: none, left, right, both
• Initial: none
• Example: h2 {clear: left}

Use of clear

Both of the images are at the start of the paragraph (in the source). The flower is first, then the star; the left example has img {float: left} and the right has img {float: left; clear: left}:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

text-transform

• Values: none, uppercase, lowercase, capitalize
• Example: h1, h2, h3 {text-transform: uppercase}
• Initial: none
• Examples: none, uppercase, lowercase, Capitalize

font

• This is a shorthand for font-style, font-variant, font-weight, font-size, line-height, font-family
• Example:

  p.abstract
    {font: medium italic 10pt/12pt
         times, serif }

white-space

• Values: normal, pre, nowrap
• pre: use for <pre> like elements
• nowrap: text doesn't get wrapped

Remember: there is nothing inherent in the <pre> element that causes it to retain layout and output in a monospaced font: it is the styling that does that. You can change it.

list-style-type

• Values: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none
• Applies to elements with display: list-item
• Example:

  ul li {list-style-type: disc}
  ul ul li {list-style-type: circle}
  ol li {list-style-type: decimal}

list-style-type: examples

This is a single <ul> with different list-style-types applied to each <li>:

• disc
• circle
• square
• none
• decimal
• upper-roman
• lower-roman
• upper-alpha
• lower-alpha

list-style-image

• Example values: none, url(star.gif)
• Allows you to define your own sort of bullets
• Example:

  ul.special {
         list-style-image: url(ball.gif)}

list-style-position

• Values: inside, outside
• Default: outside
• Defines whether the bullet goes inside or outside the text box. As you may be able to see, this line has a value for list-style-position of 'outside'.
• And if you compare this bulleted item with the one above, you should be able to see that it has a value for list-style-position of 'inside'.

list-style

This is a shorthand

• Values: type style <url> position
• Example:

  ul.special {
          list-style: url(ball.gif) inside}

Cascading

• A browser has an implicit default style sheet
• The user may have a preferences style sheet
• Browser default → Reader preferences → Document
• You can combine several style sheets (= cascading)

  @import url(house.css);
  body { font-size: 30pt }

• You can override with !important:

  body {color: black !important;
        background-color: white !important}

Selectivity of selectors

• !important wins
• browser → user → document
• id > class > no of tags in contextual selector
• pseudo-element = normal element,
  pseudo-class = normal class
• Last specified wins if otherwise equal
• CSS rules win over HTML attributes (like bgcolor, align)

Optional Stylesheets

<link rel="stylesheet"
      type="text/css" href="main.css">
<link rel="alternate stylesheet" title="Big"
      type="text/css" href="alt.css">
<link rel="stylesheet" media="print"
      type="text/css" href="print.css">

Media: all, screen, print, projection, handheld, tv, tty, aural, braille, embossed.

Also:

<style type="text/css" media="print">
      ...
</style>

Practical 3

Here is a document styled with HTML and images.

Do some of the obvious parts with CSS (as much as you have time for).

Implementation

Already available in:

• Microsoft IE 3, 4, 5, 6
• Netscape 4, 6, 7
• Opera 3, 4, 5, 6, 7
• X-Smiles
• NetClue
• OmniWeb
• Mozilla, Galeon, Firebird, K-Meleon, Chimera, ...
• Konqueror
• Safari

Implementation

• Escape
• Icab
• Millions of mobile phones
• Arachne
• Emacs-w3
• Amaya
• Athena
• Closure
• HP ChaiFarer
• ICE

Level Compatibility

• All CSS1 rules are acceptable to CSS2 processors
• If a CSS1 browser comes across a CSS2 selector, it ignores the whole rule
• If a CSS1 processor comes across a CSS2 property or value, it ignores only the declaration.

Ignore rule:
*[width] {font-size: 10pt; color: blue}

Ignore declaration:
p {overflow: hidden; color: blue}

Ignore declaration:
h2 {display: run-in; color: blue}

CSS2 and 3

Later areas of work include:

• Speech
• Layout
• Fuller control
• Printing
• ...

Selectors

More selectors, such as:

• *: any element
• E > F: selects any element F that is a child of E
• E:first-child: selects any E that is the first child of its parent (To select the first child of an element E use "E > :first-child")
• E + F: any F that directly follows an E
• E[att]: any E that has attribute att
• E[att="value"]: where att has exactly the value
• E[att~="value"]: where one of the words of att is the value

Features

• Embedded media rules: all, screen, print, projection, handheld, tv, tty, aural, braille, embossed

  @media print { body {font-size: 10pt} }
  @media screen { body {font-size: 12pt} }
  @media projection { body {font-size: 20pt} }
  h1 {font-size: 2em}

• inherit as value for all properties
• Control of tables
• Page layout
• Bi-directional text
• Web fonts
• Aural style sheets: h1 { voice-family: male; pitch: low }

More features

• Generated content, and control over counters
• Text shadows
• Borders and padding properties fixed up; outlines
• display: new values
• Absolute and relative positioning of elements; z-index for overlapping
• Overflow control and clipping
• Font stretching and adjusting
• System colours, more units, more to font, list-style-types
• + details

Overflow

Values: visible, hidden, scroll, auto, inherit
Default: visible

• Visible: show even if it doesn't fit
• Hidden: hide what doesn't fit
• Scroll: use scroll bars regardless
• Auto: use scrollbars if needed

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.

Position

Values: static, relative, absolute, fixed, inherit
Default: static

• Static: not positioned
• Relative: positioned relative to current position (like sub/superscripting)
• Absolute: positioned absolutely in the document (relative to closest enclosing absolutely positioned box, or otherwise the whole document)
• Fixed: positioned absolutely on the screen

Uses properties:

• top, bottom, left, right: the offset of the positioned box from the position is is being positioned against.

Technique – a fixed list of links

See example. HTML:

<div class="nav">
   <h2>Links</h2>
   <p>
      <a href="...">Home</a>
      <a href="...">Away</a>
      ...
   </p>
</div>

And then in the CSS:

.nav { position: fixed;
       top: 0; right: 0;
       width: 6em;
       ...}
.nav a {display: block}

CSS3

• Printing
• Multicolumn
• Headers and footers
• More media queries
• ...

Where?

The definition of CSS1 can be found at:

The definition of CSS2 is at

CSS resources can be found at www.w3.org/style/css

Future Markup

• HTML was designed for just one sort of document (scientific reports), but is now being used for all sorts of different documents
• You could use SGML to define other sorts of document, but SGML is notoriously hard to fully implement

XML

• XML is a W3C effort to simplify SGML
• It is a meta-language, a subset of SGML
• One of the aims is to allow everyone to invent their own tags
• DTD is optional: a DTD can be inferred from a document

Consequences

• The requirement of being able to infer a DTD from a document has an effect on the languages you can define:
• Closing tags are now required
  <LI>....</LI> <P>....</P>
• Empty tags are marked specially
  <IMG SRC="pic.gif"/> <BR/> <HR/> (or <HR></HR> etc)

Consequences 2

• CDATA sections must be marked as such (if they contain "<", "&" etc.):

  <SCRIPT>
  <![CDATA[
                  ... script content ...
  ]]>
  </SCRIPT>

Consequence of XML

• Anyone can now design a (Web-delivered) language
• CSS makes it viewable

  <address>
  <name>Steven Pemberton</name>
  <company>CWI</company>
  <street>Kruislaan 413</street>
  <postcode>1098 SJ</postcode>
  <city>Amsterdam</city>
  <speaker/>
  </address>

So do we still need HTML?

• XML is still a meta-language
• There is still a perceived need for a base-line mark-up
• HTML has some useful semantics, both implied and explicit (search engines gladly use it, for instance)

HTML as XML application

• Clean up (get rid of historical flotsam)
• Modularise – split into separate parts
• Allows other XML applications to use parts
• Allows special purpose devices to use subset
• Add any required new functionality (forms, better event handling, Ruby)

Differences HTML:XHTML

• Because of the difference between SGML and XML, there are some necessary differences, for instance:
• Use lower case: <p> not <P>
• Attributes are always quoted:
  <th colspan="2">
• Anchors use id attribute not name (and not just on <a> by the way):
  <a id="index"> <p id="top">

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Virtual Library</title></head>
<body>
<p>Moved to <a href="http://vlib.org/">vlib.org</a>.
</p>
</body>
</html>

Namespaces

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>A Math Example</title></head>
<body>
<p>The following is MathML markup:</p>
<math xmlns="http://www.w3.org/TR/REC-MathML">
<apply><log/><logbase><cn> 3 </cn> </logbase>
<ci> x </ci>
</apply>
</math>
</body></html>

Transition

• XHTML 1.0 has been carefully designed to make use of 'quirks' in existing HTML browsers
• Use of a small number of guidelines allows XHTML to be served to HTML browsers

Examples of Guidelines

• Use space before / of empty elements:

  <br /> <hr /> <img src="foo.gif" />

• Use name= and id= on <a>:

  <a name="index" id="index"> ... </a>

Versions of XHTML

There are now several versions of XHTML in use:

• XHTML 1.0: 'Legacy-compatible' version.
• XHTML 1.1: Cleaned up version of XHTML 1.0 Strict
• XHTML Basic: For small devices. Now in many WAP 2 phones.

There are also versions for TVs and printers in preparation, as well as XHTML 2.0, with many new features.

Result

• XML with related technologies gives you the freedom to define and deliver your own document types
• HTML is still needed as a base-line markup
• The new HTML gives a transition path to the future
• Since there is no built-in presentation semantics any more, CSS is essential

Reminder: Using style sheets with XML

For XML use a processing instruction:

    <?xml-stylesheet type="text/css"
       href="your-filename.css"?>

Put before first element of the document

Practical 4: RSS

An RSS document is an XML document that contains elements like this:

<item rdf:about="http://www.w3.org/News/2004#item155">
  <title>W3C Celebrates Ten Years Leading the Web</title>
  <description>This year, W3C celebrates its tenth anniversary. ...
  </description>
  <link>http://www.w3.org/News/2004#item155</link>
  <dc:date>2004-10-07</dc:date>
</item>

Write a stylesheet to make such a document readable.