CSS Cheatsheet

25 of 25 code examples

.css

Basic Structure

HTML with internal CSS

Basics

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; margin: 0; }
    h1 { color: blue; text-align: center; }
  </style>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

Colors & Text

Text styling and colors

Basics

/* Colors */
color: red;
color: #0066cc;
color: rgb(255, 0, 0);

/* Text */
font-size: 24px;
font-weight: bold;
text-align: center;
text-decoration: underline;

Box Model

Width, height, padding, margin, border

Basics

/* Box properties */
width: 200px;
height: 100px;
padding: 20px;
margin: 10px;
border: 2px solid black;

/* Border radius */
border-radius: 10px;
box-shadow: 5px 5px 10px gray;

Flexbox

Flexible layout system

Layout

/* Container */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* Items */
.item {
  flex: 1;
  min-width: 200px;
}

/* Centering */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

CSS Grid

Grid layout system

Layout

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

/* Named areas */
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }

Responsive Design

Media queries

Layout

/* Mobile first */
.container {
  width: 100%;
  padding: 10px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    max-width: 750px;
    margin: 0 auto;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: white;
  }
}

Animations

CSS animations and transitions

Effects

/* Transition */
.button {
  background: blue;
  transition: all 0.3s ease;
}

.button:hover {
  background: red;
  transform: scale(1.05);
}

/* Keyframe animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

Positioning

CSS positioning

Layout

/* Relative */
.relative {
  position: relative;
  top: 10px;
  left: 20px;
}

/* Absolute */
.absolute {
  position: absolute;
  top: 50px;
  right: 30px;
}

/* Fixed */
.fixed {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Sticky */
.sticky {
  position: sticky;
  top: 0;
}

Typography

Text styling

Typography

/* Font properties */
.text {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

/* Text alignment */
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }

/* Text transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }

Colors & Backgrounds

Colors and backgrounds

Styling

/* Color values */
.color-hex { color: #ff0000; }
.color-rgb { color: rgb(255, 0, 0); }
.color-rgba { color: rgba(255, 0, 0, 0.5); }

/* Backgrounds */
.background {
  background-color: #f0f0f0;
  background-image: url('image.jpg');
  background-size: cover;
}

/* Gradients */
.gradient {
  background: linear-gradient(45deg, red, blue);
}

Borders & Shadows

Borders and shadows

Styling

/* Borders */
.border {
  border: 2px solid #333;
  border-radius: 8px;
}

/* Border radius */
.rounded { border-radius: 10px; }
.circle { border-radius: 50%; }

/* Shadows */
.shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

Pseudo-classes

Interactive states

Selectors

/* Link states */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }

/* Form states */
input:focus {
  outline: 2px solid blue;
}

input:invalid {
  border-color: red;
}

/* Structural */
li:first-child { font-weight: bold; }
li:nth-child(odd) { background: #f9f9f9; }

Pseudo-elements

Generated content

Selectors

/* Before and after */
.quote::before {
  content: '"';
  font-size: 2em;
}

.quote::after {
  content: '"';
  font-size: 2em;
}

/* First letter */
.first-letter::first-letter {
  font-size: 3em;
  float: left;
}

/* Selection */
::selection {
  background: blue;
  color: white;
}

/* Placeholder */
input::placeholder {
  color: #999;
}

CSS Variables

Custom properties

Advanced

/* Define variables */
:root {
  --primary-color: #007bff;
  --font-size: 16px;
  --spacing: 20px;
}

/* Use variables */
.button {
  background: var(--primary-color);
  font-size: var(--font-size);
  padding: var(--spacing);
}

/* Fallback */
.text {
  color: var(--text-color, #333);
}

Transforms

2D and 3D transforms

Effects

/* 2D Transforms */
.transform {
  transform: translate(50px, 100px);
  transform: rotate(45deg);
  transform: scale(1.5);
}

/* Combined */
.combined {
  transform: translate(50px) rotate(45deg) scale(1.2);
}

/* 3D */
.transform-3d {
  transform: rotateX(45deg);
  transform: rotateY(45deg);
}

Filters

Visual effects

Effects

/* Basic filters */
.blur { filter: blur(5px); }
.grayscale { filter: grayscale(100%); }
.brightness { filter: brightness(1.5); }

/* Combined */
.combined-filters {
  filter: blur(2px) brightness(1.2);
}

/* Drop shadow */
.drop-shadow {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

CSS Functions

CSS functions for dynamic values

Advanced

/* Calc */
.calc {
  width: calc(100% - 40px);
  height: calc(100vh - 80px);
}

/* Min and Max */
.min-max {
  width: min(300px, 100%);
  height: max(200px, 50vh);
}

/* Clamp */
.clamp {
  font-size: clamp(14px, 4vw, 24px);
}

/* Custom properties */
:root {
  --base-size: 16px;
}

.scaled {
  font-size: calc(var(--base-size) * 1.2);
}

CSS Units

Measurement units

Basics

/* Absolute units */
.absolute {
  width: 100px;        /* pixels */
  height: 2.5cm;       /* centimeters */
  font-size: 12pt;     /* points */
}

/* Relative units */
.relative {
  width: 50%;          /* percentage */
  height: 100vh;       /* viewport height */
  font-size: 2em;      /* element font size */
  margin: 1rem;        /* root font size */
}

/* Viewport units */
.viewport {
  width: 100vw;        /* viewport width */
  font-size: 4vw;      /* viewport width */
}

Selectors

Advanced selector patterns

Selectors

/* Attribute selectors */
[type="text"] { border: 2px solid blue; }
[class*="btn"] { background: green; }
[href^="https"] { color: green; }

/* Combinators */
.parent > .child { color: blue; }
.sibling + .sibling { margin-top: 20px; }

/* Pseudo-class combinations */
input:not(:disabled):focus { 
  border-color: blue; 
}

li:first-child:last-child { 
  color: red; 
}

Layout Techniques

Common layout patterns

Layout

/* Centering */
.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.center-grid {
  display: grid;
  place-items: center;
}

.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Sticky footer */
.sticky-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sticky-footer main {
  flex: 1;
}

Performance

CSS performance tips

Performance

/* Efficient selectors */
.efficient { background: blue; }
/* Avoid: .container .wrapper .content .button */

/* Transform animations */
.animate {
  transform: translateX(0);
  transition: transform 0.3s ease;
}

.animate:hover {
  transform: translateX(20px);
}

/* CSS containment */
.contain {
  contain: layout style paint;
}

/* Will-change */
.will-change {
  will-change: transform;
}

Debugging

CSS debugging techniques

Debugging

/* Debug borders */
.debug * {
  outline: 1px solid red;
}

/* Debug grid */
.debug-grid {
  background-image: 
    linear-gradient(rgba(255,0,0,0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Debug flexbox */
.debug-flex {
  display: flex;
  border: 2px dashed #ccc;
}

.debug-flex > * {
  border: 1px solid #999;
}

/* Empty elements */
.debug-empty:empty {
  background: yellow;
}

Real-World: Card Component

Modern card design

Real World

.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 24px;
  max-width: 300px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-header {
  margin-bottom: 16px;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.card-content {
  color: #666;
  line-height: 1.5;
}

Real-World: Button Styles

Modern button designs

Real World

.btn {
  display: inline-block;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover {
  background: #0056b3;
  transform: translateY(-2px);
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-outline {
  background: transparent;
  border: 2px solid #007bff;
  color: #007bff;
}

.btn-outline:hover {
  background: #007bff;
  color: white;
}

Real-World: Navigation

Modern navigation bar

Real World

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #007bff;
}

.nav-link.active {
  color: #007bff;
}