CSS Units

Measurement Values

Unit	Description
%	percentage
in	inch
cm	centimeter
mm	millimeter
em	1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
ex	one ex is the x-height of a font (x-height is usually about half the font-size)
pt	point (1 pt is the same as 1/72 inch)
pc	pica (1 pc is the same as 12 points)
px	pixels (a dot on the computer screen)

CSS Web Safe Font Combinations

Commonly Used Font Combinations

The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font.

Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available:

Example

p{font-family:"Times New Roman", Times, serif}

Try it yourself »

Below are some commonly used font combinations, organized by generic family.

---

Serif Fonts

font-family	Example text
Georgia, serif	This is a heading This is a paragraph
"Palatino Linotype", "Book Antiqua", Palatino, serif	This is a heading This is a paragraph
"Times New Roman", Times, serif	This is a heading This is a paragraph

Sans-Serif Fonts

font-family	Example text
Arial, Helvetica, sans-serif	This is a heading This is a paragraph
"Arial Black", Gadget, sans-serif	This is a heading This is a paragraph
"Comic Sans MS", cursive, sans-serif	This is a heading This is a paragraph
Impact, Charcoal, sans-serif	This is a heading This is a paragraph
"Lucida Sans Unicode", "Lucida Grande", sans-serif	This is a heading This is a paragraph
Tahoma, Geneva, sans-serif	This is a heading This is a paragraph
"Trebuchet MS", Helvetica, sans-serif	This is a heading This is a paragraph
Verdana, Geneva, sans-serif	This is a heading This is a paragraph

Monospace Fonts

font-family	Example text
"Courier New", Courier, monospace	This is a heading This is a paragraph
"Lucida Console", Monaco, monospace	This is a heading This is a paragraph

CSS Aural Reference

Aural Style Sheets

Aural style sheets use a combination of speech synthesis and sound effects to make the user listen to information, instead of reading information.

Aural presentation can be used:

• by blind people
• to help users learning to read
• to help users who have reading problems
• for home entertainment
• in the car
• by print-impaired communities

The aural presentation converts the document to plain text and feed this to a screen reader (a program that reads all the characters on the screen).

An example of an Aural style sheet:

h1,h2,h3,h4
{
voice-family:male;
richness:80;
cue-before:url("beep.au")
}The example above will make the speech synthesizer play a sound, then speak the headers in a very rich male voice.

---

CSS Aural Reference

The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).

Property	Description	Values	CSS
azimuth	Sets where the sound should come from	angle left-side far-left left center-left center center-right right far-right right-side behind leftwards rightwards	2
cue	Sets the cue properties in one declaration	cue-before cue-after	2
cue-after	Specifies a sound to be played after speaking an element's content	none url	2
cue-before	Specifies a sound to be played before speaking an element's content	none url	2
elevation	Sets where the sound should come from	angle below level above higher lower	2
pause	Sets the pause properties in one declaration	pause-before pause-after	2
pause-after	Specifies a pause after speaking an element's content	time %	2
pause-before	Specifies a pause before speaking an element's content	time %	2
pitch	Specifies the speaking voice	frequency x-low low medium high x-high	2
pitch-range	Specifies the variation in the speaking voice. (Monotone voice or animated voice?)	number	2
play-during	Specifies a sound to be played while speaking an element's content	auto none url mix repeat	2
richness	Specifies the richness of the speaking voice. (Rich voice or thin voice?)	number	2
speak	Specifies whether content will render aurally	normal none spell-out	2
speak-header	Specifies how to handle table headers. Should the headers be spoken before every cell, or only before a cell with a different header than the previous cell	always once	2
speak-numeral	Specifies how to speak numbers	digits continuous	2
speak-punctuation	Specifies how to speak punctuation characters	none code	2
speech-rate	Specifies the speed of the speaking	number x-slow slow medium fast x-fast faster slower	2
stress	Specifies the "stress" in the speaking voice	number	2
voice-family	Specifies the voice family of the speaking	specific-voice generic-voice	2
volume	Specifies the volume of the speaking	number%silent x-soft soft medium loud x-loud	2

CSS Selector Reference

CSS Selectors

In CSS, selectors are patterns used to select the element(s) you want to style.

The "CSS" column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3).

Selector	Example	Example description	CSS
.class	.intro	Selects all elements with class="intro"	1
#id	#firstname	Selects the element with id="firstname"	1
*	*	Selects all elements	2
element	p	Selects all <p> elements	1
element,element	div,p	Selects all <div> elements and all <p> elements	1
element element	div p	Selects all <p> elements inside <div> elements	1
element>element	div>p	Selects all <p> elements where the parent is a <div> element	2
element+element	div+p	Selects all <p> elements that are placed immediately after <div> elements	2
[attribute]	[target]	Selects all elements with a target attribute	2
[attribute=value]	[target=_blank]	Selects all elements with target="_blank"	2
[attribute~=value]	[title~=flower]	Selects all elements with a title attribute containing the word "flower"	2
[attribute|=value]	[lang|=en]	Selects all elements with a lang attribute value starting with "en"	2
:link	a:link	Selects all unvisited links	1
:visited	a:visited	Selects all visited links	1
:active	a:active	Selects the active link	1
:hover	a:hover	Selects links on mouse over	1
:focus	input:focus	Selects the input element which has focus	2
:first-letter	p:first-letter	Selects the first letter of every <p> element	1
:first-line	p:first-line	Selects the first line of every <p> element	1
:first-child	p:first-child	Selects every <p> element that is the first child of its parent	2
:before	p:before	Insert content before  the content of every <p> element	2
:after	p:after	Insert content after every <p> element	2
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute value starting with "it"	2
element1~element2	p~ul	Selects every <ul> element that are preceded by a <p> element	3
[attribute^=value]	a[src^="https"]	Selects every <a> element whose src attribute value begins with "https"	3
[attribute$=value]	a[src$=".pdf"]	Selects every <a> element whose src attribute value ends with ".pdf"	3
[attribute*=value]	a[src*="w3schools"]	Selects every <a> element whose src attribute value contains the substring "w3schools"	3
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent	3
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent	3
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent	3
:only-child	p:only-child	Selects every <p> element that is the only child of its parent	3
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent	3
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child	3
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child	3
:last-child	p:last-child	Selects every <p> element that is the last child of its parent	3
:root	:root	Selects the document’s root element	3
:empty	p:empty	Selects every <p> element that has no children (including text nodes)	3
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)	3
:enabled	input:enabled	Selects every enabled <input> element	3
:disabled	input:disabled	Selects every disabled <input> element	3
:checked	input:checked	Selects every checked <input> element	3
:not(selector)	:not(p)	Selects every element that is not a <p> element	3
::selection	::selection	Selects the portion of an element that is selected by a user	3