CSS Cheat Sheet

Basics
Basic CSS code syntax
Syntax
selector{
property: value;
property2: value2;
}

Include external css file

<link rel="stylesheet" type="text/css" href="/style.css" />

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

Useful Links
:
 Useful Links
CSS Editor, Compressor
CSS Cleaner Can I Use?
Modernizr Bootstrap
Validator Table CSS Styler

Selectors
* all elements
div all div tags
div,p all divs and paragraphs
div p paragraphs inside divs
div > p
all p tags, one level deep in div
div + p p tags immediately after div
div ~ p p tags preceded by div
.classname all elements with class
#idname element with ID
div.classname divs with certain classname
div#idname div with certain ID
#idname * all elements inside #idname

Pseudo classes
a:link link in normal state
a:active link in clicked state
a:hover link with mouse over it
a:visited visited link
p::after{content:"yo";} add content after p
p::before add content before p
input:checked checked inputs
input:disabled disabled inputs
input:enabled enabled inputs
input:focus input has focus
input:in-range value in range
input:out-of-range input value out of range
input:valid input with valid value
input:invalid input with invalid value
input:optional no required attribute
input:required input with requred attribute
input:read-only with readonly attribute
input:read-write no readonly attrib.
div:empty element with no children
p::first-letter first letter in p
p::first-line first line in p
p:first-of-type first of some type
p:last-of-type last of some type
How to use?
p:lang(en) p with en language attribute
:not(span) element that's not a span
p:first-child first child of its parent
p:last-child last 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)
Online CSSsecondCheat
p of its parent
Sheet
p:nth-last-of-type(2) ...from behind
HTML6
p:only-of-type unique of its parent
p:only-child only child of its parent
:root documents root element
::selection portion selected by user
:target highlight active anchor
Properties
Attribute selectors
align-content
a[target] links with a target attribute
behavior of the flex-wrap
a[target="_blank"] linksproperty
which open in new tab
align-items
[title~="chair"]
alignment forcontaining
title element items inside the container
a word
align-self
[class^="chair"] class starts with chair
alignment for the selected item
[class|="chair"]
all changes
class starts with the chair wordall properties
animation
[class*="chair"] class contains chair
binds an animation toclass
[class$="chair"] an element
ends with chair
animation-delay
input[type="button"]delays animation
specified start
input type
animation-direction
reverse animation or in alternate cycles
animation-duration
animation duration in seconds or ms
Color Picker
animation-fill-mode
style when the animation is not playing
animation-iteration-count
number of an animation replays
animation-name
name for the @keyframes animation
animation-play-state
the animation is running or paused
animation-timing-function
Color picker: 1C6EA4
speed curve of an animation
backface-visibility
is element visible when not facing the screen
1
background
all background properties in one declaration
color: #1C6EA4;
background-attachment Text color
is the background image fixed or scrolls
background-color:#1C6EA4; Background
background-blend-mode
blending mode of each background layer
border: 3px solid #1C6EA4; Box border
background-clip
painting area of the background
Text shadow
text-shadow: 1px 2px 2px #1C6EA4;
background-color background color
background-image
box-shadow: 2px 2px background
7px 1pxBoximage
shadow
#1C6EA4;
background-origin
Adsthe background image is positioned
where
background-position
starting position of the background image
background-repeat
the way the background image is repeated
background-size background image size
border
sets all border properties in one line
border-bottom
:
 bottom border properties in one line
border-bottom-color color of the bottom border
Ad closed by
border-bottom-left-radius
Full web development
border bottom left radius
border-bottom-right-radius

course
border bottom right radius
border-bottom-style border bottom style
border-bottom-width border bottom width
border-collapse border collapse
Web Developement
border-color border color Bootcamp
border-image sets an image as border
Become a Software Developer in 6
border-image-outset
border image area extends beyond the border
boxmonths
border-image-repeat
gomycode.com
border image repeated, rounded or stretched
border-image-slice
how to slice the border image
border-image-source path to the border image
border-image-width border image width
Background
border-left
left border properties inOPENone line
border-left-color
Image border left color
border-left-style https://htmlcheatsheet.com/images/logo-css.png
border left style
URL:
border-left-width none border left width
border-radius
Position:
border radius of the four rounded corners
border-right
right border properties in one line
border-right-color border right color
border-right-style border right 0 style
X:
border-right-width border right width
border-spacing Y: border spacing
0
border-style border style
border-top
Repeat: no repeat repeat-x
top border properties in one line
repeat-y
border-top-color border top color
border-top-left-radius
Attachment: scroll border top left radius
border-top-right-radius fixed
borderlocal
top right radius
border-top-style border top style
Color:
border-top-width D0E4F5 border top width 1
border-width border width
bottom
bottom offset for relative and absolute elements
box-shadow Preview
shadow to element
box-sizing box sizing properties
caption-side placement of a table caption
clear deny floating of an element
clip
clip an absolutely positioned element One line
color
background: #D0E4F5 text color
url("https://htmlcheatsheet.com/images/logo-
column-count
css.png")
divide no-repeat
the content scroll 0 0;
in columns
column-fill balanced fill or not
column-gap gap between the columns
column-rule
Gradient
:
 Gradient
separator between columns, like border
column-rule-color column rule color
column-rule-style column rule style
column-rule-width column rule width
1C6EA4 2388CB column
column-span 144E75 span
column-width column width
columns
Middle left top -45deg
set column-width and column-count
transition
content 45degcenter
insert content
50 :before and :after elements
counter-incrementHEX Codes
count sections
counter-reset reset counter
cursor
cursor type when
background: element is hovered
#1C6EA4;
direction
background: -moz-linear-gradient(left,
#1C6EA4
writing 0%, Arabic
direction, #2388CB 50%, rtl
is using #144E75
100%);
display box display type
background: -webkit-linear-gradient(left,
empty-cells
#1C6EA4
hide borders0%,and#2388CB
background 50%,
on #144E75
empty table
cells
filter
image effects: grayscale, blur, invert etc.
flex
Box
item length,Shadow
relative to others inside the container
flex-basis initial length of a flexible item
flex-direction
Right: 5direction of the Light
flexible items
backg.
flex-flow
shorthand for flex-direction
Down: 5 and flex-wrap
flex-grow
how much5the item will grow relativePreview
Spread: other items
flex-shrink
how
Blur:to shrink
5 the item relative to other items
flex-wrap wrap flexible items
float
Opacity: float elements
1 left or right
font all font properties in one line
@font-face
Inset declare non-web-safe fonts
font-family font of the element
font-size
Color: 000000 font size
font-size-adjust
control font size if the first declared option is not
available
-webkit-box-shadow: 5px 5px 15px 5px
#000000;
font-stretch widen or narrow text
box-shadow: 5px 5px 15px 5px #000000;
font-style
font style: normal, italic, oblique
font-variant set small-caps
font-weight use bold or thin characters
hanging-punctuation
can a punctuation mark be placed outside the line
Button Generator
box?
height height of the element
justify-content
Color: FFFFFF
justifies flexible container's items horizontally if
necessary
Size:
@keyframes
16
specifies the animation code
left
Padding: 6
left offset for relative and absolute elements
Radius:
:
 Radius:
letter-spacing space
10 between characters
line-height
Change gradient,
line height of textshadow, font and
or inline-block border in other
elements
panels.
list-style all list properties in one line
list-style-image
replace the list item marker with an image
list-style-position
CSS Button
list item markers inside or outside the content
flow
list-style-type
set the type of the list item marker
margin
set.myButton {
the top, right, bottom and left margins in one
color:
line rgb(255, 255, 255); font-size: 16px; line-
height: 16px; padding:
margin-bottom bottom6px;margin
border-radius:
10px;
margin-left font-family: Georgia,
left marginserif; font-weight:
normal; text-decoration: none; font-style:
margin-right right margin
margin-top margin top
max-height maximum height of element
max-width maximum width of element
Ads
@media see media queries
min-height minimum height
min-width minimum width
nav-down
where to navigate when the the arrow-down
button is pressed
nav-index
sets sequential navigation order
nav-left
where to navigate when the the arrow-left button
is pressed
nav-right
where to navigate when the the arrow-right button
is pressed
nav-up
where to navigate when the the arrow-up button
is pressed
opacity
transparency level of an element
order
reorder elements in a container
outline
drow an outer border around elements
outline-color outline color
outline-offset
gap between the element and the outline
outline-style outline style
outline-width outline width
overflow
hide, display or scroll if the content overflows its
container
overflow-x horizontal overflow
overflow-y vertical overflow
padding
padding between the element border and content
padding-bottom padding bottom
:
 padding-left padding left
padding-right padding right
padding-top padding top
page-break-after
adds page break after an element
page-break-before
adds page break before an element
page-break-inside
Text
allow Shadow
page break
perspective
inside an element

how many
Light pixels the 3D element is placed from
background
the view
perspective-origin
PREVIEW
where is the 3D element based in the x- and y-
axis
position
Right: type: absolute, fixed, relative,
positioning 2 static
quotes
set Down:
quotation marks to wrap an element 2
resize declare resizable elements
right Blur: 2
right offset for relative and absolute elements
Opacity:
tab-size tab character space length 1
table-layout table layout algorithm
Color:
text-align 1C6EA4 horizontal alignment of text
text-align-last
horizontal alignment of last line of text
Neon Flaming L u x Ghost
text-decoration Ghost Candy
Ghost
Ghost
Ghost Candy
overline, underline or line-through the text
text-indent
D
D e
eeepp more...
D
De
D ee
e ep
e p
p
indentation of the first line of the text
text-overflow
thetext-shadow: 2px 2px 2px
way how overflowed #1C6EA4;
content is marked
(ellipsis)
text-shadow text shadow
text-transform capitalization of text
top
top offset for relative and absolute elements
transform
2DFont Generator
3D transformation. See widget.
transform-origin
changes the position of transformed Lightelements
background
transform-style
G r u m p y w i zLaur xd s Ghost Ghost
make toxic
render nested elements L
L u
u inx
x 3D
b r e w f o r t h eL
transition
L
L
u
u
uexxv i l Q u e e n a n d
x
D
D e
e e
e p
p L
L u
u x
D
D
De e
eee
epp
transition
p properties in J
L
L au cxxxkline
one
u .
L
L u
u x
x
transition-delay
Neon Flaming L Lu ux x
delay before transition effect start
transition-duration
Font: Georgia transition effect duration
Neon
transition-property
whichSize:
CSS property is the transition affecting
Neon Flaming
transition-timing-function 16
speed curve of the transition
Letter
unicode-bidi 0
spc:
should the text be overridden to support more
languages
Neonspc:
Word

Deep
Neon Flaming
:
 user-select 0
Color:
disable user content
000000 selection
vertical-align vertical alignment
visibility
Weight: Normal Bold
visibility:hidden elements leave a gap
white-space
Decoration: None handled
Under Over
how are white-spaces
width width of an element
Through
word-break
text Style:
breaking rules when text
Normal reaches
Unset the end of
Italic
the container
word-spacing Oblique
size of white space between words
Variant:
word-wrap Normal SMALL CAPS
break long words and wrap onto the next line
Case:
z-index none stack order of lower
UPPER the element

Capital

font-family: Georgia, serif;

font-size: 16px;
letter-spacing: 2px;
word-spacing: 2px;
color: #000000;
font-weight: normal;
text-decoration: none;
Transform
font-style: normal;

Scale: 1 1 x

Rotate: 0 0 deg

X: 0 0 px

Y: 0 0 px
Privacy
Skew 0 0 deg
X:

Skew 0 0 deg
Y:

Preview

-moz-transform:none;
-webkit-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
:
 Border / Outline

Preview

Border Outline

Width: 2

Style:
solid dotted dashed

double groove ridge

inset outset hidden none

Color: 1C6EA4 1
Position:
All Top Right

Bottom Left

One line
border: 2px solid #1C6EA4;

Border Radius
0 0
All

0 0

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

@media screen and (max-width: 600px), (max-height: 500px) {

Print style
@media print { ... }

Night / dark mode

@media (prefers-color-scheme: dark) { ... }

Media types
all, print, screen, speech

Media features
width viewport width
height viewport height
orientation orientation of the viewport
aspect-ratio ratio between width & height
color number of bits per color
color-index number of displayable colors
monochrome color on greyscale device
resolution resolution of the device
scan
scanning process of the device
grid device 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,acronym,address
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;}
table { border-collapse: collapse; border-spacing: 0;}

Ads
:
 px - em
Parent: 0 px

desired 0 px
px:

desired 0 em
em:

HTML Cheat Sheet is using cookies. | PDF | Terms and Conditions, Privacy Policy
© HTMLCheatSheet.com
:
: