💚

Beginner-Friendly Topic

Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀

What is CSS?

CSS (Cascading Style Sheets) controls how HTML elements look - colors, fonts, sizes, spacing, and layout. Without CSS, every website would look like a plain text document. CSS is one of the three core technologies of the web alongside HTML and JavaScript.

15 min•By Priygop Team•Updated 2026

What is CSS?

CSS stands for Cascading Style Sheets. While HTML defines the structure of a page, CSS controls how it looks. CSS lets you add colors, change fonts, control spacing, create layouts, and make pages responsive for mobile devices. Every professional website you visit uses CSS for its visual presentation.

Diagram

Loading diagram…

Selectors target HTML elements for styling

What CSS Can Do

Change text color, size, and font - control the appearance of every text element on the page
Set background colors and images - create visual depth and branding with background properties
Control spacing (margin and padding) - manage the space between and inside elements precisely
Create multi-column layouts - build complex page structures with Flexbox and Grid
Add animations and transitions - make interfaces feel alive with smooth visual effects
Make websites responsive (mobile-friendly) - adapt layouts for any screen size from phones to desktops
Style buttons, forms, and navigation menus - design interactive UI components from scratch

Your First CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: blue;
      font-size: 36px;
    }
    p {
      color: gray;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>Hello, CSS!</h1>
  <p>CSS makes this text gray and 18px.</p>
</body>
</html>

Try It Yourself: Your First CSS

Try It Yourself: Your First CSSCSS

CSS Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html>
<head>
  <style>
    body{
      #9cdcfe">background-color: #f0f8ff;
      #9cdcfe">font-family: Arial, sans-serif;
    }
    h1{
      #9cdcfe">color: #229c6b;
      #9cdcfe">font-size: 36px;
    }
    p{
      #9cdcfe">color: #333;
      #9cdcfe">font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>Hello, CSS!</h1>
  <p>Try changing the colors and font sizes above!</p>
  <p>CSS makes web pages beautiful.</p>
</body>
</html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run (Ctrl+Enter)

CSS|24 lines|403 chars|✓ Valid syntax

UTF-8

Tip

Start with small CSS changes on existing HTML and observe the results. Changing a single color or font-size is the fastest way to understand how CSS works. Use browser DevTools (F12) to experiment without modifying your files.

Common Mistake

Beginners often write CSS rules outside the <style> tag or forget to place the <style> tag inside <head>. CSS rules only work when properly enclosed in <style> tags in the head section, or in a linked external .css file.

Practice Task

Open the 'Try It Yourself' editor above and complete these tasks: (1) Change the h1 color to #E44D26 (orange-red). (2) Set the background-color of the body to #1a1a2e (dark blue). (3) Change the paragraph color to white. You've just created a dark-themed page!

Quick Quiz