ULTIMATE
www.codingtouch.in
Background
background-image
background-position
url | gradient | none
top left | top center | top
right | center left | center
center | center right |
bottom left | bottom center
| bottom right | x-%/px |
y-%/px
background-size
repeat | repea-x/y |
no-repeat
background-origin
border-box | padding-box
| content-box
background-clip
border-box | padding-box
| content-box | no-clip
background-color
color | transparent
background-attachment
repeat | repea-x/y |
no-repeat
background-size
auto | cover | contain | %
Border
border-width
thin | meduim | thick
length
border-style
none | hidden | dotted |
dashed | solid | double |
groove | ridge | inset |
outset
border-color
color name | hex value |
rgb value
border-image
image | none
border-collapse
collapse | separate
border-radius
length
www.codingtouch.in
Box Model
float
left | right | none
overflow-style
auto | marque-line |
marque-block
height
auto | px value | %
width
auto | px value | %
margin
auto | px value | %
padding
auto | px value | %
max-height
auto | px value | %
max-width
auto | px value | %
overflow
visible | inline | scroll | auto
| no-display | no-conten |
overflow-x/y
display
none | inline | inline-block
inline-flex | inline-grid |
block | table | compact |
content
rotation
angle
visibility
visible | hidden |
collapse
clear
left | right | both | none
Font
font-style
normal | italice | oblique |
inherit
font-family
any font | emoji | math |
inherit | initial | unset
font-size
xx-small | x-small | small |
medium | large | x-large |
inherit | px value | %
font-weight
normal | bold | 100 200 ....
900 | inherit
www.codingtouch.in
Column
column-count
auto | number
column-fill
auto | balace
column-rule-width
thin | medium | thik
column-rule-style
border-style
column-width
auto | length
column-span
1 | al
Text
direction
ltr | rtl | inherit
letter-spacing
normal | [start | end |
endedge]
text-outline
none | color | length
none | underline | blink |
overline | line-through
text-decoation
none | color | length
text-shadow
normal | pre | nowrap |
pre-wrap | pre-line
white-space
start | end | left | right |
center | justify
text-align
length | %
text-indent
none | capatalize |
uppercase | lowercase
text-transform
normal | px | %
word-spacing
normal | keep-all | loose |
break-strict | break-all
word-break
normal | nowrap
www.codingtouch.in
Color
Table
Transition
color
inherit | color
border-collapse
collapse | separate
opacity
inherit | number
table-layout
auto | fixed
empty-cells
show | hide
border-spacing
length length
caption-side
top | bottom | left |
rigth
transition-delay
time
transition-duration
time
transition-property
none | all
transition-timing-function
ease | linear | ease-in/out |
cubicBezier(n,n,n,n)
Lists
list-style
none | asterisks | box | check circle | diamond | disc |
hyphon | square | decimal | lower-roman | upper-roma
n | upper/lower-alpha | lower-greek | lower-latin |
www.codingtouch.in
Animation
UI
animation-delay
time
animation-duration
time
animation-direction
normal | alternate
animation-timing-function
ease | linear | ease-in/out |
cubicBezier(n,n,n,n)
animation-name
none | IDENT
cursor
auto | crosshair | default | pointer | move | e-resize |
text | wiat | help | url | ne-resize | n-resize | s-resize |
w-resize | sw-resize
Outline
Hyperlink
animation-direction
none | dotted | dashed |
solid | double | groove |
ridge | inset | outset
outilne-outset
inherit | length
outilne-width
thin | medium | thick
target-name
current | root | parent |
new | model | string
target-position
window | tab | none
target-position
above | behind | parent |
back
www.codingtouch.in
Positioning
3D/2D Transform
bottom
auto | % | length
right
auto | % | length
clip
shape | auto
z-index
auto | number
position
static | relative |
absolute | fixed
top
auto | % | length
left
auto | % | length
transform
none | matrix | matrix
3d | translate3d |
translateX/Y/Z | scale |
scale3d | scaleX/Y/Z |
rotate | rotate3d |
rotateX/Y/Z | skew |
skewX/Y/ | perspective
perspective
none | number
transform-style
flat | preserve-3d
transform/perspective-origin
www.codingtouch.in
Selectors
Name
Info
Example
Universal every elements. *{...}Html ele Any element. h1{...}
Group multiple elements. h1,h2,h3{...} multiple elements of different
types when you don’t wan to affect all instance of that type.
Class .classname{...} multiple elements of different
types when you want to
affect all instance of that type.
Id #idname{...} An element that is below another
element no matter how levels.
Descendant .a .b{...} An element that is directly below
another element.
Child .a > .b{...} All elements that share same
parent and elements are in same immediate sequence.
Adjacent
sibling .a + .b{...} All elements that share same
parent and elements are in same sequence (not neccessarily
-immediate). General
sibling .a ~ .b{...} An element that matches the
attribute listed.
Attribute E[select]{...} 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 an visited link :link an disabled element :disabled an enabled element :enable
an element that is checked :checked
an element that highlighted by user :selected
an element that is the n-th sibling :nth-child(n)
an element that is n-th sibling from last
:nth-last-child(n)
an element that is first sibling
:first-child
an element that is last sibling
:last-child
an element that is the only child
:only-child
an element that is nth sibling of its type
:nth-of-type(n)
an element that is first sibling of its type
:first-of-child
an element that is last sibling of its type
:last-of-child
an element that is only sibling of its type
:only-of-child
an element that has no child
:empty
root element within the document
a target element as specified by a target in a UR
:root :target
an element not represented by the argument ‘x’
