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.