Crafting Future
Crafting Future
CSS
Cheatsheet
Crafting Future
Table of Contents
Backgrounds 34
Border 79
Box Model 10
Font 12
Text 13
Column 13
Colors 14
Table 16
Speech 17
List & Markers 18
Animations 18
Transitions 20
UI 21
Pseudo-Class 21
Pseudo-Element 21
22
Absolute Measurement
22
Relative Measurement
22
Angles
23
Time
23
Frequency
25
Colors
Selector Types
Outline
Crafting Future - Beginner’s CSS Cheat Sheet 1
Crafting Future
3D / 2D Transform 25
Generated Content 26
Line Box 28
Hyperlink 31
Positioning 31
Ruby 32
Paged Media 32
Crafting Future
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 2
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
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 3
Crafting Future
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
WebsiteSetup.org - Beginner’s CSS Cheat Sheet
Crafting Future
4
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
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 5
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
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 6
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
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 7
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
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 8
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
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
visibility
visible | hidden | collapse
clear
left | right | both | none
Font
font
font-style
font-variant
font-weight
font-size/line-height
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 9
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
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 10
text-outline
none color length
unicode-bidi
normal | embed | bidi-override
white-space
normal | pre | nowrap | pre-wrap | pre-line
white-space-collapse
perserve | collapse | pre-servebreaks | 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 | overline | line-thorugh | blink
text-shadow
none
color
length
word-break
normal | keep-all | loose | break-strict | break-all
word-wrap
normal
nowrap
text-emphasis
none | [ [ accent | dot | circle | disc | [ before | after ]?]
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 11
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
%
column-count
Column
auto number
column-fill
auto | balance
column-gap
normal
length
column-rule
column-rule-width
column-rule-style
column-rule-color
column-rule-style
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 12
border-style
columns
column-width
column-count
column-rule-width
thin | medium | thick
length
column-span
1 | all
column-width
auto
length
Colors
inherit
color
color
opacity
inherit
number
Table
border-collapse
collapse | separate
empty-cells
show | hide
border-spacing
length length
table-layout
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 13
Crafting Future
auto | fixed
caption-side
top | bottom | left | right
Speech
cue
cue-before
cue-after
cue-before
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
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 14
cue-after
url [ silent | x-soft | soft | medium | loud | x-loud | none | inherit
]
number
pause
pause-before
pause-after
pause-before
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
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 15
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
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
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 16
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
rotation
angle
rotation-point
position (paired value off-set)
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 17
Crafting Future
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)
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 | swresize | s-resize |
w-resize | text | wait | help
url
icon
auto | inherit
url
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 18
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
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 19
Pseudo-Class
:active an activated element
:focus :hover :link an element while the element has focus
:disabled :enabled an element when you mouse over it
:checked :selection an unvisited link
:lang :nth-child(n)
an element while the element is disabled
:nth-last-child(n)
an element while the element is enabled
:first-child :last-
an element that is checked
child :only-child
an element that is currently selected or highlighted by the user
:nth-of-type(n)
allows the author to specify a language to use in a specified element
:nth-last-of-type(n)
an element that is the n-th sibling
an element that is the n-th sibling counting from the last sibling
an element that is the first sibling
an element that is the last sibling
an element that is the only child
an element that is the n-th sibling of its type
an element that is the n-th sibling of its type counting from the last
sibling
an element that is the last sibling of its type
:last-of-type an element that is the first sibling of its type
:first-of-type
an element that is the only child of its type
:only-of-type
an element that has no children
:empty :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
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 20
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 the content of an element
::after Inserts some content after the content of an element
Absolute Measurement
% percentage
cm centimeter
in inch
mm milimeter
pc
pica (1p = 12 points)
pt
point (1pt = 1/72 inch)
px
pixel (1px = 1/96 inch)
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’
rem
the font size of the root element
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 21
Crafting Future
vh the viewport’s height
vw the viewport's width
vm viewport’s height or width, whichever is smaller of the two
Angles
deg degrees
grad grads
rad
radians
turn
turns
Time
ms mili-seconds
s seconds
Frequency
Hz hertz
kHz kilo-hertz
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 22
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 hsl(hue,
red = #ff0000 (or shorthand - #f00)
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.
computer value of the ‘currentColor’ keyword is the
currentColor 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; }
Multiple elements of different h1, h2, h3 { font-family:
Grouping
Verdana; }
types
.sampleClass {
Multiple elements of different
Class text-decoration:
types when you don’t want to underline; }
affect all instances of that type
#sampleID {
A single element type when you text-decoration:
Id
don’t want to affect all instances underline; }
of that type
#gallery h1 {
An element that is below (in the text-decoration:
Descendant underline; }
document tree) another element
- no matter how many levels
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 23
below
Child An element that is directly below #title > p { font-weight:
(in the document tree) another bold; }
element
Adjacent Sibling All elements that share the h1 + p { font-style:
same parent and elements are italic; }
in the same immediate
sequence
All elements that share the
General Sibling h1 ~ p { font-style:
same parent and elements are italic; }
in the same sequence (not
necessarily immediate)
An element that matches the
Attribute attribute listed E[selected] - att whatever
the value E[att="val"] -
att with a specific value
E[rel~="next"] - att with
a value is a whitespace
separated list *
[lang|="en"] - att value
either being exactly "val"
or beginning with "val"
immediately followed by "-
" E[att^="val"] - att
value that begins with the
prefix "val"
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 24
Outline
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
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 | tranlateX | translateY |
translateZ | scale | scale3d | scaleX | scaleY | scaleZ | rotate |
rotate3d | rotateX | rotateY | rotateZ | skewX | skewY | skew |
perspective
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 25
transform-origin
[ [ [ <percentage> | <length> | left | center | right ] [ <percentage>
| <length> | top | center | bottom ]? ] <length> ] | [ [ [ left |
center | right ] || [ top | center | bottom ] ] <length> ]
transform-style
flat | preserve-3d
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
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 26
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
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 27
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>]+
Line Box
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
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 28
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
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 29
Crafting Future
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
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 30
Hyperlink
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
Positioning
bottom
auto % length
right
auto
length
clip
shape
auto
top
auto
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 31
%
length
left
auto
%
length
z-index
auto
Number
position
static | relative | absolute | fixed
Ruby
ruby-align
auto | start | left | center | end | right | distribute-letter |
distribute-space | line-edge
ruby-overhang
auto | start | end | none
ruby-position
before | after | right | inline
ruby-span
attr(x) | none
Paged Media
fit
fill | hidden | meet | slice
fit-position
[top | center | bottom] || [left | center | right]
length
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 32
%
orphans
integer
image-orientation
auto
angle
page
auto
identifier
page-break-after
auto | always | avoid | left | right
page-break-before
auto | always | avoid | left | right
page-break-inside
auto | avoid
size
auto | landscape | portrait
length
windows
integer
WebsiteSetup.org - Beginner’s CSS Cheat Sheet 33
Join our Whatsapp Community
Crafting Future
Scan & Join to get free Internships,
Jobs, Coding notes and much more
for free.
Scan & Join to get free Internships, Jobs,
Coding notes and much more for free.
