What is CSS?

CSS stands for Cascading Style Sheets. It is the language used to style and visually design HTML pages — controlling colors, fonts, spacing, layout, and more.

Without CSS, every web page would look like a plain text document. CSS transforms raw HTML into beautiful, modern interfaces.

CSS works alongside HTML (structure) and JavaScript (behavior). Together they form the three core technologies of the web.

Try in Editor

2

CSS Syntax

CSS consists of rules. Each rule has a selector and a declaration block with property-value pairs.

CSS

/* selector { property: value; } */

h1 {
  color: blue;
  font-size: 32px;
  font-weight: bold;
}

p {
  color: #333333;
  line-height: 1.6;
  margin-bottom: 16px;
}

3 Ways to Add CSS

HTML

<!-- 1. External stylesheet (BEST PRACTICE) -->
<link rel="stylesheet" href="styles.css">

<!-- 2. Internal style block -->
<style>
  body { background: #f0f0f0; }
</style>

<!-- 3. Inline style (avoid for maintainability) -->
<p style="color:red;">Red text</p>

Try in Editor

3

CSS Selectors

Selectors specify which HTML elements a CSS rule applies to. Knowing them is essential for precise styling.

CSS

/* Element selector */
p { color: gray; }

/* Class selector (reusable) */
.highlight { background: yellow; }

/* ID selector (unique, once per page) */
#header { height: 60px; }

/* Descendant selector */
nav a { text-decoration: none; }

/* Pseudo-class selectors */
a:hover { color: blue; }
li:first-child { font-weight: bold; }
input:focus { border-color: blue; }

/* Multiple selectors */
h1, h2, h3 { font-family: sans-serif; }

/* Universal selector */
* { box-sizing: border-box; }

Try in Editor

4

Colors

CSS supports many ways to define colors. Each format has its use case.

CSS

.box {
  /* Named colors */
  color: red;
  background: white;

  /* Hex (most common) */
  color: #1a56db;
  background: #f5f7ff;

  /* RGB */
  color: rgb(26, 86, 219);

  /* RGBA (with transparency) */
  background: rgba(0, 0, 0, 0.5);

  /* HSL (Hue, Saturation, Lightness) */
  color: hsl(220, 80%, 50%);

  /* Gradients */
  background: linear-gradient(135deg, #1a56db, #06b6d4);
}

Try in Editor

5

Fonts & Text

CSS gives you full control over typography — font family, size, weight, alignment, spacing, and more.

CSS

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1 {
  font-size: 2.5rem;    /* relative to root font size */
  font-weight: 800;
  letter-spacing: -0.5px;
  text-align: center;
}

p {
  font-size: 1rem;
  color: #334155;
  text-indent: 2em;      /* first line indent */
}

a {
  text-decoration: none;
  text-transform: uppercase;
}

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

Try in Editor

6

The Box Model

Every HTML element is a rectangular box. The CSS box model describes the layers around content: padding, border, and margin.

CSS

.card {
  /* Content dimensions */
  width: 300px;
  height: 200px;

  /* Padding (inner space) */
  padding: 20px;          /* all sides */
  padding: 10px 20px;    /* top/bottom left/right */
  padding-top: 16px;

  /* Border */
  border: 2px solid #1a56db;
  border-radius: 12px;

  /* Margin (outer space) */
  margin: 24px auto;   /* center horizontally */

  /* box-sizing: border-box makes width include padding+border */
  box-sizing: border-box;

  /* Shadow */
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

Try in Editor

7

Display & Position

The display and position properties control how elements are placed on the page.

CSS

/* Display values */
.block    { display: block; }      /* takes full width */
.inline   { display: inline; }     /* flows with text */
.ib       { display: inline-block; }
.hidden   { display: none; }       /* hides element */

/* Position values */
.static   { position: static; }    /* default */
.relative { position: relative; }
.absolute { position: absolute; top: 0; right: 0; }
.fixed    { position: fixed; bottom: 20px; right: 20px; }
.sticky   { position: sticky; top: 0; } /* sticks on scroll */

/* z-index controls stacking order */
.modal    { z-index: 1000; }
.overlay  { z-index: 999; }

Try in Editor

8

Flexbox

Flexbox is the most powerful tool for 1-dimensional layouts (rows or columns). It makes centering and spacing elements effortless.

CSS

/* Parent container */
.navbar {
  display: flex;
  align-items: center;        /* vertical center */
  justify-content: space-between; /* spread items */
  gap: 16px;                  /* space between items */
  flex-wrap: wrap;            /* wrap to next line */
}

/* Perfect center (most common trick) */
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Column layout */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Child: grow to fill remaining space */
.main-content { flex: 1; }

Try in Editor

9

CSS Grid

CSS Grid is perfect for 2-dimensional layouts — defining both rows and columns simultaneously.

CSS

/* Define a 3-column grid */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3 equal cols */
  gap: 24px;
}

/* Responsive grid (auto-fill) */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* Named areas */
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 260px 1fr;
}

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

Try in Editor

10

Responsive Design

Responsive design ensures your site looks good on all screen sizes — desktop, tablet, and mobile. CSS media queries make this possible.

CSS

/* Mobile first approach */
.container {
  width: 100%;
  padding: 0 16px;
}

/* Tablet: 768px and above */
@media (min-width: 768px) {
  .container { max-width: 760px; margin: 0 auto; }
  .grid { grid-template-columns: 1fr 1fr; }
}

/* Desktop: 1024px and above */
@media (min-width: 1024px) {
  .container { max-width: 1100px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
  body { background: #0a0f1e; color: #e2e8f0; }
}

Try in Editor

11

Transitions & Animations

CSS animations and transitions bring your pages to life without any JavaScript.

CSS

/* Transition: smooth property changes */
.btn {
  background: #1a56db;
  transition: all 0.2s ease;
}
.btn:hover {
  background: #1e40af;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Keyframe animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card {
  animation: fadeIn 0.4s ease forwards;
}

/* Infinite spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 1s linear infinite;
}

Try in Editor

12

CSS Variables (Custom Properties)

CSS variables let you store values once and reuse them everywhere. They are essential for theming and maintainable code.

CSS

/* Define variables on :root (global scope) */
:root {
  --primary: #1a56db;
  --secondary: #06b6d4;
  --text: #0f172a;
  --bg: #eef2ff;
  --radius: 12px;
  --shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Dark mode override */
[data-theme="dark"] {
  --text: #e2e8f0;
  --bg: #080d1c;
}

/* Use variables with var() */
.card {
  background: var(--bg);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

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

Next: Learn JavaScript →

Add interactivity and dynamic behavior to your pages.

Start JS Tutorial

Learn CSS – Free Complete Tutorial

What is CSS?

CSS Syntax

3 Ways to Add CSS

CSS Selectors

Colors

Fonts & Text

The Box Model

Display & Position

Flexbox

CSS Grid

Responsive Design

Transitions & Animations

CSS Variables (Custom Properties)