CSS Introduction

CSS is the language we use to style an HTML page.

What is CSS?

• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are shown on the screen
• CSS controls colours, fonts, spacing, sizes and the layout of a page
• One CSS file can style many pages, so it saves a lot of work

HTML says *what* something is: a heading, a paragraph, a list. CSS says *how it looks*: big or small, red or blue, left or centre.

A Page Without CSS

A page with only HTML works, but it looks plain. Every browser shows it with black text on a white background and default fonts.

<!DOCTYPE html>
<html>
<body>

<h1>Ayesha's Bakery</h1>
<p>Fresh cakes and biscuits every morning.</p>

</body>
</html>

The Same Page With CSS

Now we add a few CSS rules inside a <style> tag. The HTML in the body has not changed at all.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #fff8ef;
  font-family: Georgia, serif;
}
h1 {
  color: #b35900;
  text-align: center;
}
p {
  color: #555555;
  font-size: 20px;
  text-align: center;
}
</style>
</head>
<body>

<h1>Ayesha's Bakery</h1>
<p>Fresh cakes and biscuits every morning.</p>

</body>
</html>

The heading is now orange and centred, the text is grey and larger, and the page has a warm background colour.

Why Use CSS?

What Does "Cascading" Mean?

Sometimes more than one rule tries to style the same element. For example, one rule says headings are blue and another says headings are green. The browser follows a set of rules, called the cascade, to decide which style wins. You will learn these rules step by step in later chapters.

A Short History

This tutorial teaches modern CSS that works in all current browsers.

Exercise