- What is XHTML?
- CSS (Cascading Style Sheets)
- References: Specification is http://www.w3.org/TR/REC-CSS2/ (or locally),
w3schools notes,
CSS tutorial, http://www.w3schools.com
- What are stylesheets for?
Allows fine tuning of document appearance vs HTML which specifies document
organization and appearance (HTML does neither very well).
- What is cascading about them? You can apply styles to
- Single element (style attribute of an element)
CSC309 Programming on the Web
- Whole document (specified in the HEAD tag) (see a calendar with and without css)
- Collection of documents (specify the URL of an External stylesheet).
See cssStyle.css and associated web page
example.html.
Single element (style attribute) overrides Whole Document (head tag) overrides External style.
- Inheritance: Some aspects of your style are inherited from your containing element.
- Rules look like
selector { property:value; property:value; }
A Stylesheet typically contains many rules.
- Selector: determines which elements to apply the style to
- Syntax for various operations...
e { property:value; property:value; } /* apply to elements with name e */
.c { property:value; property:value; } /* apply to elements which have class=c */
e.c { property:value; property:value; } /* apply to elements named e which have class=c */
#i { property:value; property:value; } /* apply to elements which have id=i */
e#i { property:value; property:value; } /* apply to elements named e with id=i */
below, s1, s2 and s3 can be any of the above selector types
s1 s2 { property:value; property:value; } /* apply to s2 descendents of s1 */
s1>s2 { property:value; property:value; } /* apply to s2 children of s1 */
s1, s2, s3 { property:value; property:value; } /* apply to s1 and s2 and s3 */
- class vs id: use class selector to apply the same style to many elements, use
id selector to apply a style to a specific (single!) element.
- span vs div: span is in-line content, div denotes a separate block.
- Properties: define aspects of an elements display
- A list of all properties can be found here (or locally).
- CSS approach: specify a collection of property:value; pairs to define the appearance of a particular element.
- Properties fall into the following categories:
fonts, colors and backgrounds, text, boxes and layouts, lists, tags
- Values: Depends on the property, some typical value types follow
- Sizes can be
[ xx-small | x-small | small | medium | large | x-large | xx-large ]
[ larger | smaller ]
percentage
px: pixels, relative to the viewing device
in: inches
cm: centimeters
mm: millimeters
pt: point
pc: 12 points
em: the 'font-size' of the relevant font (height of a character box)
ex: the 'x-height' of the relevant font (height of the letter x)
- Fonts
- font-family: Verdana, "Comic Sans MS", sans-serif, Trebuchet;
- Generic font names: serif, sans-serif, cursive, fantasy, monospace.
- font-size: small;
- Box Model: each element has a box surrounding it with tunable attributes...
- Position
- position: static; /* where the element would normally be */
- position: relative; /* top, bottom, left, right relative to default position also used to set a frame of reference. */
- position: absolute; /* top, bottom, left, right relative to current frame of reference */
- position: fixed; /* top, bottom, left, right relative to the browser window */
- Can apply CSS to any XML document (including XHTML). So why not just use CSS with XML instead of XHTML?
Answer: XHTML gives you a collection of elements with default appearance. It is easier to build
on this default rather than start from scratch. Tables and lists are a good example.