CSS 2.1 Reference Examples

The 'CSS Reference Examples' is a listing of CSS2.1 properties and their values along with practical examples.

This work is not intended to be exhaustive or encyclopaedic, there are other works that are far superior in that respect from sources such as W3C and W3C Schools.

The aim of this document is much more modest, which is to provide a convenient, quickish, one page reference.

Please note that as this is the first draft of the 'CSS Reference Examples', it is very much work in progress. There will probably be errors of fact, spelling and grammar, these should hopefully be reduced to a minimum as this document is developed.

This page contains CSS generated content that maybe rendered incorrectly or not at all by non compliant browsers and some speech assisted readers.

The CSS Reference Examples is divided into the following parts;

The format of a CSS rule

selector{
	property: value;
}

The 'selector' part of the CSS declaration can represent a HTML element such as a header 'h1', a pseudo class such as 'a:hover' or a wild card '*'.

The 'property: value;' part of the CSS rule is known as the CSS declaration.

Some examples of CSS rules

The following illustrates some of the more common ways of applying CSS rules.

HTML element

Setting the font size of the header h1.

h1{
	font-size: 130%;
}

Div id

Setting the width of content div in a HTML page.

#content{
	width: 20em;
}

Class

Setting the parameters for a class in a HTML page.

.a_box{
	float: left;
	height: 12em;
	margin: 1% 2% 0 0;
}

Pseudo classes

Setting the parameters for hyper-links in a HTML page.

a:link{
	color: rgb(0,28,112);
	text-decoration: underline;
}

Grouping multiple selectors

Grouping selectors that share the same declarations.

h1,h2,h3,h4,h5,h6{
	color: rgb(100,100,120);
}

Long form CSS rule declaration

Each selector property specified as a separate property-value pair.

.box_with_a_border{
	border-style: solid;
	border-width: 1px;
	border-color: rgb(100,100,120);
}

Short form CSS rule declaration

All property-value pairs declared in a single statement. This method gives much more compact style sheets.

.box_with_a_border{
	border: solid 1px rgb(100,100,120);
}

Return to the menu

CSS Box Model

The CSS Box Model illustrates the relationship of content, padding, border and margins.

The space occupied by the CSS box is made up of the content's width and height and it's padding, which extends to the inner edge of the content's border.

The border width is added to the content and padding. The margin extends from the outer edge of the border completing the total sum of the CSS box's dimensions.

An example of the CSS box model is illustrated below;

Margin

Border

Padding

Content

Return to the menu

Full CSS property table - based on the W3C Full property table

About the Full CSS Property Table

The CSS Reference Table lists the properties that are available in CSS2.1. Links to examples of the properties in shorthand format are provided for visual CSS and some examples of syntax for paged CSS are also given.

Currently, there is little built in support from browsers for aural CSS.

Table of CSS2.1 properties and their value options
Property NameValuesInitial ValueApplies to
(Default: all elements)
Inherited?Percentages
(Default: N/A)
Media Groups
'azimuth' <angle> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit center   yes   aural
'background-attachment' scroll | fixed | inherit scroll   no   visual
'background-color' <color> | transparent | inherit transparent   no   visual
'background-image' <uri> | none | inherit none   no   visual
'background-position' [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] |[ [ left | center | right ] || [ top | center | bottom ] ] | inherit 0% 0%   no refer to the size of the box itself visual
'background-repeat' repeat | repeat-x | repeat-y | no-repeat | inherit repeat   no   visual
'background' ['background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'] | inherit see individual properties   no allowed on 'background-position' visual
'border-collapse' collapse | separate | inherit separate 'table' and 'inline-table' elements yes   visual
'border-color' [ <color> | transparent ]{1,4} | inherit see individual properties   no   visual
'border-spacing' <length> <length>? | inherit 0 'table' and 'inline-table' elements  yes   visual
'border-style' <border-style>{1,4} | inherit see individual properties   no   visual
'border-top' 'border-right' 'border-bottom' 'border-left' [ <border-width> || <border-style> || 'border-top-color' ] | inherit see individual properties   no   visual
'border-top-color''border-right-color' 'border-bottom-color' 'border-left-color' <color> | transparent | inherit the value of the 'color' property   no   visual
'border-top-style' 'border-right-style' 'border-bottom-style' 'border-left-style' <border-style> | inherit none   no   visual
'border-top-width' 'border-right-width' 'border-bottom-width' 'border-left-width' <border-width> | inherit medium   no   visual
'border-width' <border-width>{1,4} | inherit see individual properties   no   visual
'border' [ <border-width> || <border-style> || 'border-top-color' ] | inherit see individual properties   no   visual
'bottom' <length> | <percentage> | auto | inherit auto positioned elements no refer to height of containing block visual
'caption-side' top | bottom | inherit top 'table-caption' elements yes   visual
'clear' none | left | right | both | inherit none block-level elements no   visual
'clip' <shape> | auto | inherit auto absolutely positioned elements no   visual
'color' <color> | inherit depends on user agent   yes   visual
'content' normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit normal :before and :after pseudo-elements no   all
'counter-increment' [ <identifier> <integer>? ]+ | none | inherit none   no   all
'counter-reset' [ <identifier> <integer>? ]+ | none | inherit none   no   all
'cue-after' <uri> | none | inherit none   no   aural
'cue-before' <uri> | none | inherit none   no   aural
'cue' [ 'cue-before' || 'cue-after' ] | inherit see individual properties   no   aural
'cursor' [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit auto   yes   visual, interactive
'direction' ltr | rtl | inherit ltr all elements, but see prose yes   visual
'display' inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit inline   no   all
'elevation' <angle> | below | level | above | higher | lower | inherit level   yes   aural
'empty-cells' show | hide | inherit show 'table-cell' elements yes   visual
'float' left | right | none | inherit none all no   visual
'font-family' [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit depends on user agent   yes   visual
'font-size' <absolute-size> | <relative-size> | <length> | <percentage> | inherit medium   yes refer to parent element's font size visual
'font-style' normal | italic | oblique | inherit normal   yes   visual
'font-variant' normal | small-caps | inherit normal   yes   visual
'font-weight' normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit normal   yes   visual
'font' [ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit see individual properties   yes see individual properties visual
'height' <length> | <percentage> | auto | inherit auto all elements but non-replaced inline elements, table columns, and column groups no see prose visual
'left' <length> | <percentage> | auto | inherit auto positioned elements no refer to width of containing block visual
'letter-spacing' normal | <length> | inherit normal   yes   visual
'line-height' normal | <number> | <length> | <percentage> | inherit normal   yes refer to the font size of the element itself visual
'list-style-image' <uri> | none | inherit none elements with 'display: list-item' yes   visual
'list-style-position' inside | outside | inherit outside elements with 'display: list-item' yes   visual
'list-style-type' disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit disc elements with 'display: list-item' yes   visual
'list-style' [ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit see individual properties elements with 'display: list-item' yes   visual
'margin-right' 'margin-left' <margin-width> | inherit 0 all elements except elements with table display types other than table-caption, table and inline-table no refer to width of containing block visual
'margin-top' 'margin-bottom' <margin-width> | inherit 0 all elements except elements with table display types other than table-caption, table and inline-table no refer to width of containing block visual
'margin' <margin-width>{1,4} | inherit see individual properties all elements except elements with table display types other than table-caption, table and inline-table no refer to width of containing block visual
'max-height' <length> | <percentage> | none | inherit none all elements but non-replaced inline elements, table columns, and column groups no see prose visual
'max-width' <length> | <percentage> | none | inherit none all elements but non-replaced inline elements, table rows, and row groups no refer to width of containing block visual
'min-height' <length> | <percentage> | inherit 0 all elements but non-replaced inline elements, table columns, and column groups no see prose visual
'min-width' <length> | <percentage> | inherit 0 all elements but non-replaced inline elements, table rows, and row groups no refer to width of containing block visual
'orphans' <integer> | inherit 2 block-level elements yes   visual, paged
'outline-color' <color> | invert | inherit invert   no   visual, interactive
'outline-style' <border-style> | inherit none   no   visual, interactive
'outline-width' <border-width> | inherit medium   no   visual, interactive
'outline' [ 'outline-color' || 'outline-style' || 'outline-width' ] | inherit see individual properties   no   visual, interactive
'overflow' visible | hidden | scroll | auto | inherit visible non-replaced block-level elements, table cells, and inline-block elements no   visual
'padding-top' 'padding-right' 'padding-bottom' 'padding-left' <padding-width> | inherit 0 all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column no refer to width of containing block visual
'padding' <padding-width>{1,4} | inherit see individual properties all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column no refer to width of containing block visual
'page-break-after' auto | always | avoid | left | right | inherit auto block-level elements no   visual, paged
'page-break-before' auto | always | avoid | left | right | inherit auto block-level elements no   visual, paged
'page-break-inside' avoid | auto | inherit auto block-level elements yes   visual, paged
'pause-after' <time> | <percentage> | inherit 0   no see prose aural
'pause-before' <time> | <percentage> | inherit 0   no see prose aural
'pause' [ [<time> | <percentage>]{1,2} ] | inherit see individual properties   no see descriptions of 'pause-before' and 'pause-after' aural
'pitch-range' <number> | inherit 50   yes   aural
'pitch' <frequency> | x-low | low | medium | high | x-high | inherit medium   yes   aural
'play-during' <uri> [ mix || repeat ]? | auto | none | inherit auto   no   aural
'position' static | relative | absolute | fixed | inherit static   no   visual
'quotes' [<string> <string>]+ | none | inherit depends on user agent   yes   visual
'richness' <number> | inherit 50   yes   aural
'right' <length> | <percentage> | auto | inherit auto positioned elements no refer to width of containing block visual
'speak-header' once | always | inherit once elements that have table header information yes   aural
'speak-numeral' digits | continuous | inherit continuous   yes   aural
'speak-punctuation' code | none | inherit none   yes   aural
'speak' normal | none | spell-out | inherit normal   yes   aural
'speech-rate' <number> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit medium   yes   aural
'stress' <number> | inherit 50   yes   aural
'table-layout' auto | fixed | inherit auto 'table' and 'inline-table' elements no   visual
'text-align' left | right | center | justify | inherit a nameless value that acts as 'left' if 'direction' is 'ltr', 'right' if 'direction' is 'rtl' block-level elements, table cells and inline blocks yes   visual
'text-decoration' none | [ underline || overline || line-through || blink ] | inherit none   no (see prose)   visual
'text-indent' <length> | <percentage> | inherit 0 block-level elements, table cells and inline blocks yes refer to width of containing block visual
'text-transform' capitalize | uppercase | lowercase | none | inherit none   yes   visual
'top' <length> | <percentage> | auto | inherit auto positioned elements no refer to height of containing block visual
'unicode-bidi' normal | embed | bidi-override | inherit normal all elements, but see prose no   visual
'vertical-align' baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit baseline inline-level and 'table-cell' elements no refer to the 'line-height' of the element itself visual
'visibility' visible | hidden | collapse | inherit visible   yes   visual
'voice-family' [[<specific-voice> | <generic-voice> ],]* [ <specific-voice> | <generic-voice> ] | inherit depends on user agent   yes   aural
'volume' <number> | <percentage> | silent | x-soft | soft | medium | loud | x-loud | inherit medium   yes refer to inherited value aural
'white-space' normal | pre | nowrap | pre-wrap | pre-line | inherit normal   yes   visual
'widows' <integer> | inherit 2 block-level elements yes   visual, paged
'width' <length> | <percentage> | auto | inherit auto all elements but non-replaced inline elements, table rows, and row groups no refer to width of containing block visual
'word-spacing' normal | <length> | inherit normal   yes   visual
'z-index' auto | <integer> | inherit auto positioned elements no   visual

CSS examples

The following examples use the 'short form' method of CSS rule declaration where appropriate in order to aid clarity.

Background

The 'background' property sets the background effects of an element.

background: rgb(100,120,180) url("street.png") no-repeat scroll 50% 50%;

In the example above the CSS declaration sets the background-color and background-image. The background-image is set to not repeat. The background-attachment scroll is the default and can be ommited. Positioning is 50% from the left and 50% from the top.

Return to the 'background' property summary

Border

In the CSS box model, the border width is added to the element's content and padding dimensions.

border: 1px dotted rgb(180,180,180);

The above declaration sets the width, style and border colour of the following example.

border example

Return to the 'border' property summary

Bottom, top, right, left

The 'bottom' property, as with the 'top', 'right' and 'left' properties, sets the position of 'absolute' and 'relative' positioned elements.

position: relative;
bottom: 3em;

The above example will position the element 3em above the bottom of the containing element.

Return to the 'bottom' property summary

Clear

Applies to floated elements, but not preceding or following none floated elements.

clear: both;

clear: none

This box snuggles up!

clear: both

Return to the 'clear' property summary

Clip

The clip property allows an element such as an image to be clipped and so determine which part is visible.

Please note that this property applies to absolute positioned elements and that the only valid shape is 'rect'.

position: absolute;
clip: rect(10px, 80px, 150px, 10px);
A street scene

Hint: Set the initial values for top and left to 0 and the right and bottom values to maximum dimensions of the element.

Return to the 'clip' property summary

Color

The 'color' property is used to set the foreground color of an element.

In the following example, the 'color' property sets the colour of the text.

color: rgb(200,100,50);

This text is not black, neither is it white.

Return to the 'color' property summary

counter-increment, counter-reset

The counter-increment property allows the formatting of sections of content and their related sub-content as demonstrated by the following example.

The CSS:

.counter-increment_example h4{
	counter-increment: section;
	counter-reset: sub-section;
}
.counter-increment_example h4:before{
	content: "Section " counter(section) " ";
}
.counter-increment_example p{
	counter-increment: sub-section;
}

.counter-increment_example p:before {
	content: counter(section) "." counter(sub-section) " ";
}

The HTML:

<div class="counter-increment_example">
	<h4>Header</h4>
		<p>blurb</p>
		<p>blurb</p>
	<h4>Header</h4>
		<p>blurb</p>
	<h4>Header</h4>
		<p>blurb</p>
		<p>blurb</p>
		<p>blurb</p>
</div>

The resulting output:

Header

blurb

blurb

Header

blurb

Header

blurb

blurb

blurb

Return to the 'counter-increment' property summary

cursor

The cursor property changes the cursor shape as it passes or hovers over the target element.

cursor: crosshair;

Hover over the following text to see the cursor shape change;

Crosshair cursor Help cursor nw-resize cursor

The HTML: <span class="crosshair">Crosshair cursor</span>

Return to the 'cursor' property summary

direction

The direction property by default accommodates languages that are left to right, such as the European languages.

The following example shows use of the direction property to display Arabic text;

direction: rtl;

نص اليمين إلى اليسار.

It may be a better option to use the HTML attribute 'dir', eg, <p dir="rtl">نص اليمين إلى اليسار</p> to aid browsers without CSS support.

Return to the 'direction' property summary

display

The display property can be used to set a different display mode, for example the list element can be made to be displayed inline instead of in block format.

display: inline;

This example displays a list in an inline format.

  • Item One
  • Item Two
  • Item Three

Return to the 'display' property summary

float

The float property allows the floated element to move out of the document flow, following content will normally attempt to flow around the floated element.

float: left;

Left Floated Box

Right Floated Box

Following and/or preceding elements may need the 'clear:both;' property specified to prevent them nestling against the floated elements.

Return to the 'float' property summary

font

The font property allows the setting of several aspects of a font's visual presentation.

font: normal small-caps bold 80%/1.8 "lucida sans unicode", "bitstream vera sans",arial,sans-serif;

The above CSS declaration sets the font-style (the default value of normal can be omitted), font-variant, font-weight, font-size/line-height and font-family for the example below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur erat lectus, luctus quis porta vehicula, convallis quis nulla. Suspendisse quis lacus nunc, sed auctor tortor. Donec tempor aliquet dapibus.

Return to the 'font' property summary

height

This property set the height of an element.

height: 2em;

This box is 2em high.

This box is 3em high.

Return to the 'height' property summary

left

Please see the 'bottom' property for details

Return to the 'left' property summary

letter-spacing

As the name suggests, this property governs the amount of space between the letters of a word.

letter-spacing: 5px;

Normal letter spacing

Larger letter spacing

Return to the 'letter-spacing' property summary

line-height

Sets the line-height as a ratio of the font-size.

line-height: 1.5;

line-height of 2.
Following text

line-height of 3.
Following text

Return to the 'line-height' property summary

list-style

This property allows the styling of the list element in one CSS declaration.

list-style: disc inside url("my_image.png");

The following example sets the list to render inside its containing element and use an image as a bullet, the disc is a fall-back in the event of the image being unavailable.

  • Item One
  • Item Two
  • Item Three

Return to the 'list-style' property summary

margin

Sets the amount of space, outside the border, around the element.

margin: 1em 1.25em 0.5em 0.75em;

The above short form CSS declaration follows the order of top, right, bottom, left.

Return to the 'margin' property summary

max-height

Sets the maximum height of the element.

max-height: 12em;

Return to the 'max-height' property summary

orphans

The orphans property is mainly intended for paged media. Orphans sets the number of lines to be displayed at the bottom of the page when a page break occurs inside a paragraph. Negative numbers are not allowed.

orphans: 5;

Return to the 'orphans' property summary

outline

The outline property outlines the element including the border without taking up space itself.

outline: rgb(180,180,180) dotted 1px;

Box with a solid border and a dotted outline

Return to the 'outline' property summary

overflow

This property determines what happens to content that overflows its container.

overflow: hidden;

The excess content in this box is hidden by the CSS declaration of overflow: hidden; This content is disa...

Return to the 'overflow' property summary

padding

Sets the amount of space between an elements content and the inner edge of its container element, inside the border.

padding: 1em 1.25em 0.5em 0.75em

The above short form CSS declaration follows the order of top, right, bottom, left.

Return to the 'padding' property summary

page-break

Page breaking mainly applies to paged media and is covered by three CSS properties, page-break-after, page-break-before, page-break-inside.

The page-break-after and before properties are used to set the printing behaviour for specified elements. For example, a page-break-before could be set for table elements. The page-break-inside property can be used to prevent page breaking within an element.

h1{
	page-break-after: never;
}
table{
	page-break-inside: avoid;
}

Return to the 'page-break' property summary

position

The value of 'fixed' will keep the element in the browser window whereas the value 'absolute' sets the position within the page and outside the document flow. The 'relative' value positions the content relative to the document flow.

position: relative; top: -1em; left: 1.5em;

The following example, the gap in the text shows the part of the document flow that the 'relative' positioned content occupies.

In contrast, the 'absolute' positioned content has completely left the document flow and no gap in the content remains.

All of a sudden the text had a relative leap in hope.

Meanwhile the other text felt absolute despair.

Hint: To position an element to 'absolute' within a containing element, set the position for the containing element to 'relative', eg,

#containing_element{
	position: relative;
}
#containing_element .absolute_positioned_element{
	position: absolute; top: 4.75em; right: 10em;
}

Return to the 'position' property summary

quotes

quotes: "'" "'" '"' '"';

Then I said hello and walked on by.

The 'quotes' CSS declaration follows the order of, outer left, outer right, inner left, inner right.

Return to the 'quotes' property summary

right

Please see the 'bottom' property for details

Return to the 'right' property summary

text-align

This property, as the name suggests, is used to align text.

text-align: center;

Return to the 'text-align' property summary

text-decoration

This property can set types of decoration such as underline, overline, strike through etc.

text-decoration: line-through;

I have to draw a line through this, it is not good enough!

Return to the 'text-decoration' property summary

text-indent

This property indents the first line of text.

text-indent: 1em;

Return to the 'text-indent' property summary

text-transform

This property can apply effects to the letters of the text.

text-transform: capitalize;

All the first letters are capitals.

Return to the 'text-transform' property summary

top

Please see the 'bottom' property for details

Return to the 'top' property summary

unicode-bidi

Used along with 'direction' property, the 'unicode-bidi' property is useful for content containing mixed direction text

direction: rtl;
unicode-bidi: embed;

The quick brown fox jumps over the lazy dog.

Return to the 'unicode-bidi' property summary

vertical-align

The 'vertical-align' property is used set the alignment of elements and table cell contents.

vertical-align: super;

Bring on the sub to make a super difference.

Return to the 'vertical-align' property summary

visibility

The 'visibility' property is used to set the visibility of a rendered object, hidden elements will still affect the layout.

Please note that the 'collapse' value has the same affect as 'hidden' when used with non table elements.

visibility: hidden;

The gap in this content, you can't see me is caused by hidden text.

Return to the 'visibility' property summary

white-space

This property determines how white-space within a containing element is handled.

white-space: pre;

This is some content in a box. It's not allowed to wrap.

Return to the 'white-space' property summary

widows

The 'widows' property is mainly intended for paged media and sets the number of lines to be displayed at the top of the page after a page break.

widows: 4;

Return to the 'widows' property summary

width

The 'width' sets the width of the element.

width: 10em;

Return to the 'width' property summary

word-spacing

The 'word-spacing' property can be used increase or lower the white-space between words.

word-spacing: 0.3em;

The following words have much greater space between them while these words have less.

Return to the 'word-spacing' property summary

z-index

The z-index property is used to re-order elements in the document flow. This has a similar effect to moving items backwards and forwards using layers in a image manipulation program.

z-index: 10;

Box 1

z-index: 40

Box 2

z-index: 30

Box 3

z-index: 20

Box 4

z-index: 10

In the above example, Box 1 is first in the document flow followed by Box 2 etc, the rendered order of the boxes has been reversed by using z-index. The higher the z-index number the further 'forward' the item is in the visual order of rendering.

Hint: Incrementing z-index in units of ten makes it easier to add more elements later.

Return to the 'z-index' property summary

CSS table formatting

Though the CSS properties described in this section are not necessarily exclusive to table elements, it's a clearer and therefore more helpful method of demonstrating them.

The HTML code for the table that is used to illustrate the table CSS examples is as follows;

<table class="table_class_name" summary="Description of the table">
<caption>CSS property example</caption>
	<colgroup id="css_example_colgroup" span="3">
		<col id="css_example_col1" span="1"/>
		<col id="css_example_col2" span="1"/>
		<col id="css_example_col3" span="1"/>
	</colgroup>
	<thead>
		<tr>
			<th>Column one</th>
			<th>Column two</th>
			<th>Column three</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td colspan="3" scope="colgroup">property: value;</td>
		</tr>
	</tfoot>
	<tbody>
	<tr>
		<td>Cell One</td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td>Cell Two</td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td>Cell Three</td>
	</tr>
	</tbody>
</table>

border-collapse

The 'border-collapse' property collapses border into a single border, also over rides 'empty-cells' and 'border-spacing' settings

border-collapse example
Column one Column two Column three
border-collapse: separate;
Cell One
Cell Two
Cell Three
border-collapse example
Column one Column two Column three
border-collapse: collapse;
Cell One
Cell Two
Cell Three

Return to the 'border-collapse' property summary

border-spacing

Sets the space of the borders between neighbouring cells, only works with 'border-collapse: separate;'.

border-spacing example
Column one Column two Column three
border-spacing: 5px;
Cell One
Cell Two
Cell Three
border-spacing example
Column one Column two Column three
border-spacing: 8px;
Cell One
Cell Two
Cell Three

Return to the 'border-spacing' property summary.

caption-side

This property positions the table caption to above or below the table.

caption-side example
Column one Column two Column three
caption-side: top;
Cell One
Cell Two
Cell Three
caption-side example
Column one Column two Column three
caption-side: bottom;
Cell One
Cell Two
Cell Three

Return to the 'caption-side' property summary

empty-cells

The 'empty-cells' property can hide the background and the border of empty cells when set to hide, only works with 'border-collapse: separate;'

empty-cells example
Column one Column two Column three
empty-cells: show;
Cell One
Cell Two
Cell Three
empty-cells example
Column one Column two Column three
empty-cells: hide;
Cell One
Cell Two
Cell Three

Return to the 'empty-cells' property summary

table-layout

The 'table-layout' property decides if tables, columns and cells are laid out to a fixed width or rendered according to the table contents. If the value of 'table-layout' is 'fixed' the layout is governed by the widths of the columns and cells. Any unwrappable content overflowing the cell or column will overflow its borders.

With the width set to 'auto', the tables columns and cells will expand to contain the widest unwrappable content.

The following example uses CSS to set the width of the table and the table cell, 'td';

#containing_div .table_class_name{
	width: 10em;
	table-layout: fixed;/*delete to set default value of auto*/
}
#containing_div .table_class_name td{
	width: 20%;
}
table-layout example
Column one Column two Column three
table-layout: auto;
Cell One
Cell Two
Cell Three
table-layout example
Column one Column two Column three
table-layout: fixed;
Cell One
Cell Two
Cell Three

Return to the 'table-layout' property summary

Pseudo-classes and pseudo-elements

What differentiates pseudo-classes and pseudo-elements? In short, the differences are;

  • Pseudo-classes apply effects to certain elements, based on their dynamic state. For instance the state of a hyper-link can be changed on hover with the pseudo-class a:hover.
  • Pseudo-elements generate effects or content and add them to the sub-parts of an element. An example of this is the pseudo-element :first-line to add an effect to the line of a paragraph.

Pseudo-classes

:active, :focus, :hover, :link, :visited

These pseudo-classes add effects to hyper-links, they can also be applied to other elements, depending on whether they are visited, hovered over etc.

#links_example a:link{
	color: rgb(0,28,112);
	text-decoration: underline;
}
#links_example a:visited{
	color: rgb(112,101,0);
	text-decoration: underline;
}
#links_example a:focus{
	outline: none;
	color: rgb(245,245,245);
	background-color: rgb(180,200,220);
}
#links_example a:hover{
	color: rgb(112,23,0);
	text-decoration: none;
}
#links_example a:active{
	color: rgb(245,245,245);
	background-color: rgb(10,10,10);
	text-decoration: none;
}

Please note that with CSS 2.1 the ':active', ':link' and ':visited' pseudo-classes are not mutually exclusive.

:first, :left, :right

The ':first', ':left' and ':right' pseudo-classes are utilised for paged media and are called by the @page rule. These properties are especially useful when printing double-sided documents.

@page :first{
	margin: 15mm 10mm 25mm 10mm;
}
@page :left{
	margin: 10mm 30mm 15mm 40mm;
}
@page :right{
	margin: 10mm 40mm 0 30mm;
}

The above example sets up the margins for the first page, then the margins for the subsequent left and right pages.

:lang

The ':lang' property enables different styles to be applied to an element depending on its or the document's language.


#pseudo_lang_eg q:lang(fr){
	quotes: '« ' ' »';
}
#pseudo_lang_eg q:lang(en){
	quotes: '"' '"';
}

The HTML: <div id="pseudo_lang_eg"><p>The English person shouted <q xml:lang="en" lang="en">hello</q> and the French person shouted back, <q xml:lang="fr" lang="fr">Bonjour</q>.</p></div>

The English person shouted hello and the French person shouted back, Bonjour.

Return to the menu

Pseudo-elements

Content

The ':before' and ':after' pseudo-elements allows CSS to generate content not present in the document and insert that content before or after a specified point in the HTML content.

.content_example:before{
	content: "Some text before ";
}
.content_example:after{
	content: ", some text after";
}

HTML text

The HTML: <p class="content_example">HTML text</p>

Return to the 'content' property summary

:first-letter

The pseudo-element 'first-letter' can be used to style the first letter of text in the selected element.

#first_letter_eg p:first-letter{
	font-size: 250%;
	font-family: serif;
}

Pseudo element first-letter example.

:first-line

The pseudo-element 'first-line' is used to style the first line of text in a selected element.

#first_line_eg p:first-line{
	font-size: 110%;
	color: rgb(100,80,180);
}

Pseudo element first-line example. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus odio non augue pellentesque malesuada. Etiam id sem sed ligula molestie volutpat varius ac eros. Morbi erat arcu, aliquet quis tempor non, convallis vel metus. Donec convallis ultrices dolor, vitae egestas arcu tempor ac.

Return to the menu

Attribute selectors - Matching attributes and attribute values

Attribute selectors allows the use of pattern matching to search for an attribute’s presence and match a pattern within the attribute’s value.

The attribute selectors support several types of patern matching as shown in the table below.

Attribute selectors pattern matching list
Pattern Explanation
The syntax of an attribute selector: element[attribute="value"]
[foo] Has an attribute named "foo", apply the condition whatever the value of "foo"
[foo="bar"] Has an attribute named "foo" with a value of "bar" ("bar")
[foo~="bar"] Value has the word "bar" in it somewhere ("blue bar stools")
[foo|="bar"] Value has the word "bar" as the first part of a hyphen-separated word in a list("ice-lolly bar-foo")

The following are some examples using the pattern matching formulae listed in the table above and using the following HTML code.

<ul class="formula_type">

<li>A <span class="young">young</span> <span class="female">female</span> <span class="human">human</span> is sometimes called a <span class="young female human">girl</span>.</li>

<li>A <span class="young">young</span> <span class="male">male</span> <span class="lion">lion</span> is called a <span class="young male lion">cub</span>.</li>

<li>A <span class="female">female</span> <span class="tiger">tiger</span> is called a <span class="female tiger">tigress</span>.</li>

</ul>

Example one. Find an exact match for the span class 'female' using [foo="bar"].

.exact_value span[class="female"]{
	color: rgb(225,225,225);
	background-color: rgb(55,55,55);
}
  • A young female human is sometimes called a girl.
  • A young male lion is called a cub.
  • A female tiger is called a tigress.

Example two. Find a match for the span class 'female' which may be one of a space seperated list of classes using [foo~="bar"].

.general_match span[class~="female"]{
	color: rgb(225,225,225);
	background-color: rgb(55,55,55);
}
  • A young female human is sometimes called a girl.
  • A young male lion is called a cub.
  • A female tiger is called a tigress.

Return to the menu

License

This document is free to use and distribute under the GNU Free Documentation License.

Gary Hollands - June 2009.