CSS Cheat Sheet
Use this CSS cheat sheet as a quick reference for selectors, properties, layout, colors, spacing, typography, responsive design, and common patterns.
Basic CSS Syntax
A CSS rule has a selector, a property, and a value.
Learn CSS on Mimo
CSS
selector {
property: value;
}
Example:
CSS
p {
color: blue;
font-size: 16px;
}
CSS Rule Parts
pis the selector.coloris the property.blueis the value.- Each declaration ends with a semicolon.
- Declarations live inside curly braces.
Ways to Add CSS
External CSS
Use an external stylesheet for most projects.
HTML
<link rel="stylesheet" href="styles.css">
CSS
body {
font-family: Arial, sans-serif;
}
Internal CSS
Use a <style> block inside the HTML file.
HTML
<style>
body {
background-color: #f5f5f5;
}
</style>
Inline CSS
Add styles directly to an element.
HTML
<p style="color: red;">Important message</p>
Use inline CSS sparingly. External CSS is easier to maintain.
Basic Selectors
Element Selector
Targets all elements of one type.
CSS
p {
color: #333;
}
Class Selector
Targets elements with a class.
CSS
.card {
padding: 24px;
}
HTML
<div class="card">Content</div>
ID Selector
Targets one element with a specific ID.
CSS
#main-header {
background-color: white;
}
HTML
<header id="main-header">Header</header>
Use classes for most styling. Use IDs when you need a unique hook.
Universal Selector
Targets every element.
CSS
* {
box-sizing: border-box;
}
Group Selector
Applies the same styles to multiple selectors.
CSS
h1,
h2,
h3 {
font-family: Arial, sans-serif;
}
Combinator Selectors
Descendant Selector
Targets elements inside another element.
CSS
.card p {
color: #555;
}
Child Selector
Targets direct children only.
CSS
.menu > li {
list-style: none;
}
Adjacent Sibling Selector
Targets the next sibling.
CSS
h2 + p {
margin-top: 0;
}
General Sibling Selector
Targets later siblings.
CSS
h2 ~ p {
color: #444;
}
Pseudo-Classes
Pseudo-classes style elements in a specific state.
Hover
CSS
.button:hover {
background-color: #005fcc;
}
Focus
CSS
.input:focus {
outline: 2px solid #0066ff;
}
Focus Visible
CSS
.button:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
First Child
CSS
li:first-child {
font-weight: bold;
}
Last Child
CSS
li:last-child {
margin-bottom: 0;
}
Nth Child
CSS
li:nth-child(odd) {
background-color: #f5f5f5;
}
Pseudo-Elements
Pseudo-elements style part of an element.
Before
CSS
.badge::before {
content: "★ ";
}
After
CSS
.external-link::after {
content: " ↗";
}
First Letter
CSS
.article p::first-letter {
font-size: 2rem;
}
Placeholder
CSS
input::placeholder {
color: #999;
}
Colors
Named Color
CSS
.text {
color: red;
}
Hex Color
CSS
.text {
color: #1f2937;
}
RGB Color
CSS
.text {
color: rgb(31 41 55);
}
RGBA or Alpha Color
CSS
.card {
background-color: rgb(255 255 255 / 0.8);
}
HSL Color
CSS
.highlight {
color: hsl(220 80% 50%);
}
Current Color
CSS
.icon {
color: #2563eb;
border: 1px solid currentColor;
}
Units
Absolute Units
pxsets fixed pixel values.ptis mostly used for print styles.
CSS
.box {
width: 300px;
}
Relative Units
%is relative to the parent.emis relative to the current element’s font size.remis relative to the root font size.vwis relative to viewport width.vhis relative to viewport height.
CSS
.container {
width: 90%;
max-width: 1200px;
}
.title {
font-size: 2rem;
}
.hero {
min-height: 100vh;
}
Box Model
Every element has content, padding, border, and margin.
CSS
.card {
width: 300px;
padding: 24px;
border: 1px solid #ddd;
margin: 32px;
}
Box Model Properties
widthsets the content width.heightsets the content height.paddingadds space inside the element.borderadds a line around the element.marginadds space outside the element.
Use Border Box
CSS
* {
box-sizing: border-box;
}
This makes width and height calculations easier because padding and border are included in the element size.
Spacing
Margin
CSS
.section {
margin-top: 48px;
margin-bottom: 48px;
}
Padding
CSS
.card {
padding: 24px;
}
Shorthand
CSS
.box {
margin: 10px 20px 30px 40px;
}
The order is top, right, bottom, left.
Two-Value Shorthand
CSS
.box {
padding: 16px 24px;
}
The first value controls top and bottom. The second controls left and right.
Display
Block
CSS
div {
display: block;
}
Block elements start on a new line and take the full available width.
Inline
CSS
span {
display: inline;
}
Inline elements flow with text and do not accept width or height in the same way.
Inline Block
CSS
.badge {
display: inline-block;
padding: 4px 8px;
}
Inline-block elements flow inline but accept width, height, padding, and margin.
None
CSS
.hidden {
display: none;
}
This removes the element from layout.
Flexbox
Use flexbox for one-dimensional layouts, such as rows, columns, navigation bars, and centered content.
Basic Flex Container
CSS
.container {
display: flex;
}
Horizontal Alignment
CSS
.container {
display: flex;
justify-content: center;
}
Vertical Alignment
CSS
.container {
display: flex;
align-items: center;
}
Center Both Ways
CSS
.container {
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
Row Direction
CSS
.container {
display: flex;
flex-direction: row;
}
Column Direction
CSS
.container {
display: flex;
flex-direction: column;
}
Gap Between Items
CSS
.container {
display: flex;
gap: 16px;
}
Wrap Items
CSS
.container {
display: flex;
flex-wrap: wrap;
}
Common Flex Item Properties
CSS
.item {
flex: 1;
}
CSS
.item {
align-self: flex-start;
}
Use flex: 1 when items should share available space.
CSS Grid
Use grid for two-dimensional layouts, such as cards, page sections, dashboards, and galleries.
Basic Grid
CSS
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
}
Responsive Grid
CSS
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}
Place Items in the Center
CSS
.grid {
display: grid;
place-items: center;
}
Span Columns
CSS
.featured {
grid-column: span 2;
}
Grid Areas
CSS
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
Positioning
Static
Default positioning.
CSS
.box {
position: static;
}
Relative
Moves an element relative to its normal position.
CSS
.box {
position: relative;
top: 10px;
}
Absolute
Positions an element relative to the nearest positioned parent.
CSS
.card {
position: relative;
}
.badge {
position: absolute;
top: 12px;
right: 12px;
}
Fixed
Positions an element relative to the viewport.
CSS
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
Sticky
Sticks an element after it reaches a scroll position.
CSS
.nav {
position: sticky;
top: 0;
}
Z-Index
Controls stacking order for positioned elements.
CSS
.modal {
position: fixed;
z-index: 1000;
}
Typography
Font Family
CSS
body {
font-family: Arial, Helvetica, sans-serif;
}
Font Size
CSS
p {
font-size: 16px;
}
Font Weight
CSS
strong {
font-weight: 700;
}
Line Height
CSS
p {
line-height: 1.6;
}
Letter Spacing
CSS
.label {
letter-spacing: 0.08em;
}
Text Align
CSS
.center {
text-align: center;
}
Text Transform
CSS
.label {
text-transform: uppercase;
}
Text Decoration
CSS
a {
text-decoration: none;
}
Backgrounds
Background Color
CSS
.section {
background-color: #f9fafb;
}
Background Image
CSS
.hero {
background-image: url("images/hero.jpg");
}
Background Size
CSS
.hero {
background-size: cover;
}
Background Position
CSS
.hero {
background-position: center;
}
Background Repeat
CSS
.hero {
background-repeat: no-repeat;
}
Background Overlay
CSS
.hero {
background-image:
linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)),
url("images/hero.jpg");
}
Borders and Radius
Border
CSS
.card {
border: 1px solid #ddd;
}
Border Radius
CSS
.card {
border-radius: 12px;
}
Circle
CSS
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
}
Border Side
CSS
.alert {
border-left: 4px solid #2563eb;
}
Shadows
Box Shadow
CSS
.card {
box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}
Text Shadow
CSS
.hero-title {
text-shadow: 0 2px 8px rgb(0 0 0 / 0.4);
}
Use shadows sparingly. Strong shadows can make a design look heavy.
Width and Height
Fixed Width
CSS
.box {
width: 300px;
}
Maximum Width
CSS
.container {
max-width: 1200px;
margin: 0 auto;
}
Minimum Height
CSS
.hero {
min-height: 500px;
}
Full Viewport Height
CSS
.section {
min-height: 100vh;
}
Responsive Image
CSS
img {
max-width: 100%;
height: auto;
}
Overflow
Hide Overflow
CSS
.box {
overflow: hidden;
}
Scroll Overflow
CSS
.panel {
max-height: 300px;
overflow-y: auto;
}
Text Ellipsis
CSS
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Transitions
Use transitions to animate property changes.
CSS
.button {
background-color: #2563eb;
transition: background-color 0.2s ease;
}
.button:hover {
background-color: #1d4ed8;
}
Common Transition Properties
transition-propertysets what changes.transition-durationsets how long it takes.transition-timing-functionsets the speed curve.transition-delaywaits before starting.
CSS
.card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
Transforms
Move
CSS
.box {
transform: translateY(-4px);
}
Scale
CSS
.button:hover {
transform: scale(1.05);
}
Rotate
CSS
.icon {
transform: rotate(45deg);
}
Combine Transforms
CSS
.card:hover {
transform: translateY(-4px) scale(1.02);
}
Opacity and Visibility
Opacity
CSS
.faded {
opacity: 0.5;
}
opacity affects the element and its children.
Visibility
CSS
.hidden {
visibility: hidden;
}
The element becomes invisible but still takes up space.
Display None
CSS
.removed {
display: none;
}
The element is removed from layout.
CSS Variables
CSS variables make repeated values easier to manage.
CSS
:root {
--color-primary: #2563eb;
--space-md: 16px;
--radius-md: 12px;
}
Use variables with var().
CSS
.button {
background-color: var(--color-primary);
padding: var(--space-md);
border-radius: var(--radius-md);
}
Variable Fallback
CSS
.button {
color: var(--button-text, white);
}
The fallback value is used if the variable is not defined.
Media Queries
Use media queries to change styles at different screen sizes.
CSS
.card {
padding: 16px;
}
@media (min-width: 768px) {
.card {
padding: 32px;
}
}
Common Breakpoints
480pxfor small phones and larger.768pxfor tablets and larger.1024pxfor laptops and larger.1280pxfor large screens.
Responsive Layout Example
CSS
.grid {
display: grid;
gap: 16px;
}
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
Common CSS Functions
calc()
CSS
.sidebar {
width: calc(100% - 250px);
}
min()
CSS
.title {
font-size: min(8vw, 64px);
}
max()
CSS
.section {
padding: max(24px, 5vw);
}
clamp()
CSS
h1 {
font-size: clamp(2rem, 6vw, 4rem);
}
clamp() sets a minimum, preferred, and maximum value.
Common CSS Patterns
Center an Element
CSS
.container {
display: flex;
align-items: center;
justify-content: center;
}
Center a Page Container
CSS
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
Create a Card
CSS
.card {
padding: 24px;
border: 1px solid #ddd;
border-radius: 16px;
background-color: white;
box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
}
Create a Button
CSS
.button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
border: 0;
border-radius: 8px;
background-color: #2563eb;
color: white;
font-weight: 600;
cursor: pointer;
}
Create a Responsive Grid
CSS
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}
Make a Sticky Header
CSS
.header {
position: sticky;
top: 0;
z-index: 100;
background-color: white;
}
Hide Content Visually but Keep It for Screen Readers
CSS
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
Specificity Basics
CSS specificity decides which rule wins when multiple rules target the same element.
Low Specificity
CSS
p {
color: gray;
}
Medium Specificity
CSS
.text {
color: blue;
}
Higher Specificity
CSS
#intro {
color: red;
}
Inline Styles Are Stronger
HTML
<p style="color: green;">Text</p>
Avoid Overusing !important
CSS
.text {
color: red !important;
}
Use !important only when you have a clear reason. It makes future changes harder.
CSS Reset
A small reset can make layouts more predictable.
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
img {
max-width: 100%;
height: auto;
}
Common Mistakes
Forgetting the Semicolon
CSS
.card {
color: blue
background-color: white;
}
Better:
CSS
.card {
color: blue;
background-color: white;
}
Missing a Closing Brace
CSS
.card {
padding: 24px;
Better:
CSS
.card {
padding: 24px;
}
Using width: 100vw and Causing Horizontal Scroll
CSS
.section {
width: 100vw;
}
Better:
CSS
.section {
width: 100%;
}
Stretching Images
CSS
img {
width: 400px;
height: 200px;
}
Better:
CSS
img {
width: 400px;
height: auto;
}
Using Fixed Heights for Dynamic Content
CSS
.card {
height: 200px;
}
Better:
CSS
.card {
min-height: 200px;
}
Debugging Tips
Add a Temporary Outline
CSS
* {
outline: 1px solid red;
}
This helps you see element boundaries.
Check Layout with DevTools
Use the browser inspector to check:
- Which CSS rules apply
- Which rules are overwritten
- The box model
- Flexbox and grid layout
- Computed sizes
- Active media queries
Test One Change at a Time
Change one property, refresh, and check the result. This makes CSS problems easier to isolate.
Quick Reference
Select by Element
CSS
p {
color: #333;
}
Select by Class
CSS
.card {
padding: 24px;
}
Select by ID
CSS
#hero {
min-height: 500px;
}
Add Spacing
CSS
.box {
margin: 24px;
padding: 16px;
}
Center with Flexbox
CSS
.box {
display: flex;
align-items: center;
justify-content: center;
}
Create a Grid
CSS
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
Make Images Responsive
CSS
img {
max-width: 100%;
height: auto;
}
Add a Media Query
CSS
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
Use a CSS Variable
CSS
:root {
--primary: #2563eb;
}
.button {
background-color: var(--primary);
}
Join 35M+ people learning for free on Mimo
4.8 out of 5 across 1M+ reviews
Check us out on Apple AppStore, Google Play Store, and Trustpilot