Styling the New Web

Web Usability with Style Sheets

Steven Pemberton

Plan for the day

Introduction, basic CSS: selectors, fonts, colours; Practical
Break
Intermediate-level stuff: advanced selectors, inheritance, margins, borders, padding; Practical
Lunch
Advanced stuff: text properties, background, positioning; Practical
Break
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

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
Netscape 4, 6
Opera 3.5, 4, 5
While the quality of the support for CSS on these browsers is varied, you never need to use the <FONT> tag again!
Today we'll be largely talking about CSS1, since it is widely implemented

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

Why is CSS good for the author?

Documents become easier to write (and read)
Presentation is centralised
Easier to provide a house style
Wider range of presentation possibilities
Separation of concerns

Using CSS

External file:

<html>
<head>
<link rel="stylesheet"
      type="text/css"
      href="style.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>

The comment symbols  are optional: they hide the style sheet from old browsers.

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="sheet.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 future versions of HTML will require it anyway.

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}

Future versions of HTML will be case sensitive, so get used to specifying your selectors in lower case

Examples

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

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

Use relative sizes, or the named absolute sizes

Warning about 'initial values'

'Initial value' means 'if no other value has been assigned'
For HTML 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%
- Pixels: 12px (A pixel is not a hardware unit)
Absolute:
- Inches: 0.5in
- Cm: 2.5cm
- Mm: 25mm
- Points: 10pt
- Picas: 2pc (1pc = 12pt)

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 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

On your machine, you will find a file called practical1.html. View it with the browser, to see what the defaults look like.
Create a CSS file called practical1.css, and edit the HTML file to use it.
Make the following changes to the presentation:
<em> elements should have a yellow background
Headings should be in a sans-serif font
Look at the results.
Now make the presentation white text on blue.
What colours are aqua, fuchsia and teal?

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

ID Selectors

You can select an element with an ID tag with #:
```
#p001 { .... }

<p id="p001">Now is ...
```

or a particular type of element with an ID:

h1#p023 { .... }

<h1 id="p023">The Next Big Thing</h1>

Used rarely; class is more useful

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 }
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)

Inheritance

Note that in
```
h1 { color: blue }
<h1><em>Now</em> is the time</h1>
```
Þ Now is the time
that the <em> element is also blue. It is inherited by the <em> element.
Many properties are inherited, but some are not:
```
h1 { border-style: solid }
```
Þ
Now is the time

If this were inherited by the <em>, you would get (effect exaggerated here):

Þ

Now is the time

Use of HTML: <div>

Like <span> for inline text, use <div> to carry class 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:
```
.hidden {display: none}
```

In the HTML:

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

NB with:
```
body {display: none}
p {display: block}
```
The p'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

Box model

Content

All elements have this box model.

All three are changeable:

h1 { 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 enclosing element's background shows through
auto means 'as calculated by the browser' (see width).

Warnings about use of margins

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>

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
- exdenting (using negative margins)
- adding space between paragraphs
- etc.
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
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

Blockquote

{margin: 1em;
	background-color: yellow;
   padding: 1em
}

Borders: border-top-width etc.

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)

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}
```

Beware when 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

Use borders for:
Setting off text with a line each side
Enclosing text in a box
Putting a line under a paragraph
Marking changed paragraphs with a line
A border will almost always be too close to the text: use padding to set it off from the text

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'

Practical 2

Use the file practical2.html; create and link to practical2.css
Indent all text except for headings by some amount
Limit the width of the page to some length
(note: bug in IE 5)
Make the headings white on blue, and right align them
Make a stylesheet where only the headings are visible, and indented according to their depth (h1, h2, etc)

Text properties: line-height

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 12em would result in a line-height of 12pt. The extra space is equally spread above and below the line.

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. 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 has a line-height of 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 to stretch or compress text by adding extra spacing between letters or words
Values: normal, 1%, 1px, ...
Not widely implemented

vertical-align

For effects like subscript and superscript
Values: baseline, sub, super, top, text-top, middle, bottom, text-bottom, <percentage> (of line height)
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)

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

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 {color: red}

Note on <a>

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

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

Beware!

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

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

"Click here" will be blue.

Pseudo element:
first-line, first-letter

There are also selectors to select the first line and first letter of the formatted output:

p:first-line {font-variant: small-caps}
p:first-letter {color: red}

Not widely implemented

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
Margins are honoured

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;
margin-left: ...

clear

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

Use of clear

img {float: right} img {float: right; clear: right}

font-variant

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

text-transform

Values: none, uppercase, lowercase, capitalise
Example: h1, h2, h3 {text-transform: uppercase}
Initial: none

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

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-image

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

Example:

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

list-style-position

Values: inside, outside
Default: outside
Defines where the bullet goes. As you can see,
this line has list-style-position: outside
And if you look at this bulleted item,
you will see that it has list-style-position: inside

list-style

This is a shorthand

Values: type style <url> position

Example:

ul.special li {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)

Practical 3

Take a look at practical3.html, and fm.html
Create a style sheet to make practical3.html look like fm.3
Hints:
Use <span> where necessary in the HTML
Use negative margins where necessary
Use class="..." where necessary
Resize the window to make sure it still works at different sizes.

Implementation

Already available in:
Microsoft IE 3, 4, 5
Netscape 4, (and Mozilla in the Future)
Opera (fits on a floppy!)
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}

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

CSS2

Aural style sheets:

h1 { voice-family: male; pitch: low; speech-rate: slow}

inherit as value for all properties

Media types

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

Control of tables
Page layout
Bi-directional text
Web fonts

(CSS2)

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

CSS3

Printing
Multicolumn
Headers and footers
...

Where?

The definition of CSS1 can be found at:

http://www.w3.org/TR/REC-CSS1

The definition of CSS2 is at

http://www.w3.org/TR/REC-CSS2/

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">

<head><title>Virtual Library</title></head>

<body>

<p>Moved to <a href="http://vlib.org/">vlib.org</a>. </p>

</body>

</html>

Namespaces

<head><title>A Math Example</title></head>

<body>

<p>The following is MathML markup:</p>

</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>

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

Practical 4

File practical4.xml is an xhtml 1.0 document. Take a look.

As you can see, XML has no pre-defined presentation.

Add a link to a style-sheet file from the document. (See page 7 for how to do this for XML)

Start off with an empty CSS file; how does the xhtml document look now?

Now start defining CSS rules for XHTML elements so that the document begins to look reasonable.

Overview of properties, with examples and defaults

font-:
family (Futura, serif, sans-serif, cursive, fantasy, monospace)
style (normal, italic, oblique)
variant (normal, small-caps)
weight (normal, bold, bolder, lighter, 100, ..., 400, ..., 900)
size (10pt, 120%, small, medium, large, smaller, larger, ...)

color (red, ..., #f00, #ff0000, rgb(255,0,0), rgb(100%, 0, 0), ...)
background-:
color (transparent, red, black, white, gray, silver, red, maroon, yellow, olive, green, lime, blue, navy, purple, aqua, fuschia, teal, ...)
image (none, url(back.gif))
repeat (repeat, no-repeat, repeat-x, repeat-y)
attachment (scroll, fixed)
position (0% 0%, top left, center, center left, bottom right, ...)

Overview...

line-height (normal, 120%, ...)
word-spacing, letter-spacing (normal, 1%, 1px, ...)
vertical-align (baseline, sub, super, 10%, top, text-top, middle, ...)
text-*:
decoration (none, underline, overline, line-through, blink)
transform (none, uppercase, lowercase, capitalise)
align (justify, left, right, center)
indent (0, 4em, ...)
display (block, inline, list-item, none)
white-space (normal, pre, nowrap)
list-style*:
type (disc,circle,square,decimal,none,lower-roman,lower-alpha, ... )
image (url(sphere.gif), none)
position (inside, outside)
list-style (type position <url>)

Overview of box properties

margin-*: top, right, bottom, left (0, auto, 2em, 3pt, 1%, ...)
padding-*: top, right, bottom, left (0, 2em, 3pt, 1%, ...)
border-*:
width⁴ (thin, medium, thick, 2pt, ...)
style (none, dotted, dashed, solid, double, ...)
color⁴ (...)
top, right, bottom, left (width style colour)
top-width, bottom-width, right-width, left-width (medium, ...)
margin⁴(top right bottom left)
padding⁴ (top right bottom left)
border (width style color)
height, width (auto, 100px, 15em, 50%, ...)
float (none, left, right)
clear (none, left, right, both)

Styling the New Web

Plan for the day

HTML and SGML

Contamination

Style Sheets

CSS

Levels

Check your log files!

Why is CSS good for usability?

Why is CSS good for the author?

Using CSS

Inline style is also possible

Style sheets for XML

HTML Style Attributes

Warning about HTML: <p>

Structure of CSS1

Comments

Basic Selectors

Warning about HTML: case

Examples

Styling text

font-size

Warning about 'initial values'

Lengths

font-weight

font-style

font-family

Colours: color and background-color

Practical 1

Class Selectors

Use of HTML: span

ID Selectors

Contextual Selectors

Examples of contextual selectors

Inheritance

Use of HTML: <div>

display

Example of display: none

text-align

Box model

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

Warnings about use of margins

Shortcuts: margin

Use of margins

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

Example

Borders: border-top-width etc.

Shorthand: border-width

border-style

border-color

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

One last border shorthand: border

Beware when using shorthands!

Usage of borders

Height and width

width

Auto values for box model

Practical 2

Text properties: line-height

Warning about line-height

text-decoration

text-indent

word-spacing, letter-spacing

vertical-align

Background properties: background-image

background-position

background-repeat

background-attachment

Pseudo Classes: Anchors

Note on <a>

Pseudo element: first-line, first-letter

Float

Use of float

clear

Use of clear

font-variant

text-transform

font

white-space

list-style-type

Pseudo element:
first-line, first-letter