Skip to content

CSS Cheat Sheet

CSS (Cascading Style Sheets) is used to control layout, design, and visual presentation of web pages. This CSS cheatsheet is a structured, example-driven reference covering selectors, the box model, layout systems, typography, colors, animations, and responsive design patterns.

Basic Syntax

selector {
  property: value;
}

body {
  margin: 0;
  font-family: sans-serif;
}

Selectors

Type, Class, ID

div { }
.container { }
#header { }

Grouping

h1, h2, h3 {
  font-weight: bold;
}

Descendant & Child

.container p { }
.container > p { }

Attribute Selectors

input[type="text"] { }
a[href^="https"] { }

Pseudo-classes

a:hover { }
a:active { }
input:focus { }
li:first-child { }
li:last-child { }

Structural

li:nth-child(2) { }
li:nth-child(even) { }

Pseudo-elements

p::before { content: "→ "; }
p::after { content: ""; }
::selection { background: yellow; }

Box Model

.box {
  width: 200px;
  padding: 16px;
  border: 2px solid black;
  margin: 10px;
}

* {
  box-sizing: border-box;
}

Display

display: block;
display: inline;
display: inline-block;
display: none;
display: flex;
display: grid;

Positioning

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

.top-right {
  position: absolute;
  top: 0;
  right: 0;
}

Z-Index

.modal {
  position: fixed;
  z-index: 1000;
}

Overflow

overflow: hidden;
overflow: auto;
overflow-x: scroll;

Flexbox

.container {
  display: flex;
}

Direction & Wrap

flex-direction: row;
flex-direction: column;
flex-wrap: wrap;

Alignment

justify-content: center;
align-items: center;
align-content: space-between;

Item Properties

.item {
  flex: 1;
  align-self: flex-end;
}

Grid

.container {
  display: grid;
}

Columns & Rows

grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr;
gap: 16px;

Placement

.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

Sizing Units

width: 100px;
width: 50%;
width: 10rem;
width: 10vw;
height: 100vh;

Colors

color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: rgba(0, 0, 0, 0.5);
color: hsl(120, 100%, 50%);

background-color: transparent;

Typography

font-family: Arial, sans-serif;
font-size: 16px;
font-weight: 400;
font-style: italic;
line-height: 1.5;

Text

text-align: center;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 1px;

Lists

ul {
  list-style: none;
  padding: 0;
}

Backgrounds

background-color: #000;
background-image: url("image.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;

Borders & Radius

border: 1px solid #ccc;
border-radius: 8px;

Shadows

box-shadow: 0 4px 10px rgba(0,0,0,0.2);
text-shadow: 1px 1px 2px black;

Transitions

.button {
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: red;
}

Transforms

transform: translateX(10px);
transform: scale(1.2);
transform: rotate(45deg);

Animations

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.box {
  animation: fade 1s ease-in-out;
}

Visibility & Opacity

visibility: hidden;
opacity: 0.5;

Media Queries

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background: black;
    color: white;
  }
}

CSS Variables

:root {
  --primary: #4f46e5;
}

.button {
  background: var(--primary);
}

Object Fit

img {
  object-fit: cover;
}

Cursor

cursor: pointer;
cursor: not-allowed;

User Interaction

user-select: none;
pointer-events: none;

@media print {
  body {
    color: black;
  }
}