CSS Cheat Sheet with Example Code

Hello my friend! Today I show you complete CSS Cheat Sheet with clear code examples and practical tips! CSS (Cascading Style Sheets) helps you style HTML elements, create beautiful web layouts, and build responsive designs! Very easy to read and quick to reference every day. Let's get started!

1. Basic CSS Syntax

CSS rules consist of a selector, property name, and property value.

/* selector { property: value; } */
h1 {
  color: #2563eb;
  font-size: 24px;
}

💡 Tip: Always end CSS property declarations with semicolon ; so browser parses subsequent properties correctly without syntax error!

2. CSS Selectors

Select which HTML elements on web page you want to apply styles to.

/* Universal selector (selects ALL elements) */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Element selector */
p { color: #333333; }

/* Class selector (starts with dot .) */
.btn-primary { background-color: #2563eb; }

/* ID selector (starts with hash #) */
#mainHeader { font-weight: bold; }

/* Descendant selector (p inside div) */
div p { color: #666666; }

/* Direct Child selector (only direct p children inside div) */
div > p { color: #111111; }

/* Attribute selector */
input[type="text"] { border: 1px solid #cccccc; }

💡 Tip: Use Class selectors (.className) for styling reusable components! Avoid overusing ID selectors (#idName) because IDs have high specificity and cannot be reused on multiple elements!

3. Colors & Background Properties

Apply foreground text colors, background colors, and background images.

/* Text color */
.card-title {
  color: #1e293b;
}

/* Solid background color */
.card {
  background-color: #ffffff;
}

/* Background image with cover sizing */
.hero-section {
  background-image: url("hero-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

💡 Tip: Always use background-size: cover; and background-position: center; when setting hero background images so the image scales gracefully on mobile screens!

4. Typography & Text Styling

Control font family, size, weight, alignment, and line height.

.article-text {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  line-height: 1.6;
  text-decoration: none;
  letter-spacing: 0.5px;
}

💡 Tip: Set line-height: 1.5 or 1.6 for body text! It gives comfortable spacing between lines so user can read paragraphs easily without eye strain!

5. Box Model (margin, padding, border, box-sizing)

Every element in CSS is a rectangular box made of Content, Padding, Border, and Margin!

.box {
  width: 300px;
  height: 150px;
  padding: 20px;       /* Space INSIDE border */
  margin: 15px;        /* Space OUTSIDE border */
  border: 2px solid #e2e8f0;
  box-sizing: border-box; /* Includes padding & border inside total width! */
}

💡 Tip: Always set box-sizing: border-box; globally in * selector! Without border-box, padding and borders add to container width and break your layouts!

6. Display Property (block, inline, inline-block, none)

Control how elements are rendered in document flow.

/* Block: Takes full width, starts on new line (<div>, <p>, <h1>) */
.element-block {
  display: block;
}

/* Inline: Takes only content width, stays on same line (<span>, <a>) */
.element-inline {
  display: inline;
}

/* Inline-block: Stays on same line, BUT respects width & height! */
.element-inline-block {
  display: inline-block;
  width: 120px;
}

/* None: Hides element completely from screen */
.element-hidden {
  display: none;
}

💡 Tip: Use display: inline-block; when you want buttons or badges to stay side-by-side while respecting custom padding and width!

7. Flexbox Layout System

1D layout model for arranging items in row or column.

.flex-container {
  display: flex;
  flex-direction: row;      /* Row or column */
  justify-content: center; /* Horizontally center items */
  align-items: center;     /* Vertically center items */
  gap: 16px;               /* Space between flex items */
  flex-wrap: wrap;         /* Wrap to next line on small screen */
}

💡 Tip: display: flex; justify-content: center; align-items: center; is the ultimate 3-line trick to center any element vertically and horizontally!

8. CSS Grid Layout System

2D layout model for building complex grid columns and rows.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 20px;                            /* Space between grid cells */
}

/* Responsive grid auto-fit trick! */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

💡 Tip: repeat(auto-fit, minmax(250px, 1fr)) creates automatic responsive grid cards without writing media queries!

9. CSS Positioning (relative, absolute, fixed, sticky)

Position elements relative to document flow or parent container.

/* Relative: Positioned relative to its normal position */
.parent-box {
  position: relative;
}

/* Absolute: Positioned relative to nearest relative parent */
.badge-tag {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* Fixed: Stays fixed on screen even when page scrolls (like Navbar) */
.navbar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/* Sticky: Scrolls normally until top offset, then sticks to top! */
.sidebar-sticky {
  position: sticky;
  top: 20px;
}

💡 Tip: When using position: absolute;, make sure the parent container has position: relative; so child badge doesn't jump to top of entire page!

10. Responsive Media Queries

Adapt website layout for mobile phones, tablets, and desktop screens.

/* Desktop default styles */
.container {
  width: 80%;
}

/* Tablet & Mobile Screens (768px or smaller) */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 10px;
  }

  .nav-menu {
    flex-direction: column;
  }
}

💡 Tip: Mobile-first design approach: write base CSS for mobile screens first, then use @media (min-width: 768px) to add desktop enhancements!

11. Pseudo-classes & Hover States

Style interactive states of buttons, links, and form inputs.

/* Hover state when mouse over button */
.btn:hover {
  background-color: #1d4ed8;
}

/* Focus state when user clicks into input field */
input:focus {
  outline: 2px solid #2563eb;
}

/* Select first or last child element */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }

💡 Tip: Always provide visible :focus styles for buttons and inputs so keyboard users can navigate your website cleanly!

12. Borders & Border Radius

Add outlines and smooth rounded corners to containers.

.card-box {
  border: 1px solid #cbd5e1;
  border-radius: 12px;      /* Rounded corners */
  border-left: 4px solid #2563eb; /* Accent left border */
}

.avatar-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;       /* Makes square element 100% circle! */
}

💡 Tip: Set border-radius: 50%; on square image (width === height) to create perfect circular avatar profile pictures!

13. Box Shadows & Text Shadows

Add depth, drop shadows, and elevation effects.

/* Box shadow: offset-x | offset-y | blur-radius | spread-radius | color */
.card-shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Text shadow: offset-x | offset-y | blur-radius | color */
.hero-title {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

💡 Tip: Use semi-transparent rgba(0, 0, 0, 0.1) color for shadows! Soft shadows look modern and realistic compared to solid black shadows!

14. CSS Transitions & Transforms

Animate element properties smoothly on user interaction.

.btn-animate {
  background-color: #2563eb;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.btn-animate:hover {
  background-color: #1d4ed8;
  transform: translateY(-3px) scale(1.03); /* Lift up & slight scale */
}

💡 Tip: Specify exact properties inside transition: transform 0.3s ease; instead of transition: all 0.3s; to improve browser rendering performance!

15. CSS Custom Variables (:root)

Store global reusable colors and values in CSS variables.

/* Declare global variables inside :root */
:root {
  --primary-color: #2563eb;
  --text-dark: #0f172a;
  --radius-md: 8px;
}

/* Use variables throughout your stylesheet */
.button {
  background-color: var(--primary-color);
  color: #ffffff;
  border-radius: var(--radius-md);
}

💡 Tip: Using CSS variables makes theme switching (like Dark Mode vs Light Mode) super easy by changing :root variable values in 1 place!

16. CSS Measurement Units Summary

Quick guide to choosing proper units for responsive typography and layout.

px   → Absolute pixels (fixed size, good for borders: 1px)
%    → Percentage relative to parent container width
rem  → Relative to Root (<html>) font size (1rem = 16px default, BEST for typography & padding!)
em   → Relative to parent element font size
vw   → Viewport Width (1vw = 1% of screen width)
vh   → Viewport Height (1vh = 1% of screen height)
fr   → Grid Fraction (used in CSS Grid layout)

💡 Tip: Use rem for font sizes and padding instead of px so your text scales nicely when users change default browser accessibility font size!

17. Color Formats in CSS

Multiple ways to specify colors in CSS.

/* Color names */
color: red;

/* Hex code (6 characters) */
color: #ff0000;

/* RGB (Red, Green, Blue) */
color: rgb(255, 0, 0);

/* RGBA (RGB + Alpha transparency 0.0 to 1.0) */
color: rgba(255, 0, 0, 0.5);

/* HSL (Hue, Saturation, Lightness) */
color: hsl(0, 100%, 50%);

💡 Tip: Use rgba() or hsla() when you need semi-transparent backgrounds or overlay colors (e.g. background: rgba(0,0,0,0.5) for modal backdrop)!

Hope this CSS Cheat Sheet help you style websites and build responsive layouts easily! Practice using these CSS properties in your web projects. Happy learning my friends! Sharing is caring!