Overview
Lecture 14 CSS
Motivation for CSS
Style – CSS & DHTML Linking CSS
Basic features
Classes
Boriana Koleva Examples
bnk@cs.nott.ac.uk DHTML
C54 Overview
Examples
Management of Web Style Stylesheets for HTML
Consider the management of a corporate web site Cascading Stylesheets (CSS) is a language for
Site identity (look & feel - e.g. corporate image) must be defining stylesheets that was developed for HTML
maintained W3C recommendation, and now very widely used
Changes in site identity must be implemented across the
entire site CSS defines appearance of a document – e.g.:
Fonts & appearance of text
A mixture of content and appearance in a data set is Colours
difficult to maintain Layout (e.g. margins, indentation, positioning etc.)
Behaviour (to an extremely limited extent)
Stylesheet concept from DTP
HTML necessarily mixes style and content, but Example
stylesheets help the separation (Alice in Wonderland document with different stylesheets)
Linking CSS Basic Features of CSS
CSS may be embedded into HTML using CSS structure
tag or stored in a separate file plain text with rules
One CSS file can control the appearance of any selector and declaration
number of HTML documents
Changing a CSS file will change the appearance of all H1 {text-indent: 10pt }
documents that use this file
CSS files are attached to HTML using the tag Value
in the Selector Declaration
Property
1
Modifying the appearance of a tag Inheritance
HTML documents structured hierarchically
default style
BODY { background-color: darkgreen; Cascading
color: yellow;
font-family: "Times New Roman", Inherited style can be overridden:
"Times",
"serif”; BODY {font-size: 10pt}
}
BODY {font-size: 10pt}
Example
H1 {font-size: 14pt}
Modifying the appearance of multiple
elements Defining Classes with CSS
BODY { background-color: darkgreen;
color: yellow; .bigred { color: darkred;
font-family: "Times New Roman", "Times“, "serif”; font-size: 24pt;
} font-weight: bold; }
H1 { font-family: "Arial", "Helvetica", "helv", "sans-serif";
text-decoration: underline; ...
}
Example
Example
Another Example of Classes and
The and tags are commonly
used as containers for classes (i.e. as
BODY { background-color: lightyellow; customisable HTML tags)
font-family: "Times New Roman", "Arial", "Verdana";
font-size: 13pt;
font-weight: bold; } Defines a subdivision of the document
P.red { color: red; } Behaves similarly to the (paragraph tag)
... Defines an area of the document
This is a red paragraph Example Does nothing (on its own)
Example
2
Pseudo-classes Problems with CSS
Some HTML tags have pre-defined Browser implementation
Major differences between rendering of CSS in old browsers
“pseudoclasses” that can modify their Minor differences even today
behaviour Not implemented in some browsers (e.g. old browsers or
text-mode browsers)
For example OS / Hardware Dependencies
link : modifies the appearance of the link Fonts
visited: modifies the appearance of the link after it It is bad practice to be completely dependent upon
CSS
has been followed Graceful degradation is usually feasible
Multi-platform testing is essential
Example
Dynamic HTML (DHTML) Examples used in this lecture
Extensions to HTML to allow elements to be CSS examples by Tim Brailsford
controlled by program code
Implementation usually involves CSS style elements Available at:
being manipulated by JavaScript
http://www.cs.nott.ac.uk/~tjb/idb/css
Netscape and Microsoft developed DHTML
independently. (note: DHTML examples are out of date)
Old browsers (IE pre version 5, and Netscape pre version
4.5) are completely incompatible Updated DHTML examples
New browsers have improved, but there are still some
differences http://www.crg.cs.nott.ac.uk/~bnk/Teaching/IDB
DHTML is often created by authoring systems /DHTML.html
(e.g. Dreamweaver)
Examples
3