CSS1 test page

H1 Grouping

Grouped definition of H1, H2: underline, blue.

H2 Inheritance

This emphasis should be rendered in sans-serif.

Contextual selectors

Classes

This should be in red

Link pseudo-classes

A:visited - should be rendered in green
A:link - should be rendered in blue
A:active - when you select this link, link should be rendered in orange

Pseudo element first-line

First line should be underlined. Next line should be normal. We need rather long line to get line break.

Pseudo element first-letter

First letter should be big.

font-size

normal size, 14pt
font-size: small

normal size
font-size: large

normal size
font-size: larger

normal size
font-size: smaller

normal size
font-size: 24pt

normal size
font-size: 0.4in

normal size
font-size: 1.2cm

normal size
font-size: 12mm

normal size
font-size: 200%

normal size, below is 4em
font-size: 4em

normal size, below is 2pc
font-size: 2pc

normal size, below is 10px
font-size: 10px

normal size
font-size: +4

font-family

normal family
font-family: Times, serif
font-family: Helvetica, sans-serif
font-family: Courier, monospace
font-family: fantasy
font-family: cursive

font-weight

normal weight
font-weight: light
font-weight: bold

font-style

normal style
font-style: italic
font-style: small-caps
font-style: oblique
font-style: italic

line-height

normal height
line-height: 200%

line-height: 36pt

line-height: 1cm

color

normal color
color: red
color: #f00
color: rgb(255, 0, 0)
color: rgb(100%, 0, 0)

background

normal background
background: red

background: url(image.gif)

word-spacing

normal spacing
word-spacing: 5mm

letter-spacing

normal spacing
letter-spacing: 2mm

text-decoration

no decoratin
text-decoration: underline
text-decoration: overline
text-decoration: line-through
text-decoration: blink

vertical-align

box vertical-align: baseline

box vertical-align: middle

box vertical-align: sub

box vertical-align: super

box vertical-align: text-top

box vertical-align: text-bottom

box vertical-align: top

box vertical-align: bottom

text-transform

normal text
text-transform: capitalize
text-transform: uppercase
text-transform: lowercase

text-align

normal text
text-align: left
text-align: right
text-align: center
text-align: justify

text-indent

normal text
text-indent: 5mm

margin

normal block
margin: 30pt
border: 10pt
margin: 30pt; padding: 20pt
border: solid black 10pt, margin: 30pt; padding: 20pt
border: groove black 10pt, margin: 30pt; padding: 20pt
border: double black 10pt, margin: 30pt; padding: 20pt
border: ridge black 10pt, margin: 30pt; padding: 20pt
border: inset black 10pt, margin: 30pt; padding: 20pt
border: outset black 10pt, margin: 30pt; padding: 20pt
border: dotted black 10pt, margin: 30pt; padding: 20pt
border: dashed black 10pt, margin: 30pt; padding: 20pt

width

normal block
width: 20pt

float

float: leftfollowing text should wrap around on the right side
float: rightfollowing text should wrap around on the left side

display

normal block
display: block
display: inline
display: list-item
display: none

list-style

  1. list-style: lower-roman
  2. list-style: upper-roman
  3. list-style: lower-alpha
  4. list-style: upper-alpha
  5. list-style: inside
  6. list-style: outside

white-space

<PRE>white-space:                                               normal
white-space: normal

white-space: pre

white-space: nowrap