What Is CSS

What is CSS?

Web pages get their style from CSS, a language made for that purpose.

The name is short for Cascading Style Sheets.
How HTML elements look on screen, on paper, or in other media is what CSS describes.
One set of rules can control the layout of many web pages at once, sparing you a lot of work.
CSS files are where external style sheets are stored.

CSS Demo - One HTML Page - Multiple Styles!

Changing only the CSS can make the same page look completely different. Here, one HTML page is displayed with four different style sheets.

Why Use CSS?

Your web pages get their styles from CSS: the design, the layout, and the way a page looks across different devices and screen sizes.

CSS Example

The body, heading, and paragraphs of this page all get their styling from CSS.

A simple web page styled with CSS in a `<style>` block in the head.

Set the page background to light blue. Make the `<h1>` white and centered. Give paragraphs the verdana font at 20px. Include a heading and a short paragraph so the styles show.

> Output: complete HTML page

Prompt

A simple web page styled with CSS in a <style> block in the head. Set the page background to light blue. Make the <h1> white and centered. Give paragraphs the verdana font at 20px. Include a heading and a short paragraph so the styles show.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph. CSS sets the colors, fonts, and layout.</p>

</body>
</html>

CSS Saves a Lot of Work!

An external .css file is where CSS rules usually live.

When a whole website shares one external style sheet, editing just that file changes the look of every page.