Show Menu
Cheatography
  1. Home >
  2. Programming >

CSS Cheat Sheet (DRAFT) by

CSS commands cheat sheet

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Syntax

A CSS rule consists of a selector and a declar­ation block.
selector {
    property1: value1;
    property2: value2;
}

No space between the property value and its unit

Simple selectors

name { ... }
<name>
#id { ... }
<element id="id">
.class { ... }
<element class=­"class">
name.class { ... }
<name class=­"class">
* { ... }
all elements
selector1, selector2, ..., selectorX {...}
Grouping selector

Combinator selectors

Based on a specific relati­onship between them
x y { ... }
Descendant selector: all y elements inside x elements
x > y { ... }
Child selector: all y elements where the parent is a x elements
x + y { ... }
Adjacent sibling selector: the first y element placed immedi­ately after x elements
x ~ y { ... }
General sibling selector: all y elements that are preceded by a x element

Pseudo­-el­ements selectors

Part of an element
Syntax
 
select­or:­:ps­eud­o-e­lement {
    property: value;
}
selector::after
Insert content after every selector element
Onlyapply to block-­level elements
selector::before
Insert content before every selector element
selector::firs­t-l­etter
Selects the first letter of every selector element
selector::firs­t-line
Selects the first line of every selector element
selector::marker
Selects the markers of list items
selector::sele­ction
Selects the portion of an element that is selected by a user
Only some limited types of properties apply to each of the pseudo­-el­ements

Attribute selectors

Based on an attribute or attribute value
All elements with a target attribute
[attribute]
All elements with an attribute attribute
[attribute = "value"]
All elements with attribute = value
[attribute ~= "value"]
All elements with an attribute attribute that contains a space-­sep­arated list of words, one of which is value
[attribute |= "value"]
All elements with an attribute attribute value starting with value
selector[attribute ^= "value"]
All selector elements with an attribute attribute value starting with value
selector[attribute $= "value"]
All selector elements with an attribute attribute value ending with value
selector[attribute = "value*­"]
All selector elements with an attribute attribute value containing the substring value

Colors and background

color
color | initia­l|i­nherit
background
bg-color bg-image positi­on/­bg-size bg-repeat bg-origin bg-clip bg-att­achment | initial | inherit
backgr­oun­d-color
color | transp­arent [def] | initial | inherit
backgr­oun­d-image
url | none [def] | initial | inherit
backgr­oun­d-p­osition
value [def: 0% 0%] | initial | inherit
background-position-y
background-position-x
like backgr­oun­d-p­osi­tion, but def: 0%
backgr­oun­d-size
auto [def] | length | percentage | cover | contain | initial | inherit
backgr­oun­d-r­epeat
repeat [def] | repeat-x | repeat-y | no-repeat | initial | inherit
backgr­oun­d-clip
border-box [def] | paddin­g-box | conten­t-box | initial | inherit
backgr­oun­d-o­rigin
border-box | paddin­g-box [def] | conten­t-box | initial | inherit
backgr­oun­d-a­tta­chment
scroll [def] | fixed | local | initial | inherit
backgr­oun­d-b­len­d-mode
normal [def] | multiply | screen | overlay | darken | lighten | color-­dodge | saturation | color | luminosity
They are different ways to tell the colors: name | hex | rgb(red, green, blue) | rgba(red, green, blue, alpha) | hsl(hue, satura­tion, lightness) | hsla(hue, satura­tion, lightness, alpha) | hwb

Border

border
border­-width border­-style [req] border­-color | initial | inherit
border­-to­p/r­igh­t/b­ott­om/left
border­-le­ft/­rig­ht/­top­-width [req] border­-le­ft/­rig­ht/­top­-style [req] border­-le­ft/­rig­ht/­top­-color | initial | inherit
border­-bl­ock­/inline
border­-bl­ock­/in­lin­e-width border­-bl­ock­/in­lin­e-style [req] border­-bl­ock­/in­lin­e-color | initial | inherit
border­-bl­ock­/in­lin­e-e­nd/­start
border­-bl­ock­/in­lin­e-e­nd/­sta­rt-­width border­-bl­ock­/in­lin­e-e­nd/­sta­rt-­style border­-bl­ock­/in­lin­e-e­nd/­sta­rt-­color | initial | inherit
width
[def: medium]
border­-width
1 to 4 values: medium | thin | thick | length | initial | inherit
To take effect, the border­-style must be set
border­-to­p/r­igh­t/b­ott­om/­lef­t-width
1 value: like border­-width
border­-bl­ock­/in­lin­e-width
1 to 2 values: like border-width
To take effect, the border­-bl­ock­/in­lin­e-style must be set
border­-bl­ock­/in­lin­e-e­nd/­sta­rt-­width
1 value: like border-width
To take effect, the border­-bl­ock­/in­lin­e-e­nd/­sta­rt-­style must be set
style
[def: none]
border­-style
1 to 4 values: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
border­-to­p/r­igh­t/b­ott­om/­lef­t-style
1 value: like border­-style
border­-bl­ock­/in­lin­e-style
1 to 2 values: like border­-style
border­-bl­ock­/in­lin­e-e­nd/­sta­rt-­style
1 value: like border­-style
color
[def: text color]
border­-color
1 to 4 values: colors | transp­arent | initial | inherit
To take effect, the border­-style must be set
border­-to­p/r­igh­t/b­ott­om/­lef­t-color
1 value: like border-color
To take effect, the border­-style or border­-le­ft/­rig­ht/­top­-style must be set
border­-bl­ock­/in­lin­e-color
1 to 2 values: like border-color
To take effect, the border­-bl­ock­/in­lin­e-style must be set
border­-bl­ock­/in­lin­e-e­nd/­sta­rt-­color
1 value: like border-color
To take effect, the border­-bl­ock­/in­lin­e-e­nd/­sta­rt-­style must be set
radius
[def: 0]
border­-radius
1 to 4 values: length | % | initial | inherit
border­-to­p/r­igh­t/b­ott­om/­lef­t-r­adius
1 value: like border­-radius
border­-en­d/s­tar­t-e­nd/­sta­rt-­radius
1 to 2 values: like border­-radius
image
border­-image
border­-im­age­-source border­-im­age­-slice border­-im­age­-width border­-im­age­-outset border­-im­age­-repeat | initial | inherit
border­-im­age­-slice
number | % [def: 100%] | fill | initial | inherit
border­-im­age­-source
none [def] | image | initial | inherit
border­-im­age­-width
number [def: 1] | length | % | auto | initial | inherit
border­-im­age­-outset
length [def: 0] | number | initial | inherit
border­-im­age­-repeat
stretch [def] | repeat | round | space | initial | inherit
table
border­-co­llapse
separate [def] | collapse | initial | inherit
border­-sp­acing
1 or 2 values: length | initial | inherit
Only works when border­-co­llapse is separate

Position

position
static [def] | absolute | fixed | relative | sticky | initial | inherit
bottom
top
right
left
auto [def] | length | % | initial | inherit
Negatives values are allowed
different depending on the position property
clip-path
clip-s­ource | basic-­shape | margin-box | border-box | paddin­g-box | conten­t-box | fill-box | stroke-box | view-box | none | initial | inherit
z-index
auto [def] | number | initial | inherit
= stack order of an element

Display

display
value [def: block or inline]
visibility
visible [def] | hidden | collapse | initial | inherit
Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there.

visibi­lit­y:h­idden; also hides an element. However, the element will still take up the same space as before. The element will be hidden, but still affect the layout:

Float

float
none [def] | left | right | initial | inherit
clear
none [def] | left | right | both | initial | inherit
box-sizing
conten­t-box [def] | border-box | initial | inherit

List

list-style
list-s­tyl­e-type list-s­tyl­e-p­osition list-s­tyl­e-image | initial | inherit
list-s­tyl­e-type
value [def: disc]
list-s­tyl­e-p­osition
inside | outside [def] | initial | inherit
list-s­tyl­e-image
none [def] | url | initial | inherit

Table

captio­n-side
top | bottom | initial | inherit
empty-­cells
show | hide | initial | inherit
table-­layout
auto [def] | fixed | initial | inherit

Units

0
unit can be omitted
Absolute Lengths
not recomm­ended
cm, mm, in, px, pt, pc
Relative Lengths
em, ex, ch, rem, vw, vh, vmin, vmax, %
A whitespace cannot appear between the number and the unit

Column

columns
auto [def] | column­-width column­-count | initial | inherit
column­-count
number | auto [def] | initial | inherit
column­-width
auto [def] | length | initial | inherit
column­-fill
balance [def] | auto | initial | inherit
column­-span
none [def] | all | initial | inherit
column­-rule
column­-ru­le-­width column­-ru­le-­style column­-ru­le-­color | initial | inherit
column­-ru­le-­width
medium [def] | thin | thick | length | initial | inherit
column­-ru­le-­style
none [def] | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
column­-ru­le-­color
color [def: current color] | initial | inherit
column-gap
length | normal | initial | inherit

Transition

transition
transi­tio­n-p­roperty transi­tio­n-d­uration transi­tio­n-t­imi­ng-­fun­ction transi­tio­n-delay | initial | inherit
transi­tio­n-p­roperty
none | all [def] | property | initial | inherit
transi­tio­n-d­uration
time [def: 0s] | initial | inherit
transi­tio­n-t­imi­ng-­fun­ction
linear | ease [def] | ease-in | ease-out | ease-i­n-out | step-start | step-end | steps(­int­,start | end) | cubic-­bezier(n,n,n,n) | initial | inherit
transi­tio­n-delay
time [def: 0s] | initial | inherit

Counter

content
normal [def] | none | counter | attr | string | open-quote | close-­quote | no-ope­n-quote | no-clo­se-­quote | url | initial | inherit
Used with ::before and ::after
counte­r-i­ncr­ement
none [def] | id | initial | inherit
counte­r-reset
none [def]| id number | initial | inherit
counter(counte­rname, counte­rstyle)

Icons

Font Awesome Icons
Bootstrap Icons
Google Icons

Specif­icity Hierarchy

1. Inline styles
2. IDs
3. Classes, pseudo­-cl­asses, attribute selectors
4. Elements and pseudo­-el­ements
!important can overide this hierachy
  

Insert CSS

external
inside <he­ad>: <link rel="st­yle­she­et" href="mystyl­e.css">
internal
inside <he­ad>: inside <st­yle>
inline
inside and element: using the style attribute

Pseudo­-class selectors

Based on a certain state
Syntax
 
select­or:­pse­udo­-class {
    property: value;
}
selector:active
The active link
selector:checked
All checked selector elements
selector:disabled
All disabled selector elements
selector:empty
All selector elements that has no children
selector:enabled
All enabled selector elements
selector:first­-child
All selector elements that is the first child of its parent
selector:first­-of­-type
All selector elements that is the first selector element of its parent
selector:focus
The selector element that has focus
selector:hover
Links on mouse over
selector:in-range
selector elements with a value within a specified range
selector:invalid
All selector elements with an invalid value
selector:lang(language)
All selector elements with a lang attribute value starting with language
selector:last-­child
All selector elements that is the last child of its parent
selector:last-­of-type
All selector elements that is the last selector element of its parent
selector:link
All unvisited links
selector:not(selector)
All elements that is not a selector element
selector:nth-c­hild(n)
All selector elements that is the second child of its parent
selector:nth-l­ast­-child(n)
All selector elements that is the second child of its parent, counting from the last child
selector:nth-l­ast­-of­-type(n)
All selector elements that is the second selector element of its parent, counting from the last child
selector:nth-o­f-type(n)
All selector elements that is the nth selector element of its parent
selector:only-­of-type
All selector elements that is the only selector element of its parent
selector:only-­child
All selector elements that is the only child of its parent
selector:optional
selector elements with no "­req­uir­ed" attribute
selector:out-o­f-range
selector elements with a value outside a specified range
selector:read-only
selector elements with a "­rea­don­ly" attribute specified
selector:read-­write
selector elements with no "­rea­don­ly" attribute
selector:required
selector elements with a "­req­uir­ed" attribute specified
selector:root
The document's root element
selector:target
The current active #news element (clicked on a URL containing that anchor name)
selector:valid
All selector elements with a valid value
selector:visited
All visited links

Margin

margin
1 to 4 values: length [def: 0] | % | auto [horiz­ontally center] | initial | inherit;
margin­-bo­tto­m/l­eft­/ri­ght/top
1 value: like margin
margin­-bl­ock­/inline
1 to 2 values: like margin, but auto by default
margin­-bl­ock­/in­lin­e-e­nd/­start
1 value: like margin­-bl­ock­/inline
Negative values are allowed
Margin Collapse: top and bottom (not left and right !) margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

Padding

padding
1 to 4 values: length [def:0] | % | initial | inherit
paddin­g-t­op/­rig­ht/­bot­tom­/left
1 value: like padding
paddin­g-b­loc­k/i­nline
1 to 2 values: like padding, but def: auto
paddin­g-b­loc­k/i­nli­ne-­end­/start
1 value: like paddin­g-b­loc­k/i­nline
box-sizing
conten­t-box [def, border and padding not included]| border-box [content, padding and border included] | initial | inherit
Padding and Element Width: if an element has a specified width, the padding added to that element will be added to the total width of the element.
To keep the given width, no matter the amount of padding, you can use the box-sizing property. This causes the element to maintain its actual width; if you increase the padding, the available content space will decrease.

Box model

Height and width

height­/width
length | % | auto [def] | initial | inherit
min/max-height/width override the height­/width property
max-he­igh­t/width
length | % | none [def] | initial | inherit
Improves the browser's handling of small windows
min-he­igh­t/width
length | % | initial | inherit
The height and width properties do not include padding, borders, or margins.

Text

alignment and direction
text-align
left [def: if direction is ltr] | right [def: if direction is rtl] | center | justify | initial | inherit
text-a­lig­n-last
auto [def] | left | right | center | justify | start | end | initial | inherit
direction
ltr [def] | rtl | initial | inherit
unicod­e-bidi
normal [def] | embed | bidi-o­verride | initial | inherit
vertic­al-­align
baseline [def] | length | sub | super | top | text-top | middle | bottom | text-b­ottom | initial | inherit
decoration
text-d­eco­ration
text-d­eco­rat­ion­-line [req] text-d­eco­rat­ion­-color text-d­eco­rat­ion­-style text-d­eco­rat­ion­-th­ickness | initial | inherit
text-d­eco­rat­ion­-line
none [def] | underline | overline | line-t­hrough | initial | inherit
Can combine more than 1 value
text-d­eco­rat­ion­-color
color [def: current color] | initial | inherit
text-d­eco­rat­ion­-style
solid [def] | double | dotted | dashed | wavy | initial | inherit
text-d­eco­rat­ion­-th­ickness
auto [def] | from-font | length­/pe­rce­ntage | initial | inherit
transf­orm­ation
text-t­ran­sform
none [def] | capitalize | uppercase | lowercase | initial | inherit
text spacing
text-i­ndent
length [def: 0] | % | initial | inherit
Negative values are allowed
letter­-sp­acing
normal [def] | length | initial | inherit
Negative value also allowed
line-h­eight
normal [def] | number | length | % | initial | inherit
word-s­pacing
normal [def] | length | initial | inherit
white-­space
normal [def] | nowrap | pre | pre-line | pre-wrap | initial | inherit
shadow
text-s­hadow
h-shadow [req] v-shadow [req] blur-r­adius [def: 0] color | none [def] | initial | inherit
text-j­ustify
auto [def] | inter-word | inter-­cha­racter | none | initial | inherit
text-o­rie­ntation
mixed [def] | upright | sideways | sidewa­ys-­right | use-gl­yph­-or­ien­tation | initial | inherit
Works only when writin­g-mode is set to vertical
text-o­verflow
clip [def] | ellipsis | string | initial | inherit
requires white-­space: nowrap; overflow: hidden
text-d­eco­ration: none; is used to remove the underline from links:
a { text-d­eco­ration: none; }

Font

font
font-style font-v­ariant font-w­eight font-s­ize­/li­ne-­height [req] font-f­amily [req] | caption | icon | menu | messag­e-box | small-­caption | status-bar | initial | inherit
font-style
normal [def] | italic | oblique | initial | inherit
font-v­ariant
normal [def] | small-caps | initial | inherit
font-w­eight
normal [def] | bold | bolder | lighter | number | initial | inherit
font-size
medium [def] | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit
font-f­amily
family­-name | generi­c-f­amily | initial | inherit
Start with the font you want, [then add backup fonts,] and always end with a generic family. Separate each value with a comma.
font-f­eat­ure­-se­ttings
normal [def] | featur­e-value [1 | 0 | on | off]
font-k­erning
auto | normal | none
font-s­ize­-adjust
number | none | initial | inherit
font-s­tretch
ultra-­con­densed | extra-­con­densed | condensed | semi-c­ond­ensed | normal [def] | semi-e­xpanded | expanded | extra-­exp­anded | ultra-­exp­anded | initial | inherit
font-v­ari­ant­-caps
normal [def] | small-­cap­s|a­ll-­sma­ll-caps | petite­-caps | all-pe­tit­e-caps | unicase | titlin­g-caps | initial | inherit | unset
@font-face
font-f­amily [req] src [req] font-s­tretch font-style font-w­eight unicod­e-range

Outline

outline
outlin­e-width outlin­e-style [def: invert] outlin­e-color | initial | inherit
outlin­e-width
medium [def] | thin | thick | length | initial | inherit
Must Always declare outlin­e-style before
outlin­e-style
none [def] | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
outlin­e-color
color [def: current color] | initial | inherit
Must Always declare outlin­e-style before
outlin­e-o­ffset
length [def: 0] | initial | inherit

Math functions

calc(expression)
max(value1, value2, ..., valueX)
min(value1, value2, ..., valueX)

Overflow

overflow
visible [def] | hidden | clip | scroll | auto | initial | inherit
overfl­ow-wrap
normal [def] | anywhere | break-word | initial | inherit
overfl­ow-x/y
visible [def] | hidden | scroll | auto | initial | inherit
overfl­ow-­anchor
auto [def] | none | initial | inherit
Only works for block elements with a specified height

Other

/* ... */
Comment
opacity
number [def: 1] | initial | inherit
Navigation bar
Dropdown
Dropdown are useful for addition info to help the users