ULTIMATE

www.codingtouch.in
 Background
background-image background-origin
url | gradient | none border-box | padding-box
background-position | content-box
top left | top center | top background-clip
right | center left | center border-box | padding-box
center | center right | | content-box | no-clip
bottom left | bottom center background-color
| bottom right | x-%/px | color | transparent
y-%/px
background-attachment
repeat | repea-x/y |
background-size no-repeat
repeat | repea-x/y | background-size
no-repeat auto | cover | contain | %

Border
border-width border-color
thin | meduim | thick color name | hex value |
length rgb value
border-style border-collapse
none | hidden | dotted | collapse | separate
dashed | solid | double |
border-radius
groove | ridge | inset |
length
outset
border-image
image | none

www.codingtouch.in
 Box Model
float overflow-style
left | right | none auto | marque-line |
height marque-block
auto | px value | % display
none | inline | inline-block
width
inline-flex | inline-grid |
auto | px value | %
block | table | compact |
margin content
auto | px value | % rotation
padding angle
auto | px value | %
visibility
max-height visible | hidden |
auto | px value | % collapse
max-width clear
auto | px value | % left | right | both | none
overflow
visible | inline | scroll | auto
| no-display | no-conten |
overflow-x/y

Font
font-style font-size
normal | italice | oblique | xx-small | x-small | small |
inherit medium | large | x-large |
inherit | px value | %
font-family
any font | emoji | math | font-weight
inherit | initial | unset normal | bold | 100 200 ....
900 | inherit

www.codingtouch.in
column-count
Column column-rule-style
auto | number border-style
column-fill column-width
auto | balace auto | length
column-rule-width column-span
thin | medium | thik 1 | al

Text
direction text-indent
ltr | rtl | inherit length | %
letter-spacing text-transform
normal | [start | end | none | capatalize |
endedge] uppercase | lowercase
text-outline word-spacing
none | color | length normal | px | %
text-decoation word-break
none | underline | blink | normal | keep-all | loose |
overline | line-through break-strict | break-all
text-shadow word-wrap
none | color | length normal | nowrap
white-space
normal | pre | nowrap |
pre-wrap | pre-line
text-align
start | end | left | right |
center | justify

www.codingtouch.in
 Color
color opacity
inherit | color inherit | number

Table
table-layout border-spacing
auto | fixed length length
border-collapse caption-side
collapse | separate top | bottom | left |
rigth
empty-cells
show | hide

Transition
transition-delay transition-property
time none | all
transition-duration transition-timing-function
time ease | linear | ease-in/out |
cubicBezier(n,n,n,n)

list-style
Lists
none | asterisks | box | check circle | diamond | disc |
hyphon | square | decimal | lower-roman | upper-roma
n | upper/lower-alpha | lower-greek | lower-latin |
upper-latin

www.codingtouch.in
 Animation
animation-name animation-direction
none | IDENT normal | alternate
animation-delay animation-timing-function
time ease | linear | ease-in/out |
animation-duration cubicBezier(n,n,n,n)

UI
time

cursor
auto | crosshair | default | pointer | move | e-resize |
text | wiat | help | url | ne-resize | n-resize | s-resize |
w-resize | sw-resize

outilne-outset
Outline animation-direction
inherit | length none | dotted | dashed |
outilne-width solid | double | groove |
thin | medium | thick ridge | inset | outset

Hyperlink target-position
target-name
current | root | parent | window | tab | none
new | model | string target-position
above | behind | parent |
back

www.codingtouch.in
bottom
Positioning top
auto | % | length auto | % | length
right left
auto | % | length auto | % | length
clip position
shape | auto static | relative |
z-index absolute | fixed
auto | number

3D/2D Transform
transform perspective
none | matrix | matrix none | number
3d | translate3d | transform-style
translateX/Y/Z | scale | flat | preserve-3d
scale3d | scaleX/Y/Z |
rotate | rotate3d |
rotateX/Y/Z | skew |
skewX/Y/ | perspective
transform/perspective-origin
% | length | left | center | right | top | bottom

www.codingtouch.in
 Selectors
Name Info Example
Universal every elements. *{.......}

Html ele Any element. h1{.......}

Group multiple elements. h1,h2,h3{.......}

Class multiple elements of different .classname{.......}

types when you don’t wan to
affect all instance of that type.
Id multiple elements of different #idname{.......}
types when you want to
affect all instance of that type.

Descendant An element that is below another .a .b{.......}

element no matter how levels.
Child An element that is directly below .a > .b{.......}
another element.

Adjacent All elements that share same .a + .b{.......}

sibling parent and elements are in same
immediate sequence.

General All elements that share same .a ~ .b{.......}

sibling parent and elements are in same
sequence (not neccessarily -
immediate).

Attribute An element that matches the E[select]{.......}

attribute listed. E[select=”val”]
{.......}

www.codingtouch.in
 Pseudo-class
Name Info
:active an active element.

:focus an focused alament

:hover an element when mouse over it
:link an visited link
:disabled an disabled element
:enable an enabled element
:checked an element that is checked
:selected an element that highlighted by user
:nth-child(n) an element that is the n-th sibling
:nth-last-child(n) an element that is n-th sibling from last
:first-child an element that is first sibling
:last-child an element that is last sibling
:only-child an element that is the only child
:nth-of-type(n) an element that is nth sibling of its type
:first-of-child an element that is first sibling of its type
:last-of-child an element that is last sibling of its type
:only-of-child an element that is only sibling of its type
:empty an element that has no child
:root root element within the document
:target a target element as specified by a target in a UR
:not(x) an element not represented by the argument ‘x’

www.codingtouch.in