Advanced CSS

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

Motivation

This course assumes that you already know the basis of CSS

How to apply it to a document
The structure of CSS (Rules, selectors, properties, values)
Basic styling: fonts, colours, margins, borders, padding, text properties, background, and the basics of positioning.

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.

Butterfly

Post

focus

gemination

party

worm

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">
<!DOCTYPE HTML
    PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

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.

Box model

Margin

Border

Padding

Content

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

Margin
	Border
		Padding
			Content	Height



			Width

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

```
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:
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)

An Example

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)

An Example

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

Margin

Border

Padding

Content

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
  }

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.

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.

Borders: width, style and color

Margin

Border

Padding

Content

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

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

Margin

Border

Padding

Content

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:

mmmmm

Example (contd)

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

mmmmm

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.

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.

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

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

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>

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.

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:

This is a div of class = "first col". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

This is a div of class = "col". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

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}

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

A Heading

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.

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

A Heading

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.

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.

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.

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:

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

Advanced CSS

Agenda

About the Instructor

Objectives

Course Plan

Motivation

Warning about old browsers

Legacy and compliant modes

Styling text

font-size

Warning about 'initial values'

Lengths

Warning about font sizes

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

Example of display: none

text-align

Box model

height and width properties

Box model: margin, border, padding

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

Warnings about use of margins

Shortcuts: margin

Use of margins

When vertical margins meet

An Example

An Example

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

Padding

Example of padding

Borders: width, style and color

Shorthand: border-width

border-style

border-color

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

One last border shorthand: border

Warning: border-style

Warning about using shorthands

Usage of borders

height and width

width

Auto values for box model

Example

Example (contd)

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

Technique: Images for headlines

Images for headlines

Pseudo Classes: Anchors

Note on <a>

Pseudo element: first-line, first-letter

font-variant

Float

Use of float

Technique: multi-columns using float

An example of columns

clear

A Heading

A Heading

Pseudo element:
first-line, first-letter