🎨 CSS

What is CSS?

Lesson 1 of 5 ~5 min

CSS stands for Cascading Style Sheets. It controls the visual presentation of HTML elements — colors, fonts, spacing, layout, and more. While HTML defines the structure, CSS defines how that structure looks.

How CSS connects to HTML

There are three ways to add CSS to an HTML page:

→ Inline — using the style attribute directly on an element.
→ Internal — using a <style> tag inside the <head>.
→ External — linking a separate .css file with a <link> tag (recommended).

CSS syntax

A CSS rule consists of a selector, a property, and a value:

selector {
  property: value;
}

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

Try it yourself

Editor

CSS

.demo-box {
  background: #7c5cfc;
  color: white;
  padding: 20px;
  border-radius: 12px;
  font-size: 18px;
}

Output

Try it

Edit the CSS in the editor to change the background color, text color, padding, and border-radius. The output updates as you type.

Quiz

What does CSS stand for?

Challenge

In the editor above, change the background color to a different value and adjust the font size. See how the output changes.

← Previous

Learn Overview

Selectors