Page History: Cascading Style Sheets Quick Reference

Compare Page Revisions

3 2 1 0 Current 3 2 1 0

« Older Revision - Back to Page History - Current Revision

Page Revision: Thu, Aug 25, 2011, 8:24 AM

See Also: Cascading Style Sheets Reference

Basic Concepts¶

Selectors¶

Item	Example
Class	.MyClass { color:red; }
ID	#MyId { color: red; }
context	H1 H2 { color: red; }

Pseudo-classes and Pseudo-Elements¶

Item	Description
A:LINK	An un-visited link (must have the HREF attribute)
A:VISITED	A visited link (must have the HREF attribute)
A:ACTIVE	An active link (must have the HREF attribute)
P:FIRST-LINE	The first line of a paragraph
P:FIRST-LETTER	The first letter of a paragraph; e.g., P:first-letter { font-size: 200%; float: left }
:disabled	A disabled element; e.g., input:disabled { color: white; }

At-Rules¶

Item	Description
@media
@import
@charset
@font-face
@page

Other¶

Item	Example
Grouping	h1, h2 { color: red; }
Comments	/* my comment */

CSS Properties¶

Fonts¶

Item	Coding
Font	font: {style | variant | weight} size {line-height} family
Name	font-family: {serif | sans-serif | cursive | fantasy | monospace | name}
Size	font-size: {xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | percentage | units}
Bold	font-weight: {normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}
Italic	font-style: {normal | italic | oblique}
Color	color: {rgb(r, g, b) | #rrggbb}
Underline	text-decoration: underline
Overline	text-decoration: overline
Strikethrough	text-decoration: line-through
Blinking	text-decoration: blink
Small Caps	font-variant: {normal | small-caps}
Superscript	vertical-align: super
Subscript	vertical-align: sub
Capitalization	text-transform: {capitalize | uppercase | lowercase | none}

Paragraphs¶

Item	Coding
Alignment	text-align: {left | right | center | justify}
First Line Indentation	text-indent: {length | percentage}
Double Spacing	line-height: {normal | number | length | percentage}
White Space Handling	white-space: {normal | pre | nowrap}
Visibility	display: {block | inline | list-item | none}

Background¶

Item	Coding
Background	background: {color | image | repeat | attachment | position }
Background Color	background-color: {rgb(r, g, b) | #rrggbb
Watermark	background-image: url(url)
Watermark Location	background-position: {percentage | length | {top | center | bottom} {left | center | right}
Tiling	background-repeat: {repeat | repeat-x | repeat-y | no-repeat}
Non-scrolling background	background-attachment: {scroll | fixed}

Box Elements¶

Note: Margins are outside a border, while padding is inside a border.

Item	Coding
Margins	margin: { top | right | bottom | left }
Top Margin	margin-top: {length | percentage | auto }
Right Margin	margin-right: {length | percentage | auto }
Bottom Margin	margin-bottom: {length | percentage | auto }
Left Margin	margin-left: {length | percentage | auto }
Padding	padding: { top | right | bottom | left }
Top Padding	padding-top: {length | percentage | auto }
Right Padding	padding-right: {length | percentage | auto }
Bottom Padding	padding-bottom: {length | percentage | auto }
Left Padding	padding-left: {length | percentage | auto }
Dimensions	{width | height}: {length | percentage | auto }

Borders¶

Item	Coding
Border	border-{top | right | bottom | left}: {width | style | color}
Thickness	border-{top | right | bottom | left}-width: {thin | medium | thick | length}
Color	border-color: {rgb(r, g, b) | #rrggbb }

Border Styles¶

Style	Description
none	no border is drawn (regardless of the border-width value)
dotted	the border is a dotted line drawn on top of the background of the element
dashed	the border is a dashed line drawn on top of the background of the element
solid	the border is a solid line
double	the border is a double line drawn on top of the background of the element. The sum of the two single lines and the space between equals the border-width value.
groove	a 3D groove is drawn in colors based on the value.
ridge	a 3D ridge is drawn in colors based on the value.
inset	a 3D inset is drawn in colors based on the value.
outset	a 3D outset is drawn in colors based on the value.

Lists¶

Item	Coding
Type	list-style-type: {disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none}
Bullet Image	list-style-image: url(url-relative-to-css-file)