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 link 'a' or a 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.

h1{
	font-size: 130%;
}

#content{
	width: 20em;
}

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

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

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

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

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

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;

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.

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.

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;

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);

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:

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;

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.

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;

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.

Return to the 'font' property summary

height

This property set the height of an element.

height: 2em;

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;

Return to the 'letter-spacing' property summary

line-height

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

line-height: 1.5;

Return to the 'line-height' property summary

list-style

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

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;

Return to the 'outline' property summary

overflow

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

overflow: hidden;

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.

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;

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;

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;

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

<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>

#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%;
}

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>

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;
}

: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);
}

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.

.exact_value span[class="female"]{
	color: rgb(225,225,225);
	background-color: rgb(55,55,55);
}

.general_match span[class~="female"]{
	color: rgb(225,225,225);
	background-color: rgb(55,55,55);
}

Return to the menu

License

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

Gary Hollands - June 2009.