You are on page 1of 2

Page 1 of 2

Quick Reference Guide

FREE

Cascading Style Sheets (CSS 2)


BACKGROUND CLASSIFICATION GENERATED CONTENT

background

background-color background-image background-repeat background-attachment background-position scroll | fixed color-rgb color-hex color-name transparent url none top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right x-% y-% x-pos y-pos repeat | repeat-x | repeat-y | no-repeat BORDER

clear cursor

left | right | both | none url auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | nresize | se-resize | sw-resize | s-resize | w-resize | text | wait | help none | inline | block | listitem | run-in | compact | marker | table | inline-table | table-row-group | tableheader-group | table-footergroup | table-row | tablecolumn-group | tablecolumn | table-cell | tablecaption left | right | none static | relative | absolute | fixed visible | hidden | collapse DIMENSION

content

background-attachment background-color

display

string url counter(name) counter(name, list-styletype) counters(name, string) counters(name, string, liststyle-type) attr(X) open-quote | close-quote | no-open-quote | no-closequote none identifier number none identifier number none string string string string LIST & MARKERS

background-image background-position

counter-increment counter-reset quotes

float position visibility

background-repeat

list-style

list-style-type list-style-position list-style-image none url Inside | outside none | disc | circle | square | decimal | decimal-leadingzero | lower-roman | upperroman | lower-alpha | upper-alpha | lower-greek | lower-latin | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha auto length MARGIN

list-style-image list-style-position list-style-type

border

border-width border-style border-color border-bottom-width border-style border-color border-color border-style thin | medium | thick length color border-left-width border-style border-color border-color border-style thin | medium | thick length border-right-width border-style border-color border-color border-style thin | medium | thick length none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset border-top-width border-style border-color border-color border-style thin | medium | thick length thin | medium | thick length

height

auto length % normal number length % none length % none length % length % length % auto % length FONT

border-bottom

line-height

border-bottom-color border-bottom-style border-bottom-width border-color border-left

max-height

max-width

marker-offset

min-height min-width

margin

border-left-color border-left-style border-left-width border-right

width

margin-top margin-right margin-bottom margin-left auto length % auto length % auto length % auto length % OUTLINE

margin-bottom

font

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

font-style font-variant font-weight font-size/line-height font-family caption | icon | menu | message-box | smallcaption | status-bar family-name generic-family xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger length % none number normal | wider | narrower | ultra-condensed | extracondensed | condensed | semi-condensed | semiexpanded | expanded | extra-expanded | ultraexpanded normal | italic | oblique normal | small-caps normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

margin-left

margin-right

margin-top

font-family font-size

outline

border-top

outline-color outline-style outline-width color invert None | dotted | dashed | solid | double | groove | ridge | inset | outset thin | medium | thick length

font-size-adjust font-stretch

outline-color outline-style

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

outline-width

font-style Values in italics are place holders for an actual value (like 1px, 1em, 1%), values in normal text are values that can be used as the actual value font-variant font-weight

CSS Properties in Dark Red are shorthand properties and each value must be defined. The exception is where the property can define from one to four of the sides of a box element property (Top-Right-Bottom-Left) - i.e. borderwidth

http://www.veign.com

Part Number: QRG0007

2008 Veign, All Rights Reserved

Page 2 of 2
PADDING

Quick Reference Guide


TABLE PSEUDO-CLASS

FREE

padding

padding-top padding-right padding-bottom padding-left length % length % length % length % POSITIONING

border-collapse border-spacing caption-side empty-cells table-layout

collapse | separate length length top | bottom | left | right show | hide auto | fixed TEXT

:active :focus

Adds special style to an activated element Adds special style to an element while the element has focus Adds special style to an element when you mouse over it Adds special style to an unvisited link Adds special style to a visited link Adds special style to an element that is the first child of some other element Allows the author to specify a language to use in a specified
PSEUDO-ELEMENT

padding-bottom padding-left padding-right padding-top

:hover

color direction letter-spacing text-align text-decoration text-indent text-shadow

color ltr | rtl normal length left | right | center | justify none | underline | overline | line-through | blink length % none color length none | capitalize | uppercase | lowercase normal | embed | bidioverride normal | pre | nowrap normal length

:link :visited :first-child

bottom

auto % length shape auto auto % length visible | hidden | scroll | auto static | relative | absolute | fixed auto % length auto % length Baseline | sub | super | top | text-top | middle | bottom | text-bottom length % auto

clip left

:lang

overflow position right

text-transform unicode-bidi white-space word-spacing

:first-letter :first-line :before :after

Adds special style to the first letter of a text Adds special style to the first line of a text Inserts some content before an element Inserts some content after an element
SELECTOR PATTERNS

top

vertical-align

SELECTOR TYPES Name


Universal

z-index

Info
Any element Any element of that type Multiple elements of different types Multiple elements of different types when you dont want to affect all instances A single element type when you dont want to affect all instances of An element that is below (in the document tree) another elementno matter how many levels below An element that is directly below (in the document tree) another All elements of a type that share the same parent An element with that matches the attribute listed

Example
* { font: 10px Arial; } h1 { text-decoration: underline; } * E

Name
any element

Example

UNITS MEASUREMENT

Type

an element of type E an E element with a "foo" attribute an E element whose "foo" attribute value is exactly equal to "bar" an E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "bar" an E element whose "hreflang" attribute has a hyphen-separated list of values beginning (from the left) with "en" an E element, first child of its parent an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) an E element during certain user actions

Grouping

h1, h2, h3 { font-family: Verdana; }

E[foo] E[foo="bar"]

% cm em ex in mm pc pt px

percentage centimeter 1em = current font size of current element 1ex = ~1/2 current size of current element inch millimeter pica (= 12 points) point (= 1/72 inch)
Descendant Id Class

.sampleclass { text-decoration: underline; }

E[foo~="bar"]

E [hreflang|="en"]

#sampleid { text-decoration: underline; }

E:first-child E:link E:visited

pixel COLORS

#gallery h1 { text-decoration: underline; }

E:active E:hover E:focus E:lang(fr)

an element of type E in language "fr" (the document language specifies how language is determined) the first formatted line of an E element the first formatted letter of an E element generated content before an E element generated content after an E element an E element whose class is "warning" (the document language specifies how class is determined). an E element with ID equal to "myid". an F element descendant of an E element an F element child of an E element an F element immediately preceded by an E element

Color name rgb(x,y,z) rgb(x%,y%,z%) #rrggbb

Red, blue, green, dark green Red = rgb(255,0,0) Red = rgb(100%,0,0) Red = #ff0000 (or shorthand = #f00)
Child

E::first-line E::first-letter #title > p { font-weight: bold; } E::before E::after E.warning

Sibling

h1 + p { font-style: italic; } E#myid EF option[selected] { color: #ff0000; } input[type="pass"] { color: #ccc; } img[src="sm.gif"] { border: 1px solid #000; } a[rel~="next"] { color: #fff; } *[lang|="en"] { color : red; } E>F E+F

Attribute

http://www.veign.com

Part Number: QRG0007

2008 Veign, All Rights Reserved

You might also like