CSS Reference

This guide covers the core CSS properties you'll use to style your web pages. CSS (Cascading Style Sheets) controls the presentation and layout of your HTML content.

Try the interactive demos below - adjust the sliders and toggle buttons to see CSS properties change in real-time!

How to Use CSS

CSS can be added to your HTML in three ways:

1. External Stylesheet (Recommended)

<!-- In your HTML <head> -->
<link rel="stylesheet" href="styles.css">

/* In styles.css */
body {
  font-family: Arial, sans-serif;
  color: #333;
}

2. Internal Styles

<head>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
  </style>
</head>

3. Inline Styles (Use sparingly)

<p style="color: blue; font-size: 18px;">Styled text</p>

CSS Selectors

Before you can style elements, you need to know how to select them. CSS selectors tell the browser which HTML elements your styles should apply to.

Element Selectors

What they do: Select all elements of a specific HTML tag type.

Syntax: Use the tag name directly.

Example:

/* Styles ALL paragraphs */
p {
  font-size: 16px;
  line-height: 1.6;
}

/* Styles ALL h1 headings */
h1 {
  color: #2c3e50;
  font-weight: bold;
}

/* Styles ALL links */
a {
  color: blue;
  text-decoration: underline;
}

Use when: You want to apply the same style to every instance of an element type across your entire page.

Class Selectors

What they do: Select elements with a specific class attribute.

Syntax: Use a dot (.) followed by the class name.

HTML:

<p class="intro">This paragraph has the "intro" class.</p>
<p class="highlight">This one has the "highlight" class.</p>
<div class="card">This div also has a class.</div>

CSS:

/* Styles any element with class="intro" */
.intro {
  font-size: 18px;
  font-weight: bold;
}

/* Styles any element with class="highlight" */
.highlight {
  background-color: yellow;
  padding: 10px;
}

/* Styles any element with class="card" */
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
}

Use when: You want to create reusable styles that can apply to multiple elements. Classes are the most common way to style elements in CSS.

Multiple classes: An element can have multiple classes separated by spaces.

<p class="intro highlight">This has BOTH classes applied!</p>

ID Selectors

What they do: Select a single element with a specific id attribute.

Syntax: Use a hash (#) followed by the ID name.

HTML:

<header id="main-header">Site Header</header>
<section id="about">About Section</section>

CSS:

/* Styles the element with id="main-header" */
#main-header {
  background-color: #2c3e50;
  color: white;
  padding: 20px;
}

/* Styles the element with id="about" */
#about {
  max-width: 800px;
  margin: 0 auto;
}

Important: IDs must be unique on a page. Use classes for styling multiple elements, and reserve IDs for unique landmarks or JavaScript targeting.

Descendant Selectors

What they do: Select elements that are nested inside other elements.

Syntax: Separate selectors with a space.

HTML:

<article>
  <p>This paragraph is inside an article.</p>
</article>

<p>This paragraph is NOT inside an article.</p>

CSS:

/* Only styles paragraphs inside articles */
article p {
  color: #555;
}

/* Only styles links inside navigation */
nav a {
  color: white;
  text-decoration: none;
}

/* Only styles images inside elements with class="gallery" */
.gallery img {
  border-radius: 8px;
  max-width: 100%;
}

Grouping Selectors

What they do: Apply the same styles to multiple selectors at once.

Syntax: Separate selectors with commas.

Example:

/* Same styles for h1, h2, AND h3 */
h1, h2, h3 {
  font-family: Georgia, serif;
  color: #2c3e50;
  margin-bottom: 1rem;
}

/* Same styles for multiple classes */
.warning, .error, .alert {
  padding: 15px;
  border-radius: 4px;
}

Combining Selectors

You can combine different selector types for more specific targeting:

/* Element with a specific class */
p.intro {
  /* Only styles <p class="intro">, not <div class="intro"> */
}

/* ID with descendant selectors */
#main-content p {
  /* Only paragraphs inside the element with id="main-content" */
}

/* Multiple classes on the same element */
.card.featured {
  /* Only elements with BOTH "card" AND "featured" classes */
  border: 3px solid gold;
}

Selector Specificity

When multiple rules target the same element, specificity determines which style wins:

Inline styles (highest priority) - <p style="color: red;">
IDs - #header { }
Classes, attributes, pseudo-classes - .card { }
Elements - p { }

Example:

/* If both rules target the same paragraph: */
p { color: blue; }           /* Less specific */
.intro { color: red; }       /* More specific - this wins! */

Best practice: Prefer classes over IDs for styling. They're reusable and have lower specificity, making your CSS easier to maintain.

Section 1: Box Model

The box model describes how every HTML element is a rectangular box with content, padding, border, and margin.

Interactive Box Model Demo

margin

border

padding

Content

Margin

10px

Border

8px

Padding

10px

Tip: Notice how margin creates space outside the border (orange), while padding creates space inside (cyan).

`box-sizing`

What it does: Controls how width and height are calculated.

Values:

content-box (default) - Width/height applies only to content
border-box - Width/height includes padding and border

Example:

* {
  box-sizing: border-box; /* Recommended for easier sizing */
}

`margin`

What it does: Creates space outside the element's border.

Margin

margin: 0px

margin: 0px;

Syntax:

margin: 20px;                    /* All sides */
margin: 20px 40px;              /* Top/bottom, left/right */
margin: 10px 20px 30px 40px;   /* Top, right, bottom, left */
margin-top: 20px;               /* Individual sides */

Example:

.card {
  margin: 20px;  /* Space around the card */
}

`padding`

What it does: Creates space inside the element's border.

Padding

padding: 0px

padding: 0px;

Syntax:

padding: 20px;                    /* All sides */
padding: 20px 40px;              /* Top/bottom, left/right */
padding: 10px 20px 30px 40px;   /* Top, right, bottom, left */
padding-left: 20px;              /* Individual sides */

Example:

.card {
  padding: 20px;  /* Space inside the card */
}

`border`

What it does: Creates a border around the element.

Syntax:

border: width style color;

Example:

.card {
  border: 2px solid #333;  /* 2px black border */
}

.highlight {
  border-top: 3px solid blue;     /* Just top border */
  border-bottom: 1px dashed gray; /* Different bottom border */
}

Border styles: solid, dashed, dotted, double, none

Section 2: Text & Typography

`font-family`

What it does: Sets the typeface for text.

Example:

body {
  font-family: 'Georgia', serif;
}

h1 {
  font-family: 'Helvetica', 'Arial', sans-serif;
}

Font stacks: List multiple fonts as fallbacks. End with a generic family (serif, sans-serif, monospace).

`font-size`

What it does: Sets the size of text.

The quick brown fox jumps over the lazy dog.

font-size: 16px

font-size: 16px;

Units:

px - Pixels (fixed size)
rem - Relative to root font size (recommended for accessibility)
em - Relative to parent font size
% - Percentage of parent font size

Example:

body {
  font-size: 16px;  /* Base size */
}

h1 {
  font-size: 2rem;   /* 32px if body is 16px */
}

small {
  font-size: 0.875rem;  /* 14px if body is 16px */
}

`font-weight`

What it does: Sets how thick or thin text appears.

Values: normal (400), bold (700), or numeric values (100-900)

Example:

p {
  font-weight: normal;  /* Regular text */
}

strong {
  font-weight: bold;    /* Bold text */
}

h1 {
  font-weight: 300;     /* Light weight */
}

`line-height`

What it does: Sets the spacing between lines of text.

Example:

p {
  line-height: 1.6;  /* 1.6× the font size - no unit needed */
}

h1 {
  line-height: 1.2;  /* Tighter spacing for headings */
}

Tip: 1.5 to 1.6 is ideal for body text readability.

`text-align`

What it does: Aligns text horizontally.

Values: left, right, center, justify

Example:

h1 {
  text-align: center;
}

p {
  text-align: left;  /* Default */
}

`letter-spacing`

What it does: Adjusts spacing between characters.

Example:

h1 {
  letter-spacing: 2px;     /* Spread out letters */
}

.tight {
  letter-spacing: -0.5px;  /* Tighten letters */
}

Section 3: Colors & Backgrounds

`color`

What it does: Sets text color.

Color formats:

Named colors: red, blue, darkgray
Hex codes: #FF0000, #333, #1a2b3c
RGB: rgb(255, 0, 0)
RGBA: rgba(255, 0, 0, 0.5) - last value is opacity (0-1)

Example:

p {
  color: #333;          /* Dark gray text */
}

a {
  color: rgb(0, 100, 200);  /* Blue link */
}

.faded {
  color: rgba(0, 0, 0, 0.5);  /* 50% transparent black */
}

`background-color`

What it does: Sets the background color of an element.

Background

background-color: #4a90d9

background-color: #4a90d9;

Example:

body {
  background-color: #f5f5f5;  /* Light gray */
}

.card {
  background-color: white;
}

.highlight {
  background-color: rgba(255, 255, 0, 0.3);  /* Transparent yellow */
}

`opacity`

What it does: Controls the transparency of an element (0 = invisible, 1 = fully visible).

Opacity

opacity: 1

opacity: 1;

CSS Custom Properties (Variables)

What it does: Defines reusable values for consistent theming.

Example:

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --text-color: #333;
  --background-color: #ffffff;
  --spacing-unit: 1rem;
}

body {
  color: var(--text-color);
  background-color: var(--background-color);
}

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-unit);
}

Why use them? Change your entire color scheme by updating variables in one place.

Section 4: Spacing

Spacing creates visual breathing room and helps establish hierarchy.

Common Spacing Patterns

Consistent spacing with variables:

:root {
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
}

.card {
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}

Vertical rhythm:

h1, h2, h3, p, ul {
  margin-top: 0;           /* Remove top margin */
  margin-bottom: 1.5rem;   /* Consistent bottom spacing */
}

Centering with margin:

.container {
  max-width: 800px;
  margin: 0 auto;  /* Centers the container horizontally */
}

Section 5: Borders & Decoration

Border Properties

Individual border properties:

.element {
  border-width: 2px;
  border-style: solid;
  border-color: #333;
}

/* Shorthand (recommended): */
.element {
  border: 2px solid #333;
}

Different borders per side:

.card {
  border-top: 3px solid blue;
  border-bottom: 1px solid #ddd;
}

`border-radius`

What it does: Rounds the corners of an element.

Radius

border-radius: 0px

border-radius: 0px;

Example:

.card {
  border-radius: 8px;  /* Rounded corners */
}

.circle {
  border-radius: 50%;  /* Perfect circle (on a square element) */
}

.custom {
  border-radius: 10px 10px 0 0;  /* Top corners only */
}

`box-shadow`

What it does: Adds shadow effects to elements.

Shadow

X Offset

0px

Y Offset

4px

Blur

8px

Spread

0px

box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.3);

Syntax:

box-shadow: horizontal vertical blur spread color;

Example:

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

.elevated {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);  /* More prominent */
}

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

.multiple-shadows {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.1);  /* Layered shadows */
}

Section 6: Display Property

The display property controls how an element behaves in the document flow.

Box 1

Box 2

Box 3

display:

display: flex;

Try it: Click each button to see how the child boxes rearrange. none hides elements completely!

Common values:

block - Takes full width, stacks vertically
inline - Flows with text, only as wide as content
flex - Creates a flexible container for layout
grid - Creates a grid-based layout container
none - Hides the element completely

Practical Examples

How do I center text?

.centered-text {
  text-align: center;
}

How do I center a div horizontally?

.centered-div {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  /* Shorthand: margin: 0 auto; */
}

How do I create a card with spacing and shadow?

.card {
  background-color: white;
  padding: 1.5rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

How do I create a color theme?

:root {
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
}

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

How do I add space between elements?

/* Space below headings and paragraphs */
h1, h2, h3, p {
  margin-bottom: 1rem;
}

/* Space between list items */
li {
  margin-bottom: 0.5rem;
}

How do I create a simple button style?

.button {
  padding: 0.75rem 1.5rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
}

Tips for Writing Good CSS

Use consistent units - Stick with rem for most sizing
Define a color system - Use CSS custom properties for your palette
Establish spacing scale - Use consistent spacing values
Start with defaults - Set base styles on body and html
Use shorthand when possible - margin: 20px 40px; is cleaner than four separate properties
Comment your code - Explain complex sections or color choices
Keep specificity low - Avoid overly specific selectors like div.container > ul li a

Common Mistakes to Avoid

Using pixels for font sizes (use rem instead for accessibility)
Forgetting units (e.g., margin: 20 instead of margin: 20px)
Overusing !important (usually indicates specificity problems)
Not using a consistent spacing system
Setting both width and margin without box-sizing: border-box

Need more help? Check out MDN Web Docs CSS Reference for comprehensive CSS documentation.