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