Hostinger css3 cheatsheet

Hostinger css3 cheatsheet

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