Most Practical CSS Cheat Sheet
CSS is a language for designing your website. which you can use to add background, colours, and even transitions or other interactive elements. When you are first learning how to code in CSS a beginner’s essential CSS cheat Sheet could be a big help.
SELECTORS
Universal Selector - * { }
ID Selector - #id { }
Class Selector - .class{ }
Type Selector - h1,h2,h3 { }
Adjacent Sibling Selector - H1+p{ }
Child Selector - ul>li { }
General Sibling Selector - h1~ p{ }
Descendant Selector - pa{ }
Attribute Selector - div[attribute="Some Value”] { }
PSEUDO SELECTORS & ELEMENTS
Mouse Over Selector - a:hover { }
Active Link Selector - a:active { }
Focus Selector - input:focus { }
Visited Links Selector - a:visited { }
Link Selector - .class:link{ }
Checked elements selector - input:checked { }
Disabled elements selector - input:disabled { }
Enabled elements selector - input :enabled { }
Not a Specified Element Selector - not(p) { }
First Line Selector - p:first-line{ }
First Letter Selector - p::first-letter { }
First Child Selector - p:first-child { }
Last Child Selector - p:last-child { }
Only Child Selector - p:only-child { }
nth-child Selector - p:nth-child { }
First Element of its Parent - p:first-of-type { }
Selector
Elements that have no Children - p:empty { }
Selector
Before Element - class:before { }
After Element - class::after { }
POSITION
Position - Position:static|relative|absolute|fixed |sticky Position Properties - top|right|bottom|left Float Element - float:left|right|none clear Floating Elements - clear:none|left|right|both Z Index - Z-index 3|auto|inherit
BACKGROUND
Background Image - background-image: url( )
Background Repeat - background-repeat: repeat-x|repeat-y | repeat |
|space| round|No-repeat
Background Attachment - background-attachment: scroll | fixed | local |
initial inherit
Background Color - background-color: #2AA9EO
Background Position - background-position: top | right| bottom | left |
center
BOX PROPERTIES
Box Sizing - box-sizing: border-box | content-box
Margin - margin: 2px 4px 6px 8px | 0 auto
Border Style - border-style: none | hidden | dotted|
dashed solid | double|groove|ridge|
inset|outset
Border Color - border-color: #2AA9E0
Padding - padding: 2px 4px 6px 8px
Border Width - border-width: 10px
LIST STYLING
List Type - list-style-type: disc | circle | square|none List Position - list-style-position: inside | outside List Image - list-style-image: url( )
TEXT STYLING
Font style - font-style: normal | italic oblique
Font Variant - font-variant: normal | small-caps
Font Weight - font-weight: normal|bold|bolder| lighter | 100 - 900
Font Size - font-size: 12px | 0.8em | 80%
Space Between Characters - letter-spacing: normal | 4px
Line Height - line-height: normal| 3em | 34%
Horizontal Alignment - text-align: left | right | center| justify
Vertical Alignment - vertical-align: baseline | 10px |sub|super |top | text-
top|middle|bottom|text-bottom | initial
Text Transform - text-transform: capitalise|lowercase| uppercase
Text Align Last - text-align-last: auto | left | right|center | justify I
start | end| initial |inherit
Text Decoration - text-decoration: none | underline|overline line-through
Indent First Line - text-indent: 25px
Font Family - font-family: 'Open Sans’, sans-serif
Text Justify - text-justify: auto | inter-word|inter-character| none |
|initial| inherit
Text Overflow - text-overflow: clip | ellipsis | string|initial|inherit
Text Shadow - text-shadow: h-shadow v-shadow blur-radius color |none|
| initial | inherit
