• Like


Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.




  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Page 1 of 2 Quick Reference Guide FREE Cascading Style Sheets (CSS 2) BACKGROUND CLASSIFICATION GENERATED CONTENT background background-color clear left | right | both | none content string background-image url background-repeat cursor url counter(name) background-attachment auto | crosshair | default | counter(name, list-style- background-position pointer | move | e-resize | type) ne-resize | nw-resize | n- counters(name, string) background-attachment scroll | fixed resize | se-resize | sw-resize counters(name, string, list- | s-resize | w-resize | text | style-type) background-color color-rgb wait | help attr(X) color-hex open-quote | close-quote | color-name display none | inline | block | list- no-open-quote | no-close- transparent item | run-in | compact | quote marker | table | inline-table background-image url | table-row-group | table- none counter-increment none header-group | table-footer- identifier number group | table-row | table- background-position top left | top center | top none column-group | table- counter-reset right | center left | center identifier number column | table-cell | table- center | center right | caption bottom left | bottom quotes none center | bottom right float left | right | none string string string string x-% y-% x-pos y-pos static | relative | absolute | LIST & MARKERS position fixed list-style-type background-repeat repeat | repeat-x | re- list-style peat-y | no-repeat visible | hidden | collapse list-style-position visibility list-style-image BORDER DIMENSION list-style-image none border border-width auto url height border-style length list-style-position Inside | outside border-color % border-bottom-width normal list-style-type none | disc | circle | square | border-bottom line-height border-style number decimal | decimal-leading- border-color length zero | lower-roman | upper- % roman | lower-alpha | up- border-bottom-color border-color per-alpha | lower-greek | max-height none lower-latin | upper-latin | border-bottom-style border-style length hebrew | armenian | geor- % gian | cjk-ideographic | border-bottom-width thin | medium | thick hiragana | katakana | hira- length max-width none gana-iroha | katakana-iroha length border-color color % marker-offset auto length border-left border-left-width min-height length border-style % MARGIN border-color min-width length margin margin-top border-left-color border-color % margin-right margin-bottom border-left-style border-style width auto margin-left % border-left-width thin | medium | thick length margin-bottom auto length length FONT % border-right border-right-width border-style font font-style margin-left auto border-color font-variant length font-weight % border-right-color border-color font-size/line-height font-family margin-right auto border-right-style border-style caption | icon | menu | length message-box | small- % border-right-width thin | medium | thick caption | status-bar length margin-top auto font-family family-name length border-style none | hidden | dotted | generic-family % dashed | solid | double | groove | ridge | inset | font-size xx-small | x-small | small | OUTLINE outset medium | large | x-large | xx-large | smaller | larger outline outline-color border-top border-top-width length outline-style border-style % outline-width border-color font-size-adjust none outline-color color border-top-color border-color number invert border-style font-stretch normal | wider | narrower | outline-style None | dotted | dashed | border-top-style solid | double | groove | ultra-condensed | extra- thin | medium | thick condensed | condensed | ridge | inset | outset border-top-width length semi-condensed | semi- outline-width thin | medium | thick expanded | expanded | thin | medium | thick length border-width extra-expanded | ultra- length expanded font-style normal | italic | oblique CSS Properties in Dark Red are shorthand properties and Values in italics are place holders for an actual value (like each value must be defined. The exception is where the font-variant normal | small-caps 1px, 1em, 1%), values in normal text are values that can property can define from one to four of the sides of a box be used as the actual value normal | bold | bolder | element property (Top-Right-Bottom-Left) - i.e. border- font-weight lighter | 100 | 200 | 300 | width 400 | 500 | 600 | 700 | 800 | 900 http://www.veign.com Part Number: QRG0007 ©2008 Veign, All Rights Reserved
  • 2. Page 2 of 2 Quick Reference Guide FREE PADDING TABLE PSEUDO-CLASS padding padding-top border-collapse collapse | separate :active Adds special style to an padding-right activated element padding-bottom border-spacing length length padding-left :focus Adds special style to an caption-side top | bottom | left | right length element while the padding-bottom % empty-cells show | hide element has focus padding-left length table-layout auto | fixed :hover Adds special style to an % element when you TEXT mouse over it padding-right length % color color :link Adds special style to an padding-top length direction ltr | rtl unvisited link % normal :visited Adds special style to a POSITIONING letter-spacing length visited link bottom auto left | right | center | justify text-align :first-child Adds special style to an % length element that is the first text-decoration none | underline | overline | line-through | blink child of some other clip shape element auto length text-indent % :lang Allows the author to left auto % specify a language to text-shadow none length use in a specified color length overflow visible | hidden | scroll | auto none | capitalize | uppercase PSEUDO-ELEMENT static | relative | absolute | text-transform position | lowercase fixed :first-letter Adds special style to the unicode-bidi normal | embed | bidi- first letter of a text right auto override % :first-line Adds special style to the length white-space normal | pre | nowrap first line of a text top auto normal word-spacing :before Inserts some content % length length before an element vertical-align Baseline | sub | super | top | :after Inserts some content text-top | middle | bottom | after an element text-bottom length % SELECTOR TYPES SELECTOR PATTERNS auto Name Info Example Name Example z-index Universal Any element * { font: 10px Arial; } * any element Type Any element h1 { text-decoration: underline; } UNITS of that type E an element of type E MEASUREMENT Grouping Multiple h1, h2, h3 { font-family: Verdana; } E[foo] an E element with a "foo" attribute elements of % percentage different an E element whose "foo" attribute value is exactly E[foo="bar"] types equal to "bar" cm centimeter Class Multiple .sampleclass { text-decoration: E[foo~="bar"] an E element whose "foo" attribute value is a list of elements of underline; } space-separated values, one of which is exactly em 1em = current font size of current different equal to "bar" element types when you don’t E an E element whose "hreflang" attribute has a ex 1ex = ~1/2 current size of current want to affect [hreflang|="en"] hyphen-separated list of values beginning (from the element all instances left) with "en" inch E:first-child an E element, first child of its parent in Id A single #sampleid { text-decoration: element type underline; } millimeter E:link an E element being the source anchor of a hyperlink mm when you E:visited of which the target is not yet visited (:link) or don’t want to affect all already visited (:visited) pc pica (= 12 points) instances of E:active an E element during certain user actions pt point (= 1/72 inch) E:hover Descendant An element #gallery h1 { text-decoration: E:focus px pixel that is below underline; } (in the E:lang(fr) an element of type E in language "fr" (the document document language specifies how language is COLORS determined) tree) another element—no Color name Red, blue, green, dark green matter how E::first-line the first formatted line of an E element many levels rgb(x,y,z) Red = rgb(255,0,0) below E::first-letter the first formatted letter of an E element rgb(x%,y%,z%) Red = rgb(100%,0,0) Child An element #title > p { font-weight: bold; } E::before generated content before an E element that is directly below #rrggbb Red = #ff0000 (or shorthand = (in the E::after generated content after an E element #f00) document tree) another E.warning an E element whose class is "warning" (the document language specifies how class is determined). Sibling All elements h1 + p { font-style: italic; } of a type that E#myid an E element with ID equal to "myid". share the same parent EF an F element descendant of an E element Attribute An element option[selected] { color: #ff0000; } with that input[type="pass"] { color: #ccc; } E>F an F element child of an E element matches the img[src="sm.gif"] { border: 1px solid attribute #000; } E+F an F element immediately preceded by an E listed a[rel~="next"] { color: #fff; } element *[lang|="en"] { color : red; } http://www.veign.com Part Number: QRG0007 ©2008 Veign, All Rights Reserved