Online HTML Editor
Online HTML Editor

CSS Introduction

Learn What CSS Is and Why It’s Important?

What is CSS?

CSS stands for Cascading Style Sheets.
It is used to style and design websites.

Think of HTML as the structure of a house — the walls, the floors, and the rooms.
CSS is the paint, furniture, and decorations — it makes everything look nice!

Why Do We Use CSS?

HTML only gives you basic, plain content.
With CSS, you can:

  • Change colors of text and backgrounds
  • Set different fonts and text sizes
  • Add spacing, margins, and borders
  • Create layouts for your page
  • Make your site look good on mobile and desktop
  • Add hover effects and animations

In short, CSS helps you make your website look modern, clean, and professional.

Real Website Examples

Here’s how CSS is used on real websites:

WebsiteWhat CSS Controls
YouTubeVideo layout, dark mode, hover effects, side menu
AmazonProduct grid, pricing colors, buttons, responsive design
GoogleFont styling, clean layout, spacing, animations
FacebookNews feed layout, blue theme, rounded profile pictures

Every professional website uses CSS to look great!

Example:

HTML Without CSS:

<h1>Hello World</h1>
<p>This is a plain paragraph.</p>

HTML With CSS:

<style>
  h1 {
    color: darkblue;
    font-family: Arial;
    text-align: center;
  }

  p {
    color: #444;
    font-size: 18px;
  }
</style>

<h1>Hello World</h1>
<p>This is a styled paragraph.</p>

✅ See the difference? With CSS, your website becomes visually appealing.

What Does “Cascading” Mean?

“Cascading” means CSS follows a priority order:

  1. Browser styles (default)
  2. External stylesheets
  3. Internal styles (in the <style> tag)
  4. Inline styles (directly on an element)

CSS decides which style to apply based on these rules.

How Do You Use CSS?

There are 3 ways to add CSS to your webpage:

  1. Inline CSS – inside the HTML element
  2. Internal CSS – inside a <style> tag in the <head>
  3. External CSS – in a separate .css file (best practice)

You’ll learn all three in the next lesson!

Summary

  • CSS makes your website look good
  • It works with HTML to add style and layout
  • All modern websites use CSS
  • It’s easy to learn with practice!