CSS Cheat Sheet: If you’re a web developer, you know the importance of HTML. However, to create visually appealing websites, you also need to master CSS. Cascading Style Sheets or CSS is a design language that takes web development to the next level by allowing you to add structure and style to your web pages.
In this article, we will provide you with a comprehensive CSS cheat sheet, with all the information you need to create beautiful websites. From font styles and colors to layout and background styles, we’ve got you covered.
What is CSS?
CSS is a design language used to add style, presentation, and formatting elements to web pages. It allows you to control the look and feel of your web pages, including the font size and style, colors, background images, and more. In short, CSS gives you complete control over the appearance of your web pages.
Why do you need a CSS Cheat Sheet?
As a web developer, you may already know the basics of CSS. However, CSS has many properties, and it’s easy to forget some of them. Instead of constantly searching the internet for specific CSS properties, a cheat sheet provides an easily searchable resource for all things CSS.
CSS Cheat Sheet: Your Quick Reference Guide
Here is a complete CSS cheat sheet that includes all the essential properties you need to create stunning web pages:
Selector
The selector is used to select the HTML element you want to style.
Example: p {color: red;}
Property
The property is used to define the CSS style you want to apply to the HTML element.
Example: color: red;
Value
The value is the setting for the CSS property.
Example: color: red;
Comment
Comments are used to add notes to your CSS code for future reference.
Example: /* This is a comment */
1. Backgrounds
The background property is used to add a background color or image to an HTML element.
Example: background-color: blue;
background
background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color
background-image
url
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
background attachment
scroll | fixed
background-origin
border-box | padding-box | content-box
background-clip
length
%
border-box | padding-box | content-box | no-clip
background-color
color
transparent
2. Borders
The border property is used to add a border around an HTML element.
Example: border: 1px solid black;
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
border-style
border-color
border-left-style
border-style
border-left-color
border-color
border-left-width
thin | medium | thick length
border-right
border-right-width
border-style
border-color
border-right-style
border-style
border-right-color
border-color
border-right-width
thin | medium | thick length
border-top
border-top-width
border-style
border-color
border-top-style
border-style
border-top-color
border-color
border-top-width
thin | medium | thick | length
border-bottom
border-bottom-width
border-style
border-color
border-bottom-color
border-color
border-bottom-style
border-style
border-break
border-width
border-style
color
close
box-shadow
inset || [ length, length, length, length || <color> ]
none
border-collapse
collapse | separate
border-image
image
[ number / %border-width stretch | repeat | round ]
none
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
3. 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
The margin property is used to create space outside an HTML element.
Example: margin-top: 20px;
margin-top
margin-right
margin-bottom
margin-left
margin-bottom
auto
length
%
margin-left
auto
height
%
margin-right
auto height
%
margin-top
auto
length
%
padding
The padding property is used to create space inside an HTML element.
Example: padding-left: 30px;
padding-top
padding-right
padding-bottom
padding-left
padding-bottom
length
%
padding-left
length
%
padding-right
length
%
padding-top
length
%
display
none | inline | block | inline-block | list-item | run-in | compact | table | inline-table | table-row-group | table-headergroup | 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
marquee-direction
forward | reverse
marquee-loop
infinite
integer
marquee-play-count
infinite
integer
marquee-speed
slow | normal | fast
marquee-style
scroll | slide | alternate
overflow
visible | hidden | scroll | auto | no-display | no-content
overflow-x
overflow-y
overflow-style
auto | marquee-line | marqueeblock
overflow-x
visible | hidden | scroll | auto | no-display | no-content
rotation
angle
rotation-point
position (paired value off-set)
visibility
visible | hidden | collapse
clear
left | right | both | none
4. Fonts
The font property is used to change the font size, style, and color of text.
Example: font-size: 16px;
font
font-style
font-variant
font-weight
font-size/line-height
font-family
caption | icon | menu | messagebox | small-caption | status-bar
font-status-adjust
none | inherit
number
font-family
normal | wider | narrower | ultra-condensed | extracondensed | condensed | semicondensed | semi-expanded | ultra-expanded | inherit
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
5. Text
The text property is used to change the text color, alignment, and spacing.
Example: text-align: center;
direction
ltr | rtl | inherit
hanging-punctuation
none | [ start | end | endedge ]
letter-spacing
normal
length
%
text-outline
none
color
length
unicode-bidi
normal | embed | bidi-override
white-space
normal | pre | nowrap | pre-wrap | pre-line
white-space-collapse
preserve | collapse | preserve-breaks | discard
punctuation-trim
none | [ start | end | adjacent ]
text-align
start | end | left | right | center | justify
text-align-last
start | end | left | right | center | justify
text-decoration
none | underline | overlilne | line-through | blink
text-shadow
none
color
length
word-break
normal | keep-all | loose | break-strict | break-all
word-wrap
normal
length
%
text-emphasis
none | [ [ accent | dot | circle | disc | [ before | after ]?]
text-indent
length
%
text-justify
auto | inter-word | interideograph | inter-cluster | distribute | kashida | tibetan
text-transform
none | capitalize | uppercase | lowercase
text-wrap
normal | unrestricted | none | suppress
word-spacing
normal
length
%
6. Columns
column-count
auto
number
column-fill
auto | balance
column-gap
normal
length
column-rule
column-rule-width
column-rule-style
column-rule-color
column-rule-style
border-style
columns
column-width
column-count
column-rule-width
thin | medium | thick
length
column-span
1 | all
column-width
auto
length
7. Colors
color
inherit
color
opacity
inherit
number
8. Grid Positioning
grid-columns
none | inherit [ length percentage relative length ]
grid-rows
none | inherit [ length percentage relative length ]
9. Template Layout
box-align
start | end | center | base
box-direction
normal | reverse
box-flex
normal
box-flex-group
integer
box-lines
single | multiple
box-orient
horizontal | vertical | inline-axis | block-axis
box-pack
start | end | center | justify
box-sizing
content-box | padding-box | border-box | margin-box
tab-side
top | bottom | left | right
10. Tables
border-collapse
collapse | separate
empty-cells
show | hide
border-spacing
length length
table-layout
auto | fixed
caption-side
top | bottom | left | right
11. Speech
cue
cue-before
cue-after
cue-before
url [ silent | x-soft | soft | medium | loud | x-loud | none | inherit ]
number
%
cue-after
url [ silent | x-soft | soft | medium | loud | x-loud | none | inherit ]
number
%
mark
mark-before
mark-after
mark-before
string
mark-after
string
voice-pitch-range
x-low | low | medium | high | xhigh | inherit
number
voice-stress
strong | moderate | none | reduced | inherit
voice-volume
silent | x-soft | soft | medium | loud | x-loud | inherit
number
%
pause
pause-before
pause-after
pause-before
none | x-weak | weak | medium | strong | x-strong | inherit
time
pause-after
none | x-weak | weak | medium | strong | x-strong | inherit
time
phonemes
string
voice-duration
time
voice-family
inherit | [ <specific-voice, age, generic-voice, number> ]
voice-rate
x-slow | slow | medium | fast | x-fast | inherit
%
voice-pitch
x-low | low | medium | high | xhigh | inherit
number
%
caption-side
top | bottom | left | right
rest
rest-before
rest-after
rest-before
none | x-weak | weak | medium | strong | x-strong | inherit
time
rest-after
none | x-weak | weak | medium | strong | x-strong | inherit
time
speak
none | normal | spell-out | digits | literal-punctuation | no-punctuation | inherit-number
12. Lists and Markers
list-style
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 | decimal-leading-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
13. Animations
animations
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-name
none | IDENT
animation-duration
time
animation-timing-function
ease | linear | ease-in | easeout | ease-in-out | cubic-Bezier (number, number, number, number)
animation-delay
time
animation-iteration-count
inherit
number
animation-direction
normal | alternate
animation-play-state
running | paused
14. Transitions
transitions
transitions-property
transitions-duration
transitions-timing-function
transitions-delay
transitions-delay
time
transitions-duration
time
transitions-property
none | all
transition-timing-function
ease | linear | ease-in | ease-out | ease-in-out | cubicBezier( number, number, number, number)
15. UI
appearance
normal | inherit | [icon | window | desktop | work-space | document | tooltip | dialog | button | push-button | hyperlink | radio-button | checkbox | menu-item | tab | menu | menubar | pull-down-menu | pop-up-menu | list-menu | radio-group | checkbox-group | outline-tree | range | field | combo-box | signature | password]
cursor
auto | crosshair | default | pointer | move | e-resize | neresize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help
url
icon
auto | inherit
url
nav-index
auto | inherit
number
nav-up
auto | inherit <id> [current | root | <target-name>
nav-right
auto | inherit <id> [current | root | <target-name>
nav-down
auto | inherit <id> [current | root | <target-name>
nav-left
auto | inherit <id> [current | root | <target-name>
resize
none | both | horizontal | vertical | inherit
16. Pseudo-class
:active
an activated element
:focus
an element while the element has focus
:hover
an element when you mouse over it
:link
an unvisited link
:disabled
an element while the element is disabled
:enabled
an element while the element is enabled
:checked
an element that is checked
:selection
an element that is currently selected or highlighted by the user
:lang
allows the author to specify a language to use in a specified element
:nth-child(n)
an element that is the n-th sibling
:nth-last-child(n)
an element that is the n-th sibling counting from the last sibling
:first-child
an element that is the first sibling
:last-child
an element that is the last sibling
:only-child
an element that is the only child
:nth-of-type(n)
an element that is the n-th sibling of its type
:nth-last-oftype(n)
an element that is the n-th sibling of its type counting from the last sibling
:last-of-type
an element that is the last sibling of its type
:first-of-type
an element that is the first sibling of its type
:only-of-type
an element that is the only child of its type
:empty
an element that has no children
:root
root element within the document
:not(x)
an element not represented by the argument ‘x’
:target
a target element as specified by a target in a UR
17. Pseudo-Element
::first-letter
adds special style to the first letter of a text
::first-line
adds special style to the first line of a text
::before
inserts some content before an element
::after
inserts some content after an element
18. Absolute Measurement
%
percentage
cm
centimeter
in
inch
mm
millimeter
pc
pica (1p = 12 points)
pt
point (1pt = 1/72 inch)
19. Relative Measurement
ch
width of the “0” glyph found in the font for the font size used to render
em
1em = current font size of current element
ex
x-height of the element’s font
gd
the grid defined by ‘layout-grid’
px
pixel of the viewing device
rem
the font size of the root element
vh
the viewport’s height
vw
the viewport’s width
vm
viewport’s height or width (whichever is smaller of the two)
20. Angles
deg
degrees
grad
grads
rad
radians
turn
turns
21. Time
ms
mili-seconds
s
seconds
22. Frequency
Hz
hertz
kHz
kilo-hertz
23. 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, lightness)
red = hsl (0, 100%, 50%)
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
24. Selector Types
Universal (any element)
Example: * { font-family: ‘Courier New’, Courier, monospace; }
Type (any element of that type)
Example: body { background-color: black; }
Grouping (multiple elements of different types)
Example: div, h1, h2, h3, p, li { color: white; }
Class (multiple elements of different types when you don’t want to affect all instances of that type)
Example: .header { flex: 50%; }
ID (a single element type when you don’t want to affect all instances of that type)
Example: #w3c-link { text-decoration: underline; }
Descendant (an element that is one or more levels below another element in the document tree)
Example: p a { color: lightgray; }
Child (an element that is directly below another element in the document tree)
Example: ul>li:nth-child(even) { font-weight: bold; }
Adjacent Sibling (all elements that share the same parent and elements are in the same immediate sequence)
Example: h3 + ul { list-style: square; }
General Sibling (all elements that share the same parent and elements are in the same, not necessarily immediate, sequence)
Example: h2 ~ h3 { font-family: Arial, Helvetica, sans-serif; }
Attribute (an element that matches the attribute listed)
Example: a[href^=”https”] { font-weight: bold; }
25. Outlines
outline
outline-color
outline-style
outline-width
outline-offset
inherit
length
outline-style
none | dotted | dashed | solid | double | groove | ridge | inset | outset
outline-width
thin | medium | thick
length
26. 3D/2D Transform
backface-visibility
visible | hidden
perspective
none
number
perspective-origin
[ [ percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] <length> ] | [ [ [ left | center | right ] || [ top | center | bottom ] ] <length> ]
transform
none | matrix | matrix3d | translate3d | translateX | translateY | translateZ | scale | scale3d | scaleX | scaleY | scaleZ | rotate | rotate3d | rotateX | rotateY | rotateZ | skewX | skewY | skew | perspective
transform-origin
[ [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] <length> ] | [ [ [ left | center | right ] || [ top | center | bottom ] ] <length> ]
27. Generated Content
bookmark-label
content
attr
string
bookmark-level
none
integer
bookmark-target
self
url
attr
border-length
self
url
attr
content
normal | none | inhibit
url
counter-reset
none
identifier number
crop
auto
shape
display
normal | none | list-item
float-offset
length length
hyphenate-after
auto
integer
counter-increment
none
identifier number
hyphenate-lines
no-limit
integer
hyphenate-resource
none
url
hyphens
none | manual | auto
image-resolution
normal | auto
dpi
hyphenate-before
auto
integer
hyphenate-character
auto
string
marks
[crop || cross ] | none
move-to
normal | here
identifier
page-policy
start | first | last
quotes
none
string string string string
string-set
identifier
content-list
text-replace
none
[<string> <string>]+
28. Line Boxes
alignment-adjust
auto | baseline | before-edge | text-before-edge | middle | central | after-edge | textafter-edge | ideographic | alphabetic | hanging | mathematical
length
%
alignment-baseline
baseline | ise-script | beforeedge | text-before-edge | afteredge | text-after-edge | central | middle | ideographic | alphabetic | hanging | mathematical
baseline-shift
baseline | sub | super
length
%
dominant-baseline
auto | use-script | no-change | reset-size | alphabetic | hanging | ideographic | mathematical | central | middle | text-after-edge | text-beforeedge
drop-initial-after-align
alignment-baseline
drop-initial-after-align
central | middle | after-edge | text-after-edge | ideographic | alphabetic | mathematical
%
drop-initial-before-align
caps-height
alignment-baseline
drop-initial-before-adjust
before-edge | text-before-edge | central | middle | hanging | mathematical
length
%
drop-initial-value
initial
integer
drop-initial-size
auto
integer
%
line
inline-box-align
initial | last
integer
line-height
normal
number
length
%
line-stacking
line-stacking-strategy
line-stacking-ruby
line-stacking-shift
line-stacking-strategy
inline-line-height | block-lineheight | max-height | gridheight
line-stacking-ruby
exclude-ruby | include-ruby
line-stacking-shift
consider-shifts | disregardshifts
line-stacking
line-stacking-strategy
line-stacking-ruby
line-stacking-shift
text-height
auto | font-size | text-size | max-size
vertical-align
Baseline | sub | super | top | text-top | middle | bottom | text-bottom
length
%
29. Hyperlinks
target
target-name
target-new
target-position
target-name
current | root | parent | new | modal
string
target-new
window | tab | none
target-position
above | behind | front | back
30. Positioning
bottom
auto
%
length
right
auto
%
length
clip
shape
auto
top
auto
%
length
left
auto
%
length
z-index
auto
Number
position
static | relative | absolute | fixed
Conclusion
A CSS cheat sheet is an essential resource for web developers. It provides a quick reference guide for all the CSS properties you need to create visually appealing web pages. With this cheat sheet, you can keep your CSS code clean and avoid unnecessary internet searches for specific properties. So, download this cheat sheet and start creating stunning web pages today!
Resources for Learning More
There are many resources available for learning JavaScript, from online courses to books and tutorials. Some popular resources include Codecademy, W3Schools, and the Mozilla Developer Network.
Also Read: