css 2 visual cheat sheet

★ HOW TO / 2. SELECTORSLEGEND

E Element

(pc) Pseudo Class

(s) Selector

U Universal

T Type

D Descendant

*Matches any element.

U (s)

EMatches any E element (div, span, p,…).

T (s)

E FMatches any F element that is a descendant of an E element.

D (s)

E > FMatches any F element that is a child of an element E.

C (s)

E:first-childMatches element E when E is the first child of its parent.

:first-child (pc)

E:link / E:visitedMatches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).

link (pc)

E:active / E:hover / E:focusMatches E during certain user actions.

dynamic (pc)

E:lang(c)Matches element of type E if it is in (human) language c (the document language specifies how language is determined).

:lang() (pc)

E + FMatches any F element immediately preceded by a sibling element E.

Ad (s)

E[foo]Matches any E element with the "foo" attribute set (whatever the value).

Att (s)

E[foo="warning"]Matches any E element whose "foo" attribute value is exactly equal to "warning".

Att (s)

E[foo~="warning"]Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning".

Att (s)

E[lang|="en"]Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".

Att (s)

DIV.warningLanguage specific. (In HTML, the same as DIV[class~="warning"]).

Class (s)

E#myidMatches any E element with ID equal to "myid".

ID (s)

C

★ HOW TO / 1. SYNTAX

Include an external style sheetUse the following syntax to include an external style sheet on your pages:

<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>

Basic syntaxThe CSS syntax is made up of three parts: a selector, a property and a value:

selector {property:value}

T How to use:

body {color:black}

GroupingYou can group selectors separating each selector with a comma.

T How to use:

p, h1,h2,h3,h4,h5,h6, form {margin:0;}

Add styles to elements with particular attributesYou can also apply styles to HTML elements with particular attributes. The style rule below will match all input elements that have a type attribute with a value of "text".

T How to use:

input[type="text"] {background-color:blue}

CommentsA comment will be ignored by browsers.

T How to use:

/* This is a comment */

★ PSEUDO CLASSES

:activeAdds a style to an element that is activated.

T How to use:

a:active must come after a:hover in the CSS definition in order to be effective.

:afterAdds content after an element.

:beforeAdds content before an element.

:first-childAdds a style to an element that is the first child of another element.

:first-letterAdds a style to the first character of a text.

:first-lineAdds a style to the first line of a text.

:focusAdds a style to an element that has keyboard input focus.

:hoverAdds a style to an element when you mouse over it.

T How to use:

a:hover must come after a:link and a:visited in the CSS definition in order to be effective.

:langAdds a style to an element with a specific lang attribute.

:linkAdds a style to an unvisited link.

:visitedAdds a style to a visited link.

C Child

Ad Adjacent

Att Attribute

✽Shorthand

property

T Notes

Designed by Antonio Lupetti

• http://woorkup.com • http://www.twitter.com/woork

CSS 2 VISUAL CHEAT SHEET ★ ESSENTIAL REFERENCE GUIDE TO CASCADING STYLE SHEETS LEVEL 2

★ BACKGROUND

✽ backgroundSets all the background properties in one declaration.

background-attachmentSets whether a background image is fixed or scrolls with the rest of the page.

scroll | fixed | inherit

background-colorSets the background color of an element.

color_name | hex_number | rgb_number |

transparent | inherit

background-imageSets the background image for an element.

url('image_url') |none | inherit

background-positionSets the starting position of a background image.

top left | top center | top right | center left | center center | center

right | bottom left | bottom center | bottom right | x% y% | x-pos y-

pos | inherit

background-repeatSets how a background image will be repeated.

repeat | repeat-x | repeat-y | no-repeat |

inherit

★ FONT

✽ fontSets all the font properties in one declaration.

font-familySpecifies the font family for text.

family-name | generic-family

font-sizeSpecifies the font size of text.

xx-small | x-small | small | medium | large |

x-large | xx-large | smaller | larger | length | % |

inherit

font-styleSpecifies the font style for text.

normal | italic | oblique | inherit

font-variantSpecifies whether or not a text should be displayed in a small-caps font.

normal | small-caps | inherit

font-weightSpecifies the weight of a font.

normal | bold | bolder | lighter | 100 | 200 | 300 |

400 | 500 | 600 | 700 | 800 | 900 | inherit

f

★ SIZE AND COLORS

Relative Size em | ex | %

Absolute Size cm | in | mm | pc | pt | px

ColoursRGB Notation Hex notation

#0033CC | RGB notation: rgb (0, 12, 12)

★ DIMENSION ★ POSITIONING

heightSets the height of an element.

T The height property does not include padding, borders, or margins.

auto | length | % | inherit

max-heightSets the maximum height of an element.

none | length | % | inherit

max-widthSets the maximum width of an element.

none | length | % | inherit

min-heightSets the minimum height of an element.

length | % | inherit

min-widthSets the minimum width of an element.


widthSets the width of an element.

T The width property does not include padding, borders, or margins.


★ MARGIN

✽ marginSets all the margin properties in one declaration (order: top, right, bottom, left).

T How to use:

p{margin:10px 5px 15px 20px;}


margin-bottomSets the bottom margin of an element.


margin-leftSets the left margin of an element.


margin-rightSets the right margin of an element.


margin-topSets the top margin of an element.


★ PADDING

✽ paddingSets all the padding properties in one declaration (order: top, right, bottom, left).

T How to use:

p{padding:10px 5px 15px 20px;}


padding-bottomSets the bottom padding of an element.


padding-leftSets the left padding of an element.


padding-rightSets the right padding of an element.


padding-topSets the right padding of an element.


★ OUTLINE

✽ outlineSets all the outline properties in one declaration.

T An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

outline-color | outline-style |

outline-width | inherit

outline-colorSets the color of an outline.

color_name | hex_number |

rgb_number | invert | inherit

outline-styleSets the style of an outline.

none | hidden | dotted | dashed | solid |

double | groove | ridge | inset | outset |

inherit

outline-widthSets the width of an outline.

length | thin | medium | thick

bottomSets the bottom margin edge for a positioned box.


clearSpecifies which sides of an element where other floating elements are not allowed.

left | right | both | none | inherit

clipClips an absolutely positioned element.

shape | auto | inherit

cursorSpecifies the type of cursor to be displayed.

url | auto | crosshair | default | e-resize | help |

move | n-resize | ne-resize | nw-resize |

pointer | progress | s-resize | se-resize |

sw-resize | text | w-resize | wait | inherit

displaySpecifies the type of box an element should generate.

none | block | inline | inline-block |

inline-table | list-item | run-in | table |

table-caption | table-cell | table-column |

table-column-group | table-footer-group |

table-header-group | table-row |

table-row-group | inherit

floatSpecifies whether or not a box should float.

left | right | none | inherit

leftSets the left margin edge for a positioned box.


overflowSpecifies what happens if content overflows an element's box.

visible | hidden | scroll | auto | inherit

positionSpecifies the type of positioning for an element.

absolute | fixed | relative | static | inherit

rightSets the right margin edge for a positioned box.


topSets the top margin edge for a positioned box.


visibilitySpecifies whether or not an element is visible.

visible | hidden | collapse | inherit

z-indexSets the stack order of an element.

auto | number | inherit

★ BORDER

✽ borderSets all the border properties in one declaration.

✽ border-colorSets the color of the four borders.

color_name | hex_number | rgb_number | transparent |

inherit

✽ border-styleSets the style of the four borders.

none | hidden | dotted | dashed | solid | double |

groove | ridge | inset | outset

✽ border-widthSets the width of the four borders.

length | thin | medium | thick

✽ border-topSets all the top border properties in one declaration.

border-top-color | border-top-style | border-top-width

border-top-colorSets the color of the top border.



border-top-styleSets the style of the top border.

border-style

border-top-widthSets the width of the top border.

border-width

✽ border-rightSets all the right border properties in one declaration.

border-right-color | border-right-style | border-right-width

border-right-colorSets the color of the right border.



border-right-styleSets the style of the right border.

border-style

border-right-widthSets the width of the right border.

border-width

✽ border-bottomSets all the bottom border properties in one declaration.

border-bottom-color | border-bottom-style | border-bottom-width

border-bottom-colorSets the color of the bottom border.



border-bottom-styleSets the style of the bottom border.

border-style

border-bottom-widthSets the width of the bottom border.

border-width

✽ border-leftSets all the left border properties in one declaration.

border-left-color | border-left-style |

border-left-width

border-left-colorSets the color of the left border.



border-left-styleSets the style of the left border.

border-style

border-left-widthSets the width of the left border.

border-width


css 2 visual cheat sheet

Documents