Backgrounds
background
background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color
background-image
url
gradients
none
background-position
top left | top center | top right | center left | center center |
center right | bottom left | bottom center | bottom right
x-% y-%
x-pos y-pos
background-size
length
auto | cover | contain
background-repeat
repeat | repeat-x | repeat-y |
no-repeat
Prutor.ai - Beginner’s CSS Cheat Sheet
background-attachment
scroll | fixed | local
background-origin
border-box | padding-box | content-box
background-clip
border-box | padding-box | content-box
background-color
color
transparent
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
Prutor.ai - Beginner’s CSS Cheat Sheet
border-style
border-color
border-left-style
border-style
border-right-color
border-color
border-right-width
thin | medium | thick | length
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-top
border-top-width
border-style
border-color
Prutor.ai - Beginner’s CSS Cheat Sheet
border-top-color
border-color
border-top-style
border-style
box-shadow
inset || [ length, length, length, length || <color> ]
none
border-collapse
collapse | separate
border-image
image
[ number / % border-width stretch | repeat | round ]
none
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
Prutor.ai - Beginner’s CSS Cheat Sheet
Box Model
float
left | right | none
height
auto
length
max-height
none
length
max-width
none
length%
min-height
none
length
width
auto
length
margin
margin-top
margin-right
margin-bottom
margin-left
margin-bottom
Prutor.ai - Beginner’s CSS Cheat Sheet
auto
length
margin-left
auto
height
margin-right
auto
height
margin-top
auto
length
padding
padding-top
padding-right
padding-bottom
padding-left
padding-bottom
length
padding-left
length
padding-right
length
Prutor.ai - Beginner’s CSS Cheat Sheet
padding-top
length
display
none | inline | block | inline-block | flex | inline-flex | grid |
inline-grid | contents | list-item |run-in | compact | table |
inline-table | table-row-group | 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
Font
font
font-style
font-variant
font-weight
font-size/line-height
Prutor.ai - Beginner’s CSS Cheat Sheet
font-family
caption | icon | menu | messagebox | small-caption | status-bar
font-size-adjust
none | inherit
number
font-family
serif | sans-serif | Font Name
font-style
normal | italic | oblique | inherit
font-variant
normal | small-caps | inherit
font-size
xx-small | x-small | small | medium | large | x-large | xxlarge |
smaller | larger |
inherit
length
font-weight
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 |
700 | 800 | 900 | inherit
Text
direction
ltr | rtl | inherit
hanging-punctuation
none | [ start | end | endedge ]
letter-spacing
normal
length
Prutor.ai - Beginner’s CSS Cheat Sheet
text-outline
none
color
length
Prutor.ai - Beginner’s CSS Cheat Sheet
text-indent
length
text-justify
auto | inter-word | interideograph | inter-cluster | distribute |
kashida | tibetan
text-transform
none | capitalize | uppercase | lowercase
text-wrap
normal | unresrricted | none | suppress
word-spacing
normal
length
Prutor.ai - Beginner’s CSS Cheat Sheet
List & Markers
list-style
list-style-type
list-style-position
list-style-image
list-style-image
none
url
list-style-type
none | asterisks | box | check | circle | diamond | disc | hyphen |
square | decimal | decimalleading-zero | lower-roman | upper-roman |
lower-alpha | upper-alpha | lower-greek | lower-latin | upper-latin |
hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana |
hiragana-iroha | katakana-iroha | footnotes
marker-offset
auto
length
Prutor.ai - Beginner’s CSS Cheat Sheet
Colors
color name red, blue, green, dark green
rgb(x,y,z) red = rgb(255,0,0)
rgb(x%,y%,z%) red = rgb(100%,0,0)
rgba(x,y,z,alpha) red = rgba(255,0,0,0)
#rrggbb red = #ff0000 (or shorthand - #f00)
hsl(hue, saturation, red = hsl (0, 100%, 50%)
lightness)
flavor An accent color (typically chosen by the user) to customize
the user interface of the user agent itself.
currentColor computer value of the ‘currentColor’ keyword is the
computed value of the ‘color’ property
Selector Types
Name Info Example
Universal Any element * { font: 10px Arial; }
Type Any element of that type h1 { text-decoration:
underline; }
Grouping Multiple elements of different h1, h2, h3 { font-family:
types Verdana; }
Class Multiple elements of different .sampleClass {
types when you don’t want to text-decoration:
affect all instances of that type underline; }
Id A single element type when you #sampleID {
don’t want to affect all instances text-decoration:
of that type underline; }
Descendant An element that is below (in the #gallery h1 {
document tree) another element text-decoration:
- no matter how many levels underline; }
Prutor.ai - Beginner’s CSS Cheat Sheet
