Cascading Style Sheets Quick Reference

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}`
Gradient	`background-image: -moz-linear-gradient(center top, #1f8aacc 0% #0069aa 100%) background-repeat: repeat-x;`

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