Professional Documents
Culture Documents
FREE
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
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
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
max-height
max-width
marker-offset
min-height min-width
margin
width
margin-top margin-right margin-bottom margin-left auto length % auto length % auto length % auto length % OUTLINE
margin-bottom
font
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
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
Page 2 of 2
PADDING
FREE
padding
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
:hover
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
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
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
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
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
E[foo~="bar"]
E [hreflang|="en"]
pixel COLORS
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
Red, blue, green, dark green Red = rgb(255,0,0) Red = rgb(100%,0,0) Red = #ff0000 (or shorthand = #f00)
Child
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