This document is written in XHTML and CSS; while you will be able to read the content acceptably, you need a better browser than the one you are using to see this document properly.
Agenda
The day is split into four blocks, each of 90 minutes.
Each block consists of about 45 minutes lecture, followed by 45 minutes
practical.
The breaks between blocks are 30 minutes, with 90 minutes for lunch.
Steven Pemberton is a researcher at the CWI, The Centre for Mathematics
and Computer Science, a nationally-funded research centre in Amsterdam, The
Netherlands, the first non-military Internet site in Europe.
Steven's research is in interaction, and how the underlying software
architecture can support the user. At the end of the 80's he built a
style-sheet based hypertext system called Views.
Steven has been involved with the World Wide Web since the beginning. He
organised two workshops at the first World Wide Web Conference in 1994,
chaired the first W3C Style Sheets workshop, and the first W3C
Internationalisation workshop. He was a member of the CSS Working Group from
its start, and is a long-time member (now chair) of the HTML Working Group,
and co-chair of the XForms Working Group. He is co-author of (amongst other
things) HTML 4, CSS, XHTML and XForms.
Steven is also Editor-in-Chief of ACM/interactions.
Objectives
HTML has for too long, and incorrectly, been seen as a purely presentation
language. It was originally designed as a structure description language, but
extra elements were added later by browser manufacturers in order to
influence the presentation. This has had the effect of limiting Web site
usability by introducing presentation elements that slow down Web access,
reduce or prevent accessibility to the sight-impaired, limit the sorts of
devices that may be used to view websites, and reduce the end-user's options
when viewing a document.
The World Wide Web Consortium (W3C) started the Style Sheet activity in
1995 in order to get HTML back to its pure form. The result of this was
Cascading Style Sheets (CSS), which allows the separation of content and
presentation in Web sites.
Using style sheets has many benefits, including:
Separation of content and presentation means that Web pages are easier
to write.
Since images are no longer needed to represent styled text, Web pages
download significantly faster.
By separating out the presentation elements, blind and other
sight-impaired users are able to access the Web much more easily,
especially since CSS explicitely supports aural browsers.
By allowing style sheets to specify sizes in relation to other sizes,
rather than as absolute sizes, people with reduced sight can scale pages
up and still see them as they were intended.
By not coding device-dependent presentations in the HTML pages are
viewable on a wider range of devices.
You can now design the look of your site in one place, so that if you
change your house style, you only need to change one file to update your
entire site.
Even if the Web remained based on HTML, these would be enough reasons to
use style sheets. However, the Web is now going in a new direction: XML, and
XML has no inherent presentation semantics at all. To use XML you
have to use a style sheet to make your site visible.
As a part of the movement to XML, a new version of HTML, called XHTML, is
being developed. Since all presentation-oriented elements are being dropped,
style sheets will become essential there too.
So the objectives of this course are to give an advanced introduction to
the use of CSS to style HTML and XML documents, showing in passing how this
can improve usability, and to give an introduction to the use of XML and
XHTML.
Although most attention will be paid to CSS level 1, since this is the version currently most widely implemented, CSS 2 will also be treated, and information about what can be expected in CSS 3 will be given.
These notes have been produced entirely in XHTML and CSS, using different
stylesheets for printing, screen use, and presentation. In particular, there
are only three images used (to demonstrate the use of images): a star, and
two versions of a flower. All other things that look like images are in fact
just styled with CSS.
It should go without saying that to properly appreciate this document, you
have to view it with a browser with good CSS support.
If you can see this text, your browser apparently does not
support CSS.
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.
What is the most important property of a website?
Forrester did research among 8000+ users on why they chose one website
above another equivalent one. Reasons were:
What is the most important property of a website?
Forrester did research among 8000+ users on why they chose one website
above another equivalent one. Reasons were:
Content 75%
What is the most important property of a website?
Forrester did research among 8000+ users on why they chose one website
above another equivalent one. Reasons were:
Content 75%
Usability 66%
What is the most important property of a website?
Forrester did research among 8000+ users on why they chose one website
above another equivalent one. Reasons were:
Content 75%
Usability 66%
Speed 58%
What is the most important property of a website?
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%
What is the most important property of a website?
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
Why is Accessibility Important?
It is the right thing to do
We will all need accessible websites one day
Your most important user is blind: half your hits come from Google; Google only sees what a blind person sees.
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
(ESPN claims that CSS saves them 2 Tbytes per day!)
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, 8 and its Mozilla-based relatives
Opera 3.5, 4, 5, 6, 7, 8
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
Technical stuff
So much for the motivation, now on to the technical part
Using CSS
Normally, you put your CSS descriptions in an external file, and link to
that from your HTML:
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.
About Valid Documents
HTML was designed so that incorrect documents are corrected by the
browser.
However, you can never know exactly how the browser has corrected your
document. This means that you don't know the exact structure of your
underlying document.
Which means that you can't be sure how your CSS will be applied.
Therefore: always ensure you have a valid document.
Since not all browsers accept it, don't use html as a selector, except to remove styling the browser added: 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
'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 (72pt = 1in)
Picas: 2pc (1pc = 12pt)
The only length you may use without any units is 0.
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.
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 }
Does not work for XML
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>
May work for XML, but no guarantee
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 }
Nowis 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; border: thin black solid }
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 gives it a border
all nested li's have a border too.
Level one
Level two
Level three
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:
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>
Examples 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:
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
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.
Example of box model in use
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.
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.
Percentage values refer to width of containing element
Negative margins are allowed!
Margins are transparent, so the enclosing element's background shows
through
auto means 'as calculated by the browser' (see
width).
Example:
p { margin-left: 3em }
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
Property padding works like margin, and has up to 4
values (TRBL)
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:
Sets value for all 4 sides! (But see border-top, border-right,
border-bottom, border-left)
dotteddashedsoliddouble
grooveridgeinsetoutset
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 EndThe
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'
div {margin: 0.5em 1em; padding: 0;
border: thin black solid}
gives:
mmmmm
What we see here is that the inner div, which has width: auto, has expanded to fill the space available.
Example (contd)
Setting respectively inner, middle and outer to width: 9em gives:
mmmmm
Here you see that the margin-right of the inner div is not 1em anymore, but auto. And so with the next two:
mmmmm
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.)
Part 3
Advanced stuff: text properties, background, positioning;
Practical
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
Lorem ipsum dolor sit amet setetur sadipscing
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.
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
scrolling
Fixed 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.
Scroll 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, 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!
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.
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.
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}
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.
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.
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.
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.
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.
Overview of properties, with examples and defaults
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>)
An excellent book on CSS2, is by two of its creators, Håkon Lie and
Bert Bos. It is Cascading Style Sheets: Designing for the Web,
published by Addison-Wesley. The latest edition was written entirely in XHTML and CSS.
a is followed by b is followed by c, in that order.
a | b
either a or b must occur
a || b
either a or b or both must occur, in any order
[a b]
brackets, used for grouping
a?
a is optional
a*
a is repeated 0 or more times
a+
a is repeated 1 or more times
a{1,4}
a is repeated at least once and at most 4 times.
Juxtaposition is stronger than the double bar, and the double bar is
stronger than the bar. Thus "a b | c || d e" is equivalent to "[ a b ] | [ c
|| [ d e]]".
Definitions
Block-level elements
an element which has a line break before and after (e.g. <H1>,
<P>)
Replaced element
An element which is replaced by content pointed to from the element.
E.g., <IMG>.
Properties
In each definition
the default value is shown in bold, or given separately
values apply to all elements unless otherwise stated
properties are inherited unless the property name is marked with a star
"*".
[<percentage> | <length>]{1,2} | [top | center | bottom]
|| [left | center | right] Applies to: block-level and replaced elements Initial: 0% 0% Percentage values: refer to the size of the element itself
<background-color> || <background-image> ||
<background-repeat> || <background-attachment> ||
<background-position> Initial: not defined for shorthand properties Percentage values: allowed on <background-position>
baseline | sub | super | top | text-top | middle |
bottom | text-bottom | <percentage> Applies to: inline elements Percentage values: refer to the 'line-height' of the element
itself
<list-style-type> || <list-style-position> ||
<url> Applies to: elements with 'display' value 'list-item' Initial: not defined for shorthand properties
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, 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.