HTML Cheat Sheet.

com / CSS
Basics

Selectors Syntax
selector{
* all elements property: value;
div all div tags property2: value2;
div,p all divs and paragraphs }
div p paragraphs inside divs
div > p all p tags, one level deep in div Include external css file
div + p p tags immediately after div <link rel="stylesheet" type="text/css" href="/style
div ~ p p tags preceded by div
.classname all elements with class
Internal styles
#idname element with ID
div.classname divs with certain classname <style type="text/css">
div#idname div with certain ID div { color: #444;}
#idname * all elements inside #idname </style>

Pseudo classes Inline styles

a:link link in normal state <tag style="property: value"> </tag>
a:active link in clicked state
a:hover link with mouse over it Clearfix
a:visited visited link
p::after{content:"yo";} add content after p .clearfix:after {
p::before add content before p clear: both;
input:checked checked inputs content: " ";
input:disabled disabled inputs display: block;
input:enabled enabled inputs font-size: 0;
input:focus input has focus height: 0;
input:in-range value in range visibility: hidden;
input:out-of-range input value out of range }
input:valid input with valid value .clearfix { display: inline-block; }
input:invalid input with invalid value * html .clearfix { height: 1%; }
input:optional no required attribute .clearfix { display: block; }
input:required input with requred attribute
input:read-only with readonly attribute Box model
input:read-write no readonly attrib.
div:empty element with no children margin
p::first-letter first letter in p border
p::first-line first line in p padding
p:first-of-type first of some type content
p:last-of-type last of some type
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 Properties
p:nth-last-child(2) second child from behind
p:nth-of-type(2) second p of its parent align-content behavior of the flex-wrap property
p:nth-last-of-type(2) ...from behind align-items
p:only-of-type unique of its parent alignment for items inside the container
p:only-child only child of its parent align-self alignment for the selected item
:root documents root element all changes all properties
::selection portion selected by user animation binds an animation to an element
:target highlight active anchor animation-delay delays animation start
animation-direction
Attribute selectors reverse animation or in alternate cycles
animation-duration animation duration in seconds or ms
a[target] links with a target attribute
animation-fill-mode style when the animation is not playin
a[target="_blank"] links which open in new tab
animation-iteration-count number of an animation replay
[title~="chair"] title element containing a word
animation-name name for the @keyframes animation
[class^="chair"] class starts with chair
animation-play-state the animation is running or paused
[class|="chair"] class starts with the chair word
animation-timing-function speed curve of an animation
[class*="chair"] class contains chair
backface-visibility
[class$="chair"] class ends with chair is element visible when not facing the screen
input[type="button"] specified input type background
all background properties in one declaration
background-attachment
Color Picker is the background image fixed or scrolls
background-blend-mode
blending mode of each background layer
background-clip painting area of the background
background-color background color
background-image background image
background-origin
where the background image is positioned
1C6EA4 1 background-position
starting position of the background image
color: #1C6EA4; Text color
background-repeat
background-color:#1C6EA4; Background the way the background image is repeated
background-size background image size
border: 3px solid #1C6EA4; Box border border sets all border properties in one line
border-bottom bottom border properties in one line
text-shadow: 1px 2px 2px #1C6 Text shadow border-bottom-color color of the bottom border
border-bottom-left-radius border bottom left radius
box-shadow: 2px 2px 7px 1px # Box shadow border-bottom-right-radius border bottom right radius
border-bottom-style border bottom style
border-bottom-width border bottom width
border-collapse border collapse
border-color border color
Background border-image
border-image-outset
sets an image as border

border image area extends beyond the border box

Image URL: https://htmlcheatsheet.com/images/logo-cs border-image-repeat
none border image repeated, rounded or stretched
border-image-slice how to slice the border image
Position: border-image-source path to the border image
0 border-image-width border image width
X:
border-left left border properties in one line
Y: 0 border-left-color border left color
border-left-style border left style
Repeat: no repeat repeat-x repeat-y border-left-width border left width
border-radius
Attachment: scroll fixed local border radius of the four rounded corners
border-right right border properties in one line
Color: border-right-color border right color
D0E4F5 1 border-right-style border right style
border-right-width border right width
border-spacing border spacing
border-style border style
Preview border-top top border properties in one line
border-top-color border top color
border-top-left-radius border top left radius
border-top-right-radius border top right radius
One line border-top-style border top style
border-top-width border top width
background: #D0E4F5
border-width border width
url("https://htmlcheatsheet.com/images/logo-css.png")
no-repeat scroll 0 0; bottom
bottom offset for relative and absolute elements
box-shadow 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
color text color
column-count divide the content in columns
Gradient column-fill balanced fill or not
column-gap gap between the columns
column-rule
separator between columns, like border
column-rule-color column rule color
1C6EA4 2388CB 144E75
column-rule-style column rule style
column-rule-width column rule width
column-span column span
 column-width column width
Middle columns set column-width and column-count
transition content
insert content :before and :after elements
50 counter-increment count sections
HEX Codes
counter-reset reset counter
cursor cursor type when element is hovered
background: #1C6EA4;
background: -moz-linear-gradient(left, #1C6EA4 0%, direction writing direction, Arabic is using rtl
#2388CB 50%, #144E75 100%); display box display type
background: -webkit-linear-gradient(left, #1C6EA4 empty-cells
0%, #2388CB 50%, #144E75 100%); hide borders and background on empty table cells
b k d li di t(t i ht #1C6EA4 0% filter
image effects: grayscale, blur, invert etc.
flex
item length, relative to others inside the container
Box Shadow flex-basis initial length of a flexible item
flex-direction direction of the flexible items
flex-flow
Right: 5 Light backg. shorthand for flex-direction and flex-wrap
flex-grow
Down: 5 how much the item will grow relative other items
flex-shrink
Spread: 5 Preview
how to shrink the item relative to other items
flex-wrap wrap flexible items
Blur: 5 float float elements left or right
font all font properties in one line
Opacity: 1 @font-face declare non-web-safe fonts
font-family font of the element
Inset
font-size font size
font-size-adjust
Color: 000000 control font size if the first declared option is not available
font-stretch widen or narrow text
-webkit-box-shadow: 5px 5px 15px 5px #000000; font-style font style: normal, italic, oblique
box-shadow: 5px 5px 15px 5px #000000; font-variant set small-caps
font-weight use bold or thin characters
hanging-punctuation
can a punctuation mark be placed outside the line box?
height height of the element
justify-content
Button Generator justifies flexible container's items horizontally if necessary
@keyframes specifies the animation code
left
Color: left offset for relative and absolute elements
FFFFFF letter-spacing space between characters
line-height
Size: 16 line height of text or inline-block elements
list-style all list properties in one line
Padding: 6 list-style-image
replace the list item marker with an image
Radius: 10 list-style-position
Change gradient, shadow, font and border in other panels. list item markers inside or outside the content flow
list-style-type set the type of the list item marker
margin
CSS Button set the top, right, bottom and left margins in one line
margin-bottom bottom margin
margin-left left margin
margin-right right margin
margin-top margin top
max-height maximum height of element
.myButton { max-width maximum width of element
color: rgb(255, 255, 255); font-size: 16px; line-height: @media see media queries
16px; padding: 6px; border-radius: 10px; font-family: min-height minimum height
Georgia, serif; font-weight: normal; text-decoration: min-width minimum width
f t t l l f t i t l t t 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 presse
Text Shadow nav-right
 where to navigate when the the arrow-right button is
Light background pressed
nav-up
PREVIEW where to navigate when the the arrow-up button is presse
opacity transparency level of an element
order reorder elements in a container
Right: 2 outline drow an outer border around elemen
outline-color outline color
Down: 2 outline-offset
gap between the element and the outline
Blur: 2 outline-style outline style
outline-width outline width
Opacity: 1 overflow
hide, display or scroll if the content overflows its container
Color: 1C6EA4 overflow-x horizontal overflow
overflow-y vertical overflow
g padding
Flaming Ghost Candy padding between the element border and content
Neon Ghost
Flaming LLuuxx Ghost
Ghost
Ghost Candy Deep
Deep
Luuxx Deep
Deep padding-bottom padding bottom
L
L Deep
more... padding-left padding left
padding-right padding right
text-shadow: 2px 2px 2px #1C6EA4; 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 allow page break inside an element
perspective
Font Generator how many pixels the 3D element is placed from the view
perspective-origin
Light background where is the 3D element based in the x- and y-axis
position
Grumpy wizards make toxic brew positioning type: absolute, fixed, relative, static
for the evil Queen and Jack. quotes
set quotation marks to wrap an element
resize declare resizable elements
right
right offset for relative and absolute elements
Font: Georgia tab-size tab character space length
table-layout table layout algorithm
Size: 16 text-align horizontal alignment of text
text-align-last horizontal alignment of last line of tex
Letter spc: 0 text-decoration
overline, underline or line-through the text
Word spc: 0 text-indent indentation of the first line of the text
text-overflow
Color: 000000 the way how overflowed content is marked (ellipsis)
text-shadow text shadow
Weight: Normal Bold
 
text-transform capitalization of text
top
Decoration: None Under Over Through
Transform
top offset for relative and absolute elements
transform 2D 3D transformation. See widget.
transform-origin 1.3 x
Style: Normal Unset Italic Oblique Scale: 1.3 elements
changes the position of transformed
transform-style render nested elements41 in 3D deg
Variant: Rotate: 41 transition properties in one
Normal S transition line
transition-delay delay before transition effect
8 start
px
X:
Case: none UPPER lower Capital transition-duration transition8effect duration
transition-property 8 px
Y: 8
which CSS property is the transition affecting
font-family: Georgia, serif; transition-timing-function speed curve of the
font-size: 16px; Skew X: 12 12 transition
deg
unicode-bidi
letter-spacing: 2px; should the text be overridden to support more
word-spacing: 2px; Skew Y: 20languages
20 content selection deg
user-select disable user
color: #000000;
font-weight: normal; vertical-align vertical alignment
text-decoration: none; visibility visibility:hidden elements leave a gap
f t t l l white-space how are rotate(41deg)
-moz-transform: scale(1.3) white-spaces handled
translate(8px, 8px)width
width skew(12deg, 20deg);
of an element
-webkit-transform: scale(1.3) rotate(41deg)
word-break
translate(8px,
text breaking rules8px) skew(12deg,
when text reaches20deg);
the end of the
t
container f l (1 3) t t (41d )

Border / Outline word-spacing size of white space between words

 Border / Outline word-wrap
break long words and wrap onto the next line
Border Radius
z-index stack order of the element
Preview
0 0
All

Border Outline 0 0

Width: 2

Style:
solid dotted dashed double
Media Queries
groove ridge inset outset
Syntax
hidden none
@media not|only mediatype and (media feature) {
CSS Code }
Color: 1C6EA4 1 Link external file:
<link rel="stylesheet" media=mediatype and|not|only
Position:
All Top Right Bottom
Viewport is 480 pixels or smaller
Left @media screen and (max-width: 480px) { }

One line
Viewport width smaller OR height smaller
border: 2px solid #1C6EA4;
@media screen and (max-width: 600px), (max-height:

Print style
@media print { ... }

Reset CSS Night / dark mode

@media (prefers-color-scheme: dark) { ... }
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5
article,aside,details,figcaption,figure,footer,header,
body { line-height: 1;} Media types
ol,ul { list-style: none;} all, print, screen, speech
blockquote,q { quotes: none;}
Media features
blockquote:before,blockquote:after,q:before,q:after {
table { border-collapse: collapse; border-spacing: 0;} width viewport width
height viewport height
orientation orientation of the viewport
aspect-ratio ratio between width & height
px - em color number of bits per color
color-index number of displayable colors
monochrome color on greyscale device
Parent: 0 px
resolution resolution of the device
scan scanning process of the device
desired px: 0 px
grid device is a grid or bitmap
desired em: 0 em

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