Ultimate CSS3 Cheatsheet: Modern Web Styling Guide

Introduction: What is CSS3?

CSS3 is the latest evolution of the Cascading Style Sheets language, introducing powerful styling capabilities beyond basic layouts. CSS3 is modular, with separate specifications for features like animations, layouts, and visual effects. This expanded functionality enables sophisticated designs with less reliance on JavaScript or images, improving performance and accessibility.

Core CSS3 Modules & Features

Selectors

Box Model Enhancements

Colors & Gradients

Color Models

Gradients

Linear Gradients

/* Basic directional */
background: linear-gradient(to right, #f00, #00f);

/* Angled */
background: linear-gradient(45deg, #f00, #00f);

/* Multiple color stops */
background: linear-gradient(to bottom, #f00, #ff0 50%, #00f);

/* Repeating */
background: repeating-linear-gradient(45deg, #f00, #00f 30px);

Radial Gradients

/* Basic */
background: radial-gradient(#f00, #00f);

/* Positioned */
background: radial-gradient(at top left, #f00, #00f);

/* Shaped */
background: radial-gradient(ellipse, #f00, #00f);

/* Size keywords */
background: radial-gradient(closest-corner at 50% 50%, #f00, #00f);

/* Repeating */
background: repeating-radial-gradient(circle, #f00, #00f 50px);

Conic Gradients

/* Basic */
background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);

/* From angle */
background: conic-gradient(from 45deg, #f00, #00f);

/* Positioned */
background: conic-gradient(at 25% 25%, #f00, #00f);

Transforms & Transitions

2D Transforms

3D Transforms

Transform Properties

/* Transform origin */
transform-origin: top left;

/* 3D space settings */
transform-style: preserve-3d;
perspective: 1000px;
perspective-origin: center;

/* Backface visibility */
backface-visibility: hidden;

Transitions

/* Individual properties */
transition-property: opacity, transform;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0.1s;

/* Shorthand */
transition: opacity 0.3s ease-in-out 0.1s, 
            transform 0.5s cubic-bezier(0.1, 0.7, 1.0, 0.1);

Timing Functions

Animations

Keyframes Definition

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

Animation Properties

/* Individual properties */
animation-name: slide-in;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 0.5s;
animation-iteration-count: 3;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-play-state: running;

/* Shorthand */
animation: slide-in 1s ease-out 0.5s 3 alternate forwards;

Multiple Animations

animation: 
  slide-in 1s ease-out,
  fade-in 2s linear;

Flexbox Layout

Container Properties

display: flex;           /* or inline-flex */
flex-direction: row;     /* row | row-reverse | column | column-reverse */
flex-wrap: wrap;         /* nowrap | wrap | wrap-reverse */
flex-flow: row wrap;     /* shorthand for direction and wrap */
justify-content: space-between; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
align-items: center;     /* flex-start | flex-end | center | baseline | stretch */
align-content: stretch;  /* flex-start | flex-end | center | space-between | space-around | stretch */
gap: 10px;               /* row-gap and column-gap shorthand */
row-gap: 10px;           /* spacing between rows */
column-gap: 20px;        /* spacing between columns */

Item Properties

order: 1;                /* Controls order of items */
flex-grow: 2;            /* Growth factor */
flex-shrink: 1;          /* Shrink factor */
flex-basis: 200px;       /* Initial size before distribution */
flex: 1 1 auto;          /* grow shrink basis shorthand */
align-self: flex-end;    /* Overrides container's align-items */

Grid Layout

Container Properties

display: grid;           /* or inline-grid */
grid-template-columns: repeat(3, 1fr);  /* defines columns */
grid-template-rows: 100px 200px auto;   /* defines rows */
grid-template-areas:     /* named template areas */
  "header header header"
  "sidebar content content"
  "footer footer footer";
grid-template: 100px 1fr 50px / repeat(3, 1fr);  /* rows / columns shorthand */
grid-column-gap: 10px;   /* spacing between columns */
grid-row-gap: 15px;      /* spacing between rows */
gap: 15px 10px;          /* row-gap column-gap shorthand */
justify-items: center;   /* horizontal alignment within cells */
align-items: center;     /* vertical alignment within cells */
justify-content: space-between;  /* horizontal alignment of entire grid */
align-content: center;   /* vertical alignment of entire grid */
grid-auto-columns: 100px;  /* size of auto-generated columns */
grid-auto-rows: minmax(100px, auto);  /* size of auto-generated rows */
grid-auto-flow: row dense;  /* controls auto-placement algorithm */

Item Properties

grid-column-start: 1;    /* starting column line */
grid-column-end: 3;      /* ending column line */
grid-column: 1 / 3;      /* shorthand for column-start/end */
grid-column: 1 / span 2; /* alternative spanning syntax */
grid-row-start: 1;       /* starting row line */
grid-row-end: 3;         /* ending row line */
grid-row: 1 / 3;         /* shorthand for row-start/end */
grid-area: header;       /* named grid area */
grid-area: 1 / 1 / 3 / 3;  /* row-start/column-start/row-end/column-end */
justify-self: center;    /* horizontal alignment in cell */
align-self: center;      /* vertical alignment in cell */

Media Queries & Responsive Design

Basic Syntax

@media screen and (max-width: 768px) {
  /* Rules for screens 768px and smaller */
  body {
    font-size: 14px;
  }
}

Media Features

Logical Operators

/* AND (all conditions must be true) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Rules for medium screens */
}

/* OR (comma-separated) */
@media screen and (max-width: 600px), (orientation: portrait) {
  /* Rules for small screens OR portrait orientation */
}

/* NOT */
@media not print {
  /* Rules for everything except print */
}

Text & Typography

Text Effects

/* Shadow */
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);

/* Overflow */
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

/* Decoration */
text-decoration: underline wavy red;
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
text-decoration-thickness: 2px;

/* Transform */
text-transform: uppercase;

/* Spacing */
letter-spacing: 0.5em;
word-spacing: 2px;
line-height: 1.5;

/* Alignment */
text-align: justify;
text-align-last: center;
text-justify: inter-word;

/* Direction */
writing-mode: vertical-rl;
text-orientation: upright;
direction: rtl;
unicode-bidi: bidi-override;

Web Fonts

/* @font-face */
@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/mycustomfont.woff2') format('woff2'),
       url('fonts/mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Variable fonts */
@font-face {
  font-family: 'MyVariableFont';
  src: url('fonts/myvariablefont.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
}

/* Using variable font features */
.text {
  font-family: 'MyVariableFont';
  font-weight: 475;
  font-variation-settings: 'wght' 475, 'wdth' 80, 'slnt' -5;
}

CSS Variables (Custom Properties)

/* Defining variables */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --base-font-size: 16px;
  --spacing-unit: 8px;
}

/* Using variables */
.element {
  color: var(--primary-color);
  margin: calc(var(--spacing-unit) * 2);
  font-size: var(--base-font-size, 14px); /* Fallback value */
}

/* Scoped variables */
.dark-theme {
  --primary-color: #2980b9;
}

/* Media query variables */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #333;
    --text-color: #fff;
  }
}

Visual Effects

Box Shadows

/* Basic */
box-shadow: 0 2px 5px rgba(0,0,0,0.3);

/* Multiple */
box-shadow: 
  0 2px 5px rgba(0,0,0,0.3),
  0 0 0 10px rgba(255,255,255,0.2);

/* Inset */
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);

Text Shadows

/* Basic */
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);

/* Multiple */
text-shadow: 
  0 1px 0 #ccc,
  0 2px 0 #c9c9c9,
  0 3px 0 #bbb;
  
/* Glow effect */
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6;

Filter Effects

/* Individual filters */
filter: blur(5px);
filter: brightness(1.2);
filter: contrast(150%);
filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.5));
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(0.8);
filter: saturate(200%);
filter: sepia(50%);

/* Multiple filters */
filter: contrast(175%) brightness(103%) saturate(110%);

Backdrop Filters

backdrop-filter: blur(10px);
backdrop-filter: brightness(80%) blur(5px);

Blend Modes

/* Background blend */
background-blend-mode: multiply;

/* Mix blend */
mix-blend-mode: overlay;

Multi-Column Layout

/* Basic columns */
column-count: 3;
column-width: 200px;
columns: 3 200px; /* shorthand */

/* Column appearance */
column-gap: 30px;
column-rule: 1px solid #ddd;
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: #ddd;

/* Content control */
break-inside: avoid;
column-span: all;

Advanced Selectors & Properties

Content Generation

/* Basic content */
.quote::before {
  content: "«";
}
.quote::after {
  content: "»";
}

/* Attribute values */
a::after {
  content: " (" attr(href) ")";
}

/* Counters */
body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Advanced Selectors

/* :is() - matches any of selectors (same specificity as most specific) */
:is(header, main, footer) p { /* targets p in header, main, or footer */
  line-height: 1.6;
}

/* :where() - like :is() but with zero specificity */
:where(article, aside) h2 {
  font-size: 1.2em;
}

/* :has() - parent selector */
div:has(> img) { /* div with direct img child */
  padding: 10px;
}

a:has(+ p) { /* a followed by p */
  margin-bottom: 1em;
}

/* :focus-visible - keyboard focus */
button:focus-visible {
  outline: 2px solid blue;
}

/* Custom selectors */
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
:--heading { 
  font-family: sans-serif;
}

CSS Containment & Performance

/* Individual containment types */
contain: layout;
contain: paint;
contain: size;
contain: style;

/* Multiple containment */
contain: content; /* layout + paint + style */
contain: strict;  /* size + layout + paint + style */

/* CSS content-visibility */
content-visibility: auto;
content-visibility: hidden;
contain-intrinsic-size: 300px 500px;

Best Practices & Tips

• Use modern CSS layout techniques: Flexbox and Grid instead of floats
• Mobile-first approach: Start with mobile styles, add complexity with media queries
• Leverage CSS variables: For themeable, maintainable code
• Prefer transforms over absolute positioning: Better performance for animations
• Be mindful of specificity: Keep selectors as simple as possible
• Use logical properties: For better internationalization (margin-inline vs margin-left/right)
• Optimize for performance: Use will-change sparingly, leverage CSS containment
• Enable smooth scrolling: scroll-behavior: smooth for better UX
• Standardize spacing with design tokens: Using CSS variables for consistency
• Reduce CSS bundle size: Remove unused styles, leverage modern CSS features

Browser Compatibility & Fallbacks

• Feature queries: Use @supports to detect feature support

  @supports (display: grid) {  /* Grid-specific styles */}
  

• Vendor prefixes: Use automation tools (Autoprefixer) rather than manual prefixes
• Serve modern CSS: Use <link rel="stylesheet" href="modern.css" type="text/css"> for modern browsers
• Test across browsers: Use tools like BrowserStack or LambdaTest

Resources for Further Learning

• MDN Web Docs: CSS
• CSS-Tricks
• Can I Use – Browser compatibility checker
• CSS Reference – Visual guide to CSS
• CSS Grid by Example
• Flexbox Froggy – Interactive Flexbox learning
• CSS Animations and Transitions
• CSS Custom Properties
• CSS-in-JS – For component-based styling

This cheatsheet covers the essential CSS3 features and properties you need for modern web development, providing a comprehensive reference for styling web applications with the latest techniques.