Cascading Style Sheets Quick Reference

See Also: Cascading Style Sheets Reference

Basic Concepts

Selectors

ItemExample
Class.MyClass { color:red; }
ID#MyId { color: red; }
contextH1 H2 { color: red; }

Pseudo-classes and Pseudo-Elements

ItemDescription
A:LINKAn un-visited link (must have the HREF attribute)
A:VISITEDA visited link (must have the HREF attribute)
A:ACTIVEAn active link (must have the HREF attribute)
P:FIRST-LINEThe first line of a paragraph
P:FIRST-LETTERThe first letter of a paragraph; e.g., P:first-letter { font-size: 200%; float: left }
:disabledA disabled element; e.g., input:disabled { color: white; }

At-Rules

ItemDescription
@media 
@import 
@charset 
@font-face 
@page 

Other

ItemExample
Groupingh1, h2 { color: red; }
Comments/* my comment */

CSS Properties

Fonts

ItemCoding
Fontfont: {style | variant | weight} size {line-height} family
Namefont-family: {serif | sans-serif | cursive | fantasy | monospace | name}
Sizefont-size: {xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | percentage | units}
Boldfont-weight: {normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}
Italicfont-style: {normal | italic | oblique}
Colorcolor: {rgb(r, g, b) | #rrggbb}
Underlinetext-decoration: underline
Overlinetext-decoration: overline
Strikethroughtext-decoration: line-through
Blinkingtext-decoration: blink
Small Capsfont-variant: {normal | small-caps}
Superscriptvertical-align: super
Subscriptvertical-align: sub
Capitalizationtext-transform: {capitalize | uppercase | lowercase | none}

Paragraphs

ItemCoding
Alignmenttext-align: {left | right | center | justify}
First Line Indentationtext-indent: {length | percentage}
Double Spacingline-height: {normal | number | length | percentage}
White Space Handlingwhite-space: {normal | pre | nowrap}
Visibilitydisplay: {block | inline | list-item | none}

Background

ItemCoding
Backgroundbackground: {color | image | repeat | attachment | position }
Background Colorbackground-color: {rgb(r, g, b) | #rrggbb
Watermarkbackground-image: url(url)
Watermark Locationbackground-position: {percentage | length | {top | center | bottom} {left | center | right}
Tilingbackground-repeat: {repeat | repeat-x | repeat-y | no-repeat}
Non-scrolling backgroundbackground-attachment: {scroll | fixed}
Gradientbackground-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.

ItemCoding
Marginsmargin: { top | right | bottom | left }
Top Marginmargin-top: {length | percentage | auto }
Right Marginmargin-right: {length | percentage | auto }
Bottom Marginmargin-bottom: {length | percentage | auto }
Left Marginmargin-left: {length | percentage | auto }
Paddingpadding: { top | right | bottom | left }
Top Paddingpadding-top: {length | percentage | auto }
Right Paddingpadding-right: {length | percentage | auto }
Bottom Paddingpadding-bottom: {length | percentage | auto }
Left Paddingpadding-left: {length | percentage | auto }
Dimensions{width | height}: {length | percentage | auto }

Borders

ItemCoding
Borderborder-{top | right | bottom | left}: {width | style | color}
Thicknessborder-{top | right | bottom | left}-width: {thin | medium | thick | length}
Colorborder-color: {rgb(r, g, b) | #rrggbb }

Border Styles

StyleDescription
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

ItemCoding
Typelist-style-type: {disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none}
Bullet Imagelist-style-image: url(url-relative-to-css-file)