What is CSS?

CSS stands for Cascading Style Sheets. It works with HTML to control how content is presented in a web browser, including colors, fonts, spacing, borders, backgrounds, and other visual styles.

HTML and CSS Work Together

HTML describes the structure and meaning of the content on a web page. CSS controls how that content looks when it is displayed in a browser.

For example, HTML can identify a paragraph:

<p>Welcome to my website.</p>

CSS can then control the appearance of that paragraph:

p {
  color: blue;
  font-size: 18px;
}

Browser Result

Welcome to my website.

The HTML still identifies the content as a paragraph. CSS simply changes how the paragraph is presented.

Why Do We Use CSS?

CSS separates the presentation of a web page from its HTML structure. Instead of adding visual instructions throughout the HTML, styles can be defined separately and applied wherever they are needed.

This makes web pages easier to maintain because the same CSS can be reused for many elements and, with an external stylesheet, across many pages.

Before CSS

Older versions of HTML included elements and attributes that were commonly used to control presentation directly in the markup. You may encounter these techniques when working with older web pages.

For example, the obsolete <font> element was once used to change text color:

<font color="blue">Blue text</font>

In modern HTML, presentation belongs in CSS. The content can instead use an appropriate HTML element:

<p class="blue-text">Blue text</p>

CSS provides the visual styling:

.blue-text {
  color: blue;
}

This separation allows HTML to describe the content while CSS controls its appearance.

A Simple CSS Example

A CSS rule identifies what should be styled and provides one or more style instructions.

h1 {
  color: #0088cc;
}

In this example, the CSS tells the browser to display the text of <h1> elements using the color #0088cc.

You will learn how the parts of a CSS rule work in the next tutorial, CSS Syntax.

What Can CSS Style?

CSS can control many aspects of how HTML content is displayed. Some common examples include:

Text and background colors
Fonts and text sizes
Margins and padding
Borders
Widths and heights
Alignment and spacing
Page layout

You do not need to learn all of CSS before you can use it with HTML. A small number of CSS properties is enough to begin styling basic web pages.

CSS Does Not Replace HTML

HTML and CSS have different jobs. HTML provides the structure and meaning of the page, while CSS provides its visual presentation.

For example, CSS can make text larger and bold, but that does not give the text the meaning of an HTML heading. When content is a heading, it should use an appropriate heading element such as <h1> or <h2>.

Start with HTML that correctly describes the content, then use CSS to control how that content looks.

Summary

CSS stands for Cascading Style Sheets and controls the presentation of HTML content. HTML provides the structure and meaning of a web page, while CSS controls visual properties such as colors, fonts, spacing, borders, and layout.

Modern web development keeps most presentation out of HTML and places it in CSS. In the next tutorial, you will learn the basic syntax used to write CSS rules.