Css3 Cheat Sheet
Upcoming SlideShare
Loading in...5
×
 

Css3 Cheat Sheet

on

  • 1,121 views

this is a css cheat sheet Lundy gave me.

this is a css cheat sheet Lundy gave me.

Statistics

Views

Total Views
1,121
Views on SlideShare
1,114
Embed Views
7

Actions

Likes
3
Downloads
48
Comments
0

3 Embeds 7

http://andrewssandbox.com 4
http://www.linkedin.com 2
http://www.lmodules.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Css3 Cheat Sheet Css3 Cheat Sheet Document Transcript

  • Page 1 of 5 Quick Reference Guide FREE Cascading Style Sheets (CSS 3) BACKGROUND BORDER BOX MODEL background background-image border-top border-top-width float left | right | none background-position border-style background-size border-color height auto background-repeat length background-attachment border-top-color border-color % background-origin border-top-style border-style max-height none background-clip length background-color border-top-width thin | medium | thick % length background-attachment scroll | fixed max-width none border-width thin | medium | thick length background-break bounding-box | each-box | length % continuous border-radius border-top-right-radius min-height none | inherit background-clip length border-bottom-right-radius length % border-bottom-left-radius % border-box | padding-box | border-top-left-radius content-box | no-clip min-width none | inherit border-top-right-radius length length background-color color transparent % border-bottom-right-radius length background-image url width auto border-bottom-left-radius length % none length background-origin border-box | padding-box | border-top-left-radius length content-box margin margin-top box-shadow inset || [ length, length, margin-right background-position top left | top center | top length, length || <color> ] margin-bottom right | center left | center none margin-left center | center right | border-style none | hidden | dotted | margin-bottom auto bottom left | bottom center dashed | solid | double | length | bottom right groove | ridge | inset | % x-% y-% outset x-pos y-pos margin-left auto FONT length background-repeat repeat | repeat-x | repeat- y | no-repeat % font font-style font-variant margin-right auto background-size length font-weight length % font-size/line-height % auto | cover | contain font-family caption | icon | menu | margin-top auto BORDER message-box | small- length border border-width caption | status-bar % border-style font-family family-name padding padding-top border-color generic-family padding-right border-break border-width inherit padding-bottom border-style padding-left color font-size xx-small | x-small | small | medium | large | x-large | padding-bottom length close xx-large | smaller | larger | % border-bottom border-bottom-width inherit length padding-left length border-style border-color % % font-size-adjust none| inherit padding-right length border-bottom-color border-color number % border-bottom-style border-style padding-top length font-stretch normal | wider | narrower | ultra-condensed | extra- % border-bottom-width thin | medium | thick condensed | condensed | length marquee-direction forward | reverse semi-condensed | semi- border-collapse collapse | separate expanded | expanded | marquee-loop infinite extra-expanded | ultra- number border-color color expanded | inherit marquee-play-count infinite border-image image font-style normal | italic | oblique | integer [ number / % inherit border-width marquee-speed slow | normal | fast stretch | repeat | round ] font-variant normal | small-caps | inherit none marquee-style scroll | slide | alternate font-weight normal | bold | bolder | border-left border-left-width lighter | 100 | 200 | 300 | overflow visible | hidden | scroll | border-style 400 | 500 | 600 | 700 | 800 auto | no-display | no- border-color | 900 | inherit content overflow-x border-left-color border-color BOX MODEL overflow-y border-left-style border-style clear left | right | both | none overflow-style auto | marquee-line | mar- quee-block border-left-width thin | medium | thick display none | inline | block | inline- length block | list-item | run-in | overflow-x visible | hidden | scroll | compact | table | inline- auto | no-display | no- border-right border-right-width table | table-row-group | content border-style table-header-group | table- border-color footer-group | table-row | overflow-y visible | hidden | scroll | table-column-group | table- auto | no-display | no- border-right-color border-color column | table-cell | table- content caption | ruby | ruby-base | border-right-style border-style rotation angle ruby-text | ruby-base-group border-right-width thin | medium | thick | ruby-text-group rotation-point position (paired value off- length set) visibility visible | hidden | collapse http://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved
  • Page 2 of 5 Quick Reference Guide FREE Cascading Style Sheets (CSS 3) TEXT TEMPLATE LAYOUT SPEECH direction ltr | rtl | inherit box-align start | end | center | base- voice-family inherit | [ <specific-voice, age, generic-voice, num- hanging-punctuation none | [ start | end | end- ber> ] edge ] box-direction normal | reverse voice-rate x-slow | slow | medium | letter-spacing normal box-flex number fast | x-fast | inherit length % % box-flex-group integer voice-pitch x-low | low | medium | high punctuation-trim none | [start | end | adja- box-lines single | multiple | x-high | inherit cent] number box-orient horizontal | vertical | inline- text-align start | end | left | right | axis | block-axis % center | justify voice-pitch-range x-low | low | medium | high box-pack start | end | center | justify text-align-last start | end | left | right | | x-high | inherit center | justify box-sizing content-box | padding-box | number border-box | margin-box text-decoration none | underline | overline | voice-stress strong | moderate | none | line-through | blink tab-side top | bottom | left | right reduced | inherit text-emphasis none | [ [ accent | dot | circle TABLE voice-volume silent | x-soft | soft | me- | disc] [ before | after ]? ] dium | loud | x-loud | inherit border-collapse collapse | separate number text-indent length % % border-spacing length length LIST & MARKERS text-justify auto | inter-word | inter- caption-side top | bottom | left | right ideograph | inter-cluster | list-style list-style-type distribute | kashida | tibetan empty-cells show | hide list-style-position list-style-image text-outline none table-layout auto | fixed color list-style-image none length SPEECH url text-shadow none cue cue-before list-style-position Inside | outside color cue-after length list-style-type none | asterisks | box | cue-before uri [ silent | x-soft | soft | check | circle | diamond | text-transform none | capitalize | uppercase medium | loud | x-loud] | disc | hyphen | square | | lowercase none | inherit ] decimal | decimal-leading- number zero | lower-roman | upper- text-wrap normal | unrestricted | none % roman | lower-alpha | up- | suppress per-alpha | lower-greek | cue-after uri [ silent | x-soft | soft | lower-latin | upper-latin | unicode-bidi normal | embed | bidi- medium | loud | x-loud] | hebrew | armenian | geor- override none | inherit ] gian | cjk-ideographic | number hiragana | katakana | hira- white-space normal | pre | nowrap | pre- % gana-iroha | katakana-iroha wrap | pre-line | footnotes mark mark-before white-space-collapse preserve | collapse | pre- mark-after marker-offset auto serve-breaks | discard length mark-before string word-break normal | keep-all | loose | break-strict | break-all ANIMATIONS mark-after string word-spacing normal animation animation-name length pause pause-before animation-duration % pause-after animation-timing-function animation-delay word-wrap normal | break-word pause-before none | x-weak | weak | animation-iteration-count medium | strong | x-strong animation-direction COLUMN | inherit time animation-delay time column-count auto number pause-after none | x-weak | weak | animation-direction normal | alternate medium | strong | x-strong column-fill auto | balance | inherit animation-duration time time column-gap normal animation-iteration-count inherit length phonemes string number column-rule column-rule-width rest rest-before animation-name none | IDENT column-rule-style rest-after column-rule-color animation-play-state running | paused rest-before none | x-weak | weak | column-rule-color color medium | strong | x-strong animation-timing-function ease | linear | ease-in | | inherit ease-out | ease-in-out | column-rule-style border-style time cubic-Bezier (number, num- ber, number, number) column-rule-width thin | medium | thick rest-after none | x-weak | weak | length medium | strong | x-strong TRANSITIONS | inherit columns column-width transition transition-property time column-count transition-duration speak none | normal | spell-out | transition-timing-function column-span 1 | all transition-delay digits | literal-punctuation | column-width auto no-punctuation | inherit transition-delay time length voice-balance left | center | right | left- transition-duration time COLOR wards | rightwards | inherit number transition-property none | all color inherit color voice-duration time transition-timing-function ease | linear | ease-in | ease-out | ease-in-out | opacity inherit cubic-Bezier (number, num- number ber, number, number) http://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved
  • Page 3 of 5 Quick Reference Guide FREE Cascading Style Sheets (CSS 3) GRID POSITIONING GENERATED CONTENT LINE BOX grid-columns none | inherit hyphenate-after auto line-height normal [ length percentage relative integer number length ] length hyphenate-before auto % grid-rows none | inherit integer [ length percentage relative line-stacking line-stacking-strategy length ] hyphenate-character auto line-stacking-ruby string line-stacking-shift OUTLINE hyphenate-lines no-limit line-stacking-strategy inline-line-height | block- outline outline-color integer line-height | max-height | outline-style grid-height outline-width hyphenate-resource none uri line-stacking-ruby exclude-ruby | include-ruby outline-color color invert hyphens none | manual | auto line-stacking-shift consider-shifts | disregard- image-resolution normal | auto shifts outline-offset inherit length dpi text-height auto | font-size | text-size | marks [ crop || cross ] | none max-size outline-style None | dotted | dashed | solid | double | groove | vertical-align Baseline | sub | super | top move-to normal | here ridge | inset | outset | text-top | middle | bottom identifier | text-bottom outline-width thin | medium | thick length page-policy start | first | last length % quotes none 3D / 2D TRANSFORM HYPERLINK string string string string backface-visibility visible | hidden target target-name string-set identifier content-list target-new perspective none target-position number text-replace none [<string> <string>]+ target-name current | root | parent | new perspective-origin [ [ [ percentage> | | modal <length> | left | center | LINE BOX string right ] [ <percentage> | <length> | top | center | target-new window | tab | none bottom ]? ] <length> ] | alignment-adjust auto | baseline | before- [ [ [ left | center | right ] || edge | text-before-edge | target-position above | behind | front | [ top | center | bottom ] ] middle | central | after-edge back <length> ] | text-after-edge | ideo- graphic | alphabetic | hang- POSITIONING transform none | matrix | matrix3d | ing | mathematical translate3d | translateX | length bottom auto translateY | translateZ | % % scale | scale3d | scaleX | length scaleY | scaleZ | rotate | alignment-baseline baseline | use-script | be- rotate3d | rotateX | rotateY fore-edge | text-before- clip shape | rotateZ | skewX | skewY | edge | after-edge | text- auto skew | perspective after-edge | central | middle | ideographic | alphabetic | left auto transform-origin [ [ [ <percentage> | hanging | mathematical % <length> | left | center | length right ] [ <percentage> | baseline-shift baseline | sub | super length position static | relative | absolute | <length> | top | center | fixed bottom ]? ] <length> ] | % [ [ [ left | center | right ] || right auto dominant-baseline auto | use-script | no- [ top | center | bottom ] ] % change | reset-size | alpha- <length> ] length betic | hanging | ideo- transform-style flat | preserve-3d graphic | mathematical | top auto central | middle | text-after- % GENERATED CONTENT edge | text-before-edge length bookmark-label content drop-initial-after-align alignment-baseline z-index auto attr number drop-initial-after-adjust central | middle | after-edge string | text-after-edge | ideo- RUBY bookmark-level none graphic | alphabetic | integer mathematical ruby-align auto | start | left | center | length end | right | distribute-letter bookmark-target self % | distribute-space | line- uri edge attr drop-initial-before-align caps-height alignment-baseline ruby-overhang auto | start | end | none border-length auto length drop-initial-before-adjust before-edge | text-before- ruby-position before | after | right | inline edge | central | middle | content normal | none | inhibit hanging | mathematical ruby-span attr(x) | none uri length % counter-increment none identifier number drop-initial-value initial integer counter-reset none identifier number drop-initial-size auto integer crop auto % shape line display normal | none | list-item inline-box-align initial | last integer float-offset length length http://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved
  • Page 4 of 5 Quick Reference Guide FREE Cascading Style Sheets (CSS 3) PAGED MEDIA fit fill | hidden | meet | slice fit-position [top | center | bottom] || [left | center | right] length % image-orientation auto angle orphans integer page auto identifier page-break-after auto | always | avoid | left | right page-break-before auto | always | avoid | left | right page-break-inside auto | avoid size auto | landscape | portrait length windows integer UI appearance normal | inherit | [icon | window | desktop | work- space | document | tooltip | dialog | button | push- button | hyperlink | radio- button | checkbox | menu- item | tab | menu | menubar | pull-down-menu | pop-up-menu | list-menu | radio-group | checkbox- group | outline-tree | range | field | combo-box | signa- ture | password] cursor auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n- resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help url icon auto | inherit url nav-index auto | inherit number nav-up auto | inherit <id> [ current | root | <target-name> ] nav-right auto | inherit <id> [ current | root | <target-name> ] nav-down auto | inherit <id> [ current | root | <target-name> ] nav-left auto | inherit <id> [ current | root | <target-name> ] resize none | both | horizontal | vertical | inherit • 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 • 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. border-width http://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved
  • Page 5 of 5 Quick Reference Guide FREE Cascading Style Sheets (CSS 3) PSEUDO-CLASS UNITS SELECTOR TYPES :active an activated element ABSOLUTE MEASUREMENT Name Info Example :focus an element while the % percentage Universal Any element * { font: 10px Arial; } element has focus cm centimeter Type Any element of h1 { text-decoration: :visited a visited link that type underline; } in inch :hover an element when you mouse Grouping Multiple h1, h2, h3 { font-family: over it mm millimeter elements of Verdana; } different types :link an unvisited link pc pica (1p = 12 points) Class Multiple .sampleclass { text- :disabled an element while the elements of decoration: underline; } element is disabled pt point (1pt = 1/72 inch) different types RELATIVE MEASUREMENT when you don’t :enabled an element while the want to affect element is enabled all instances of ch width of the "0" glyph found in :checked an element (form element the font for the font size used to that type control) that is checked render Id A single #sampleid { text- :selection an element that is currently em 1em = current font size of element type decoration: underline; } selected of highlighted by current element when you don’t the user want to affect ex x-height of the element's font all instances of :lang Allows the author to specify that type gd the grid defined by 'layout-grid' a language to use in a specified element Descendant An element that #gallery h1 { text- px pixel of the viewing device is below (in the decoration: underline; } :nth-child(n) an element that is the n-th rem the font size of the root element document tree) sibling another vh the viewport's height element—no :nth-last-child(n) an element that is the n-th matter how sibling counting from the vw the viewport's width many levels last sibling below vm viewport's height or width, :first-child an element that is the first whichever is smaller of the two Child An element that #title > p { font-weight: sibling is directly below bold; } ANGLES (in the :last-child an element that is the last document tree) sibling deg degrees another grad grads element :only-child an element that is the only child Adjacent All elements h1 + p { font-style: rad radians Sibling that share the italic; } :nth-of-type(n) an element that is the n-th turn turns same parent sibling of its type. and elements TIME are in the same :nth-last-of-type(n) an element that is the n-th sibling of its type counting immediate ms milli-seconds from the last sibling sequence s seconds :last-of-type an element that is the first General All elements h1 ~ p { font-style: sibling of its type FREQUENCY Sibling that share the italic; } same parent :first-of-type an element that is the last Hz hertz and elements sibling of its type are in the same kHz kilo-hertz sequence (not :only-of-type an element that is the only necessarily child of that type COLORS immediate) :empty an element that has no color name red, blue, green, dark green Attribute An element with E[selected] - att whatever children that matches the value rgb(x,y,z) red = rgb(255,0,0) the attribute E[att="val"] - att with a :root root element within the rgb(x%,y%,z%) red = rgb(100%,0,0) listed specific value document E[rel~="next"] - att with :not(x) an element not represented rgba(x,y,z, alpha) red = rgba(255,0,0) a value is a whitespace by the argument ‘x’ separated list #rrggbb red = #ff0000 (or shorthand = *[lang|="en"] - att value :target a target element as specified #f00) either being exactly "val" by a target in a URI or beginning with "val" hsl(hue, saturation, red = hsl(0, 100%, 50%) immediately followed by PSEUDO-ELEMENT lightness) "-" E[att^="val"] - att value ::first-letter Adds special style to the first hsla(hue, saturation, red = hsl(0, 100%, 50%) that begins with the prefix letter of a text lightness, alpha) "val" ::first-line Adds special style to the first flavor An accent color (typically chosen E[att$="val"] - att value line of a text by the user) to customize the that end with the suffix user interface of the user agent "val" ::before Inserts some content before itsel E[att*="val"] - att value an element contains at least one currentColor computed value of the instance of the substring ::after Inserts some content after an 'currentColor' keyword is the "val" element computed value of the 'color' property http://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved