What Is CSS?

Introduction to CSS

CSS stands for Cascading Style Sheets. CSS is a stylesheet language used to control the appearance and layout of HTML documents.

HTML provides the structure and content of a webpage, while CSS controls how that content is presented. CSS can change colors, fonts, text sizes, spacing, borders, backgrounds, positioning, and many other visual properties.

By keeping presentation rules in CSS, the same styles can be applied to many HTML elements or even multiple webpages. This makes websites easier to design, maintain, and update.

What Does CSS Do?

CSS tells a web browser how HTML elements should be displayed. A CSS rule selects one or more elements and applies one or more style declarations to them.

CSS can be used to control many parts of a webpage, including:

• Text colors, fonts, sizes, and alignment
• Background colors and images
• Margins, padding, borders, and spacing
• Element widths and heights
• Page layouts using Flexbox and Grid
• Responsive layouts for different screen sizes
• Transitions, transforms, and animations

How CSS Works with HTML

CSS works by selecting HTML elements and assigning styles to them. A CSS rule normally contains a selector followed by one or more declarations inside curly braces.

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

In this example, the p selector targets paragraph elements. The color property changes the text color to blue, and the font-size property changes the text size to 18 pixels.

When the browser loads the HTML document and its CSS, it combines the document structure with the style rules to determine how the page should appear.

CSS Example

The following example shows a simple HTML heading and paragraph styled with CSS.

The CSS changes the heading to blue and gives the paragraph dark gray text with a font size of 18 pixels.

Why Use CSS?

CSS separates much of a webpage's presentation from its HTML structure. Instead of adding the same styling information throughout the HTML, you can define styles in one place and reuse them throughout a website.

This separation makes webpages easier to maintain and provides greater control over their appearance. A single stylesheet can control the design of many pages, allowing changes to colors, typography, spacing, and layouts to be made consistently across an entire website.