css The Ultimate CSS ets | AVES) slo [Including CSS3 Tags] With billions of websites and counting, yours needs to stand out. CSS is the style skeet lariguage used to make your website one-in-a-billion. Ready to learn and utilize if? Here’s a cheat sheet to. help you temember all the different elements at your disposal. ca saBACKGROUNDS background background-image background-position background-size background-repeat background-attachment background-origin background-clip background-color background-break background-size length auto | cover | contain background-repeat repeat | repeat-x | repeat-y | no-repeat background-attachment scroll | fixed background-origin border-box | padding-box | content-box background-image url none background-position top left | top center | top right | center left | center center | center right | bottom left | bottom enter | bottom right xe YM X-pos y-pos background-clip length border-box | padding-box | content-box | no-clip background-color color transparent background-break bounding box | each-box | continuousBORDER border border-width border-style border-color border-width thin | medium | thick | length border-style none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset border-color color border-bottom border-bottom-width border-style border-color border-left border-left-width border-style border-color border-teft-style border-style border-top border-top-width border-style border-color border-top-color border-color border-top-style border-style box-shadow inset length, length, length. length | none border-collapse collapse | separate border-right-width thin | medium | thick | length border-right-color border-color border-image image [number / % 1 border-width stretch | repeat | round none border-top-width thin | medium | thick | length border-break border-width border-style color close border-bottom-color border-color border-bottom-style border-style border-left-color border-color border-left-width thin | medium | thick | length border-right-style border-style border-right border-right-width border-style border-color border-radius border-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-top-left-radius border-top-right-radius length border-bottom-right-radius length border-bottom-left-radius lengthfloat left | right | none height auto | length | % max-height none | length | % max-width none | length | % min-height none | length | % min-height none | length | % width auto | % | length padding padding-top padding-right padding-bottom padding-left padding-bottom length padding-left length % padding-right length padding-top length % display none inline block inline-block list-item run-in compact table inline-table table-row-group BOX MODEL table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption ruby ruby-base ruby-text ruby-base-group ruby-text-group, rotation angle rotation-point position (paired value off-set) margin margin-top margin-right margin-bottom margin-left margin-bottom auto | length | % margin-left auto | height | % margin-right auto | height | % margin-top auto | length | % marquee-direction forward | reverse marquee-loop infinite integer marquee-speed slow | normal | fast marquee-style scroll | slide | alternate overflow visible | hidden | scroll overfow-style auto marquee-line marquee-block overflow-X visible hidden scroll auto no-display no-content visibility visible | hidden | collapse clear left right both none3D/2D TRANSFORM backface-visibility visible | hidden perspective none number perspective-origin % left | center | right top | center | bottom left | center | right top | center | bottom transform-style flat | preserve-3d transform none | matrix | matrix3d | translategd | tranlateX | translatey | translateZ | scale | scale3d | scaleX | scaleY | scaleZ | rotate | rotate3d | rotateX | rotateY | rotateZ | skewX | skew | skew | perspective transform-origin % left | center | right top | center | bottom left | center | right top | center | bottom GENERATED CONTENT bookmark-label content attr string bookmark-level none integer bookmark-target self url attr border-length self url attr content normal | none | inhibit | url hyphenate-lines no-limit integer hyphenate-resource none url hyphens none, manual. auto image-resolution marks normal | auto crop dpi cross hyphenate-before none auto move-to integer normal here hyphenate-charater aeOneR auto string Page-policy start | first | last counter-reset none quotes identifier number none crop string-set auto identifier shape content-list display text-replace normal | none | list-item none Wssi Saat lestring>] + length length hyphenate-after auto integer counter-increment none, identifier numberCOLUMN column-count column-rule auto column-rule-width number column-rule-style column-rule-color column-fill column-rule-style border-style auto | balance column-gap columns normal tength column-width dL I-¢ it column-rule-width = thin | medium | thick | length column-width i auto a length tall colors opacity inherit inherit color number grid-columns grid-rows none | inherit none | inherit [length percentage relative [length percentage relative length] length }PAGED MEDIA fit image-orientation page fill| hidden | meet | slice auto auto Giese angle indentifier top | center | bottom | left | center | right size auto | landscape | portrait page-break-after length auto | always | avoid | left | right length ; windows page-break-before % integer auto | always | avoid | left | right orphans page-break-inside integer auto | avoid snippets include: multi-border using a pseudo selector { property « value } shadowbax snippet ; : ' box-shadow [inset] horizontal Sestelarentaseekeet offset! [vertical offset! [blur #sidebar | position: relative: float: left; width: 100px, color: blue; font-size: 40% border-left: solid 2px blue: } font shorthand property to define all properties in one statement #selector { font italic bold 12px/30px georgia, serif (font size and family are required, but other values are set to default if left out) hover over/anchor snippets at active { color: red; } a‘ link { color: yellow; } a:visited { color: blue; } a:hover { color: green: } background color snipper #selector | background: #e3eae2; | radius] [optional spread radius} (color creative page layout snippet columns { column-count: §: column-gap: 20px: } text align snippet ta_L{ text-align: left: ] font weight snippet bold { font-weight bold: } snippet to align text with display and margin property center { text-align: center: margin: auto: display: block; } text decoration snippet no_td: hover { text-decoration none; } clear and float snippet clear { float: none; clear: both; }font font-style font-variant font-weight font-size/line-height font-family caption | icon | menu | message-box | small-caption | status-bar font-size-adjustment none | inherit number font-family normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded ultra-expanded inherit FONT font-style normal | italic | oblique | inherit font-variant normal | small-caps | inherit font-size xx-small, x-small small medium large large xx-large smaller larger inherit length font-weight normal | bold | bolder | tighter | 100 | 200 | 300 | 400| 500 | 600 | 700 | 800 | g00 | inheritLINE BOX alignment-adjust auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical length alignment-baseline baseline | ise-script | before-edge | text-before-edge | after-edge | text-after-edge | central | middle | ideographic | alphabetic | hanging | mathematical baseline-shift baseline | sub | super length % dominant-baseline auto | use-script | no-change | reset-size | alphabetic | hanging | ideographic | mathematical | central | middle | text-after-edge | text-before-edge drop-initial-after-align alignment-baseline inline-box-align initial | last integer line-height normal number length % line-stacking line-stacking-strategy line-stacking-ruby line-stacking-shift line-stacking-strategy inline-line-height | block-line-height | max-height | grid-height line-stacking-ruby exclude-ruby | include-ruby line-stacking-shift consider-shifts | disregard-shifts line-stacking line-stacking-strategy line-stacking-ruby line-stacking-shift text-height auto | font-size | text -size | max-size vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom length &LIST & MARKERS list-style decimal-teading-zero lower-roman list-style-type upper-roman list-style-position list-style-image pn list-style-image lower-greek tower-latin oe upper-tatin ut hebrew list-style-type armenian georgian pene cjk-ideographic asterisks Sars bee katakana check hiragana-iroha circle footnotes diamond disc marker-offset hyphen auto square a decimal ned animations ease-out ease-in-out cubic-bezier (number, number, number, number) animation-name animation-duration animation-timing-function animation-delay animation-delay animation-iteration-count animation-direction time aaaunaneniennve animation-iteration-count none | ident inherit number animation-duration ee ; animation-direction time normal | alternate animation-play-state ease linear running | paused ease-in y= y=HYPERLINK target target-new target-name window | tab | none target-new i target-position target-position above | behind | front | back target-name current | root | parent | new | model string bottom left auto auto length length top clip auto shape % auto length pi x-index right auto auto number length position static | relative | absolute | fixed ruby-align ruby-position auto | start | left | center | end | right | distribute-letter | distribute-space | line-edge ruby-overhang auto | start | end | none before | after | right | inline ruby-span attroo | noneactive focus hover Wink disabled enabled, ‘checked selection tang inth-childin) inth-tast-child(n) first-chile last-child ‘only-child inth-of-typetn) inth-tast-oftypetn) last-of-type first-of-type conly-of-type root rnotix) target PSEUDO-CLASS an activated element ‘an element while the element has focus an element when you mouse over i an unvsite tink an element while the elementis disabled an element while the elements enabled an element thats checked an element that is curently selected or highlighted by the user allows the author to specify a language to use ina specified element an element thats the n-th siting anelement thats the n-th sbting counting from the last siting {an element that is the frst sibling an element thats the lat sibting an element that i the only chitd {an eloment that the n-th sibling oF ts type an element that the n-th sibing of its type counting from the last sibling an element that isthe last sibling of its type {an element that isthe frst sling ofits type an element that is the only child ofits type emply an element that has no children root element within the document an element not represented by the argument a target element as specified by a target ina URSE Pe pica pt point Lita] kez UT first-letter first-line ‘before after percentage centimeter inch rmilimeter (ap «12 points) pt 4/72 inch) ANGLES degrees grads radians tums milliseconds seconds Kilo-hertz ‘adds special style to the frst letter of a text adds special style to the fst line of a text inserts some content before an element inserts some content after an element EU Width of the “0° glyph found in the font for the font size used to render 10m - current font size of currant element xcheight ofthe element’ font the grid defined by layout-gie piel of the viewing device the font size ofthe root element the font size ofthe root element the font size ofthe root element t's height or width, whichever is smaller ofthe two COLORS rgbixy2) rgb. y%2%) rgbatxyzalpha) ‘rrggbb st Aabor currentColor red, blue, green, dark green fed = rgbt255.0.0) red raptz00%.0.0) fed - rabaie55.0.00) red = ##f0000 (or shorthand - #f00) thue, saturation, ightness) red hsl(o, 100%. 50%) ‘an accent color (typically chosen by the user to customize the user interface of the user agent tse the font size ofthe root elementName Universal Type Grouping Class ld Descendant chi ‘Adjacent ibting General Sibling Atrbute outline ‘outline-color outlin: -style outline-width outline-offset inherit length STH Info ‘Any element ‘Any element of that type Multiple elements of diferent types, Multiple elements of diferent types when you dont want {0 affect all instances of that type A single element type when you don't want to affect al instances of that type ‘An element that is below in the document treo) another element - no matter how many levels below An element that s directly below (in the ‘document tree) another element Allelements that share the same parent and ‘elements are in the same immediate sequence Allelements that share the same parent and ‘elements are in the same sequence {not necessarily immediate) ‘An element that matches the attribute listed OUTLINE Example * Lfont 0px Arak} ht text-decoration’ undertine:| ‘es hx ha, ha { font-family: verdana: sampleClass [ text-decoration: underline: 1 HsamplelO { text-decoration: undertine: | ‘#gallery ha | text-decoration: underline; title > pI font-weight: bold: | harp font-style: italic} ha—p [font-style tale: Elselectedl - at whatever the value Elatte'val- att with a specific value Elrel-~'next| att with avalueisa whitespace separated lst langl'en - alt value either being exactly val or beginning with val immediately followed by ~ Elatt®val- att value that begins withthe prefix vat outline-style none | dotted | dashed | solid | double | groove | ridge | inset | outset outline-width thin medium. thick lengthcue cue-before cue- after mark mark-before mark-after mark-before string mark-after string voice-pitch-range X-low | low | medium | high | x-high | inherit number voice-stress strong | moderate | none | reduced | inherit, voice-volume silent | x-soft | soft | medium | loud | x-loud | inherit number % cue-after url silent x-soft soft medium loud x-loud none inherhit number % caption-side top | bottom | left | right rest rest-before rest-after SPEECH cue-before url | silent | x-soft | soft | medium | loud | x-loud | none | inherit pause pause-before pause-after pause-before none | x-weak | weak | medium | strong | x-strong | inherit time phonemes string voice-duration time voice-family inherit voice-rate x-slow slow medium fast x-fast inherit % voice-pitch x-low low medium high x-high inherit number rest-before none | x-weak | weak | medium | strong | x-strong | inherit time rest-after none | x-weak | weak | medium | strong | x-strong | inherit time speak none normal spell-out digits literal-punctuation no-punctuation inherit-numberTEMPLATE LAYOUT box-align box-flex-group start integer end center box-pack base start | end | center | justify box-direction box-sizing normal | reverse content-box ‘ padding-box Rann border-box single | multiple margin-box box-orient tab-side horizontal | verticle | inline-axis | top | bottom | left | right block-axis box-flex normal TABLE border-collapse table-layout collapse | separate auto | fixed empty-cells caption-side show | hide top | bottom | left | right border-spacing length lengthdirection ltr | rtl| inherit hanging-punctuation none | [start | end | end-edge letter spacing normal length % text-outline none color length unicode-bidi normal | embed | bidi-override white-space normal pre nowrap pre-wrap pre-line whit -space-collapse preserve | collapse | pre-serve-breaks | discard text-emphasis none accent | dot | circle | disc before | after ? text-indent length x text-justify auto inter-word inter-ideograph inter-cluster distribute kashida tibetan none | start | end | adjacent text-align start | end | left | right | center | justify text-align-last start | end | left | right | center | justify text-decoration none underline overtine tine-through blink word-break normal | keep-all| Loose | break-strict | break-all word-wrap normal length text-transform none capitalize uppercase lowercase text-wrap normal | unrestricted | none | suppress word-spacing normal length %TRANSITIONS transitions transitions-duration transitions-property time transitions-duration transition-timing-function tranaitions-property transitions-delay none | all transitions-delay time transition-timing-function ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier (number, number, number, number) appearance nav-index normal | inherit | icon | window | auto | inherit desktop | work-space | document | tooltip | dialog | number button | push-button | hyperlink | radio-button | checkbox | a menu-item | tab | menu | auto | inherit [current | root | menubar | pull-down-menu | pop-up-menu | list-menu | nav-right radio-group | checkbox-group | auto | inherit [current | root | outline-tree | range | field | combo-box | signature | nav-down Password] auto | inherit [current | root | cursor nav-left auto | crosshair | default | auto | inherit [current | root | pointer | move | e-resize | . neresize | nw-resize | n-resize | resize se-resize | sw-resize | swresize | none | both | horizontal | vertical s-resize | w-resize | text | wait | a | inherit wa > ATUL KUMAR Tmeees2e url icon auto | inherit url