CSS Introduction

This introduction explains what CSS is and why it is used. Learn how CSS works together with HTML to build modern websites.

On this page

What is CSS?

CSS stands for Cascading Style Sheets. It is used to describe how HTML elements are displayed on the screen, on paper, or in other media.

CSS controls the visual presentation of a web page. It allows you to apply styles such as colors, fonts, spacing, and layout without changing the HTML structure.

Why Use CSS?

Before CSS, all styling was done directly inside HTML. This made pages hard to maintain and update. CSS solves this problem by separating content from design.

  • CSS saves time by controlling multiple pages from one file
  • CSS improves consistency across a website
  • CSS makes layouts responsive and flexible
  • CSS simplifies maintenance and updates

CSS Works Together with HTML

HTML defines the structure of a page, such as headings, paragraphs, and links. CSS defines how those elements should look.

You can think of HTML as the skeleton of a page and CSS as the skin and clothing.

CSS Example

This example shows how CSS changes the appearance of HTML elements:

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

p {
  color: #333;
  line-height: 1.6;
}

The CSS above styles all h1 elements and paragraphs on the page without modifying the HTML.

How CSS Is Applied

CSS rules consist of a selector and one or more declarations. Each declaration includes a property and a value.

selector {
  property: value;
}

This structure will be explained in detail in the next lesson.

What’s Next?

In the next section, you will learn the basic structure of CSS rules and how CSS syntax works.

CSS Introduction Examples (6)