CSS cheat sheet

Basics
Syntax
selector{
property: value;
property2: value2;
}

Include external css file

Internal styles
<style type="text/css">
div { color: #444;}
</style>

Inline styles
<tag style="property: value"> </tag>

Clearfix
.clearfix:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

Box model
margin
border
padding
content
Selectors
*all elements
divall div tags
div,pall divs and paragraphs
div pparagraphs inside divs
div > pall p tags, one level deep in div
div + pp tags immediately after div
div ~ pp tags preceded by div
.classnameall elements with class
#idnameelement with ID
div.classnamedivs with certain classname
div#idnamediv with certain ID
#idname *all elements inside #idname

Pseudo classes
a:linklink in normal state
a:activelink in clicked state
a:hoverlink with mouse over it
a:visitedvisited link
p::after{content:"yo";}add content after p
p::beforeadd content before p
input:checkedchecked inputs
input:disableddisabled inputs
input:enabledenabled inputs
input:focusinput has focus
input:in-rangevalue in range
input:out-of-rangeinput value out of range
input:validinput with valid value
input:invalidinput with invalid value
input:optionalno required attribute
input:requiredinput with requred attribute
 input:read-onlywith readonly attribute
input:read-writeno readonly attrib.
div:emptyelement with no children
p::first-letterfirst letter in p
p::first-linefirst line in p
p:first-of-typefirst of some type
p:last-of-typelast of some type
p:lang(en)p with en language attribute
:not(span)element that's not a span
p:first-childfirst child of its parent
p:last-childlast child of its parent
p:nth-child(2)second child of its parent
p:nth-child(3n+1)nth-child (an + b) formula
p:nth-last-child(2)second child from behind
p:nth-of-type(2)second p of its parent
p:nth-last-of-type(2)...from behind
p:only-of-typeunique of its parent
p:only-childonly child of its parent
:rootdocuments root element
::selectionportion selected by user
:targethighlight active anchor

Attribute selectors
a[target]links with a target attribute
a[target="_blank"]links which open in new tab
[title~="chair"]title element containing a word
[class^="chair"]class starts with chair
[class|="chair"]class starts with the chair word
[class*="chair"]class contains chair
[class$="chair"]class ends with chair
input[type="button"]specified input type

Properties
align-contentbehavior of the flex-wrap property
align-itemsalignment for items inside the container
align-selfalignment for the selected item
allchanges all properties
animationbinds an animation to an element
animation-delaydelays animation start
animation-directionreverse animation or in alternate cycles
animation-durationanimation duration in seconds or ms
animation-fill-modestyle when the animation is not playing
animation-iteration-countnumber of an animation replays
animation-namename for the @keyframes animation
animation-play-statethe animation is running or paused
animation-timing-functionspeed curve of an animation
backface-visibilityis element visible when not facing the screen
backgroundall background properties in one declaration
background-attachmentis the background image fixed or scrolls
background-blend-modeblending mode of each background layer
background-clippainting area of the background
background-colorbackground color
background-imagebackground image
background-originwhere the background image is positioned
background-positionstarting position of the background image
background-repeatthe way the background image is repeated
background-sizebackground image size
bordersets all border properties in one line
border-bottombottom border properties in one line
border-bottom-colorcolor of the bottom border
border-bottom-left-radiusborder bottom left radius
border-bottom-right-radiusborder bottom right radius
border-bottom-styleborder bottom style
border-bottom-widthborder bottom width
border-collapseborder collapse
border-colorborder color
border-imagesets an image as border
border-image-outsetborder image area extends beyond the border box
border-image-repeatborder image repeated, rounded or stretched
border-image-slicehow to slice the border image
border-image-sourcepath to the border image
border-image-widthborder image width
border-leftleft border properties in one line
border-left-colorborder left color
border-left-styleborder left style
border-left-widthborder left width
border-radiusborder radius of the four rounded corners
border-rightright border properties in one line
border-right-colorborder right color
border-right-styleborder right style
border-right-widthborder right width
border-spacingborder spacing
border-styleborder style
border-toptop border properties in one line
border-top-colorborder top color
border-top-left-radiusborder top left radius
border-top-right-radiusborder top right radius
border-top-styleborder top style
border-top-widthborder top width
border-widthborder width
bottombottom offset for relative and absolute elements
box-shadowshadow to element
box-sizingbox sizing properties
caption-sideplacement of a table caption
cleardeny floating of an element
clipclip an absolutely positioned element
colortext color
column-countdivide the content in columns
column-fillbalanced fill or not
column-gapgap between the columns
column-ruleseparator between columns, like border
column-rule-colorcolumn rule color
column-rule-stylecolumn rule style
column-rule-widthcolumn rule width
column-spancolumn span
column-widthcolumn width
columnsset column-width and column-count
contentinsert content :before and :after elements
counter-incrementcount sections
counter-resetreset counter
cursorcursor type when element is hovered
directionwriting direction, Arabic is using rtl
displaybox display type
empty-cellshide borders and background on empty table cells
filterimage effects: grayscale, blur, invert etc.
flexitem length, relative to others inside the container
flex-basisinitial length of a flexible item
flex-directiondirection of the flexible items
flex-flowshorthand for flex-direction and flex-wrap
flex-growhow much the item will grow relative other items
flex-shrinkhow to shrink the item relative to other items
flex-wrapwrap flexible items
floatfloat elements left or right
fontall font properties in one line
@font-facedeclare non-web-safe fonts
font-familyfont of the element
font-sizefont size
font-size-adjustcontrol font size if the first declared option is not available
font-stretchwiden or narrow text
font-stylefont style: normal, italic, oblique
font-variantset small-caps
font-weightuse bold or thin characters
hanging-punctuationcan a punctuation mark be placed outside the line box?
heightheight of the element
justify-contentjustifies flexible container's items horizontally if necessary
@keyframesspecifies the animation code
leftleft offset for relative and absolute elements
letter-spacingspace between characters
line-heightline height of text or inline-block elements
list-styleall list properties in one line
list-style-imagereplace the list item marker with an image
list-style-positionlist item markers inside or outside the content flow
list-style-typeset the type of the list item marker
marginset the top, right, bottom and left margins in one line
margin-bottombottom margin
margin-leftleft margin
margin-rightright margin
 margin-topmargin top
max-heightmaximum height of element
max-widthmaximum width of element
@mediasee media queries
min-heightminimum height
min-widthminimum width
nav-downwhere to navigate when the arrow-down button is pressed
nav-indexsets sequential navigation order
nav-leftwhere to navigate when the arrow-left button is pressed
nav-rightwhere to navigate when the arrow-right button is pressed
nav-upwhere to navigate when the arrow-up button is pressed
opacitytransparency level of an element
orderreorder elements in a container
outlinedrow an outer border around elements
outline-coloroutline color
outline-offsetgap between the element and the outline
outline-styleoutline style
outline-widthoutline width
overflowhide, display or scroll if the content overflows its container
overflow-xhorizontal overflow
overflow-yvertical overflow
paddingpadding between the element border and content
padding-bottompadding bottom
padding-leftpadding left
padding-rightpadding right
padding-toppadding top
page-break-afteradds page break after an element
page-break-beforeadds page break before an element
page-break-insideallow page break inside an element
perspectivehow many pixels the 3D element is placed from the view
perspective-originwhere is the 3D element based in the x- and y-axis
positionpositioning type: absolute, fixed, relative, static
quotesset quotation marks to wrap an element
resizedeclare resizable elements
rightright offset for relative and absolute elements
tab-sizetab character space length
table-layouttable layout algorithm
text-alignhorizontal alignment of text
text-align-lasthorizontal alignment of last line of text
text-decorationoverline, underline or line-through the text
text-indentindentation of the first line of the text
text-overflowthe way how overflowed content is marked (ellipsis)
text-shadowtext shadow
text-transformcapitalization of text
toptop offset for relative and absolute elements
transform2D 3D transformation. See widget.
transform-originchanges the position of transformed elements
transform-stylerender nested elements in 3D
transitiontransition properties in one line
transition-delaydelay before transition effect start
transition-durationtransition effect duration
transition-propertywhich CSS property is the transition affecting
transition-timing-functionspeed curve of the transition
unicode-bidishould the text be overridden to support more languages
user-selectdisable user content selection
vertical-alignvertical alignment
visibilityvisibility:hidden elements leave a gap
white-spacehow are white-spaces handled
widthwidth of an element
word-breaktext breaking rules when text reaches the end of the container
word-spacingsize of white space between words
word-wrapbreak long words and wrap onto the next line
z-indexstack order of the element

Media Queries
Syntax
@media not|only mediatype and (media feature) {
CSS Code }
Link external file:
<link rel="stylesheet" media=mediatype and|not|only (media feature
href="mystylesheet.css">
Viewport is 480 pixels or smaller
@media screen and (max-width: 480px) { }

Viewport width smaller OR height smaller

Print style
@media print { ... }

Night / dark mode

Media types
all, print, screen, speech

Media features
widthviewport width
heightviewport height
orientationorientation of the viewport
aspect-ratioratio between width & height
colornumber of bits per color
color-indexnumber of displayable colors
monochromecolor on greyscale device
resolutionresolution of the device
scanscanning process of the device
griddevice is a grid or bitmap

Reset CSS
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acron
ym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt
,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoo
t,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgr
oup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin: 0; padding: 0;
border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;}
body { line-height: 1;}
ol,ul { list-style: none;}
blockquote,q { quotes: none;}
blockquote:before,blockquote:after,q:before,q:after { content: ''; content: none;}