Home > Courses > CSS Tutorial

CSS Introduction

Lesson 1 of 30 6 min read Beginner

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. CSS describes how elements should be rendered on screen, on paper, or in other media.

Why CSS?

CSS allows you to separate content from presentation, making your websites more maintainable and flexible.

CSS Benefits:

  • Separates content from presentation
  • Reduces code duplication
  • Faster page loading
  • Easy maintenance
  • Multiple device compatibility

CSS Syntax

A CSS rule consists of a selector and a declaration block:

CSS 
selector {
    property: value;
    property: value;
}

Example:

CSS 
h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

Syntax Breakdown:

  • Selector - Points to the HTML element you want to style
  • Declaration Block - Contains one or more declarations separated by semicolons
  • Property - The style attribute you want to change
  • Value - The value of the property

Ways to Add CSS

There are three ways to insert CSS into your HTML document:

1. Inline CSS

HTML 
<h1 style="color: blue; font-size: 24px;">Hello World</h1>

2. Internal CSS

HTML 
<head>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
    </style>
</head>

3. External CSS

HTML 
<head>
    <link rel="stylesheet" href="styles.css">
</head>

Try It Yourself

Practice CSS styling with the interactive editor: