Scribd
Upload
37 views

CSS Note

This document provides a summary of CSS properties grouped into categories like font styling, text styling, background, display, and dimensions. It includes the property name, possible values, and links to video sources for each category. CSS3 properties like border radius, box shadow, gradients, and filters are also summarized with example values and video links.

Uploaded by

KOCENG DRAWING
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
37 views

CSS Note

This document provides a summary of CSS properties grouped into categories like font styling, text styling, background, display, and dimensions. It includes the property name, possible values, and links to video sources for each category. CSS3 properties like border radius, box shadow, gradients, and filters are also summarized with example values and video links.

Uploaded by

KOCENG DRAWING
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

BASIC

KATEGORY PROPERTYS VALUES SOURCE


font-family family name, generic family https://youtu.be/nPHed3_oPvY

xx-small | x-
small | small | medium | large | x-
font-size large | xx-
large | smaller | larger | length  
| percentage  | initial | inherit

normal | bold | bolder | lighter | 
Font Styling font-weight
100 | 200 | 300 | 400 | 500 | 600 |
 700 | 800 | 900 | initial | inheri
t
normal | small-
font-variant
caps | initial | inherit
normal | italic | oblique | initial
font-style
 | inherit
length  | percentage  | number  | nor
line-height
mal | initial | inherit

color color | initial | inherit https://youtu.be/xih8giA7S3Q


left | right | center | justify | i
text-align
nitial | inherit
text-indent length | percentage | initial | inherit

none | underline | overline | line-
Text Styling text-decoration
through | blink | initial | inherit

capitalize | lowercase | none | upp
text-transform
ercase | initial | inherit
letter-spacing length | normal | initial | inherit
word-spacing length | normal | initial | inherit

color  | transparent | initial | in
background-color https://youtu.be/zm-HPYS_ELU
herit
background-image url | none | initial | inherit

percentage | length | left | cente
Background  background-position
r | right | initial | inherit

repeat | repeat-x | repeat-y | no-
background-repeat
repeat | initial | inherit

STYLING
KATEGORY PROPERTYS VALUES SOURCE
Display Inline https://youtu.be/VPaIdiPvWQM
Display Inline-block
Block
 
length  | percentage  | auto | initi
width https://youtu.be/VkUSH3SIH0g
al | inherit
length  | percentage  | auto | initi
Dimensi height
al | inherit
auto | hidden | scroll | visible | 
overflow
initial | inherit

length  | percentage  | auto | initi


margin-top https://youtu.be/Ld_TKKhsL9M.
al | inherit
length  | percentage  | auto | initi
margin-right
al | inherit
length  | percentage  | auto | initi
margin-bottom
al | inherit
length  | percentage  | auto | initi
Margin-left
al | inherit
length  | percentage  | auto | initi
Margin
al | inherit
length  | percentage  | auto | initi
Padding-top https://youtu.be/s2BB3v3j5VA
al | inherit
length  | percentage  | auto | initi
Padding-right
al | inherit
length  | percentage  | auto | initi
Padding-buttom
al | inherit
Block model length  | percentage  | auto | initi
Padding-left
al | inherit
length  | percentage  | auto | initi
Padding
al | inherit
length  | percentage  | auto | initi
Border-top
al | inherit
length  | percentage  | auto | initi
Border-right
al | inherit
length  | percentage  | auto | initi
Border-bottom
al | inherit
length  | percentage  | auto | initi
Border-left
al | inherit
length  | percentage  | auto | initi
Border
al | inherit
content-box | padding-box | border-
Box-sizing
box | initial | inherit
 
Float Float left | right | none | initial | inherit https://youtu.be/yW7bpjrq7o4

 
Position Static https://youtu.be/qCPrNyW3XFg
Relative
Position Absolute https://youtu.be/ENooU6dnzoQ
Fixed

x-index https://youtu.be/mvLhlt_JPdI

CSS 3
KATEGORY PROPERTYS VALUES SOURCE
border-radius [ length | percentage ] 1 to 4 values https://youtu.be/3xbW5YHln78
border-top-left-radius length | percentage
Border Radius border-top-right-radius length | percentage
border-bottom-right-radius length | percentage
border-bottom-left-radius length | percentage
Opacity opacity alphavalue | initial | inherit https://youtu.be/i9uw6ajdNwI
offset-x offset-y blur-
box-shadow https://youtu.be/RBUHmAL2-os
radius spread radius color
inset offset-x offset-y blur-
https://youtu.be/ck5aAm1LK40
radius spread radius color
Box Shadow offset-x offset-y blur-
radius spread radius color,  
offset-x offset-y blur-
radius spread radius color, n
rgba() https://youtu.be/3xtGu46cyKo
Color Alpha hsla()
offset-x  offset-y  blur-
Text Shadow text-shadow
radius  color
https://youtu.be/Cm--989G9OQ
linear-gradient() https://youtu.be/7nyO5BcJjio
Gradien radial-gradient() https://youtu.be/qfw2EczowX4
Font Face >@font-facef https://youtu.be/MR491XQn5NQ

Web Font Generator  https://youtu.be/CP49khK4TdY

Vendor Prefix https://youtu.be/aAwDhYmn5Q0
blur (px)
brightness (alphavalue | %)
contrast (alphavalue | %)
saturate (alphavalue | %)
grayscale (alphavalue | %)
Filter filter
sepia (alphavalue | %)
https://youtu.be/HvikjBA5jMc
hue-rotate(deg)
invert(alphavalue | %)
opacity(alphavalue | %)
drop-shadow(sama seperti box-shadow)

scale (angka), scaleX(angka), scaleY(angka)


rotate(deg), rotateX(deg), rotateY(deg)
Transform transform
translate(px), translateX(px), translate(px)
https://youtu.be/aSEwsgZCvxs

skew(deg), skewX (deg), skewy (deg)


https://youtu.be/sYbs7VHhSbY
Transition https://youtu.be/TZEQVkRyQgk
https://youtu.be/CCHoeJEbt-c
Amination

ADVANCED DISPLAY
KATEGORY PROPERTYS VALUES SOURCE

row | row-
flex-direction https://youtu.be/-J372iDFU8Y
reverse | column | column-reverse 

flex-wrap nowrap | wrap | wrap-reverse
flex-start | flex-
end | center | space-
justify-content
between | space-around | space-
evenly
baseline | center | flex-
Flex Box align-items
start | flex-end | stretc
center | flex-start | flex-
align-content end | space-between | space-
around | stretch

order integer
flex-grow/flex number
auto | baseline | center | flex-
align-self
start | flex-end | stretch

grid-template-columns track-size, n | track-name track-size, n m https://youtu.be/n6xAhPx8GBs


grid-template-rows track-size, n | track-name track-size, n m
grid-auto-columns track-size
grid-auto-rows track-size
grid-auto-flow row | column | row dense | column dense
grid-template-areas nama-area, n
grid-template-areas grid-template-rows / grid-
grid-template https://youtu.be/M_kV_QypVMc
template-columns
grid-column-gap | column-gap
grid-row-gap | row-gap
grid-gap | gap
grid shorthand
justify-items start | end | center | stretch https://youtu.be/ehgYlyAFcYs
align-items start | end | center | stretch
place-items align-items justify-items
flex-start | flex-
end | center | space-
justify-content
between | space-around | space-
evenly
center | flex-start | flex-
Grid align-content end | space-between | space-
around | stretch
place-content justify-content align-content

nomor | nama | span nomor | span 
grid-column-start https://youtu.be/dQlPlB8Jje0
nama | auto
nomor | nama | span nomor | span 
grid-column-end
nama | auto
nomor | nama | span nomor | span 
grid-row-start
nama | auto
nomor | nama | span nomor | span 
grid-row-end
nama | auto
start-line / end-line | start-line 
grid-column
/ span value
start-line / end-line | start-line 
grid-row
/ span value
name | row-start / column-start / 
grid-area
row-end / start-end
justify-self start | end | center | stretch
align-self start | end | center | stretch
place-self align-self justify-self

repeat() https://youtu.be/IDp118rc3I8
Special Keywords and  min-content | max-content
Functions  auto-fill | auto-fit
minmax

You might also like