What is CSS? Ways to Add CSS

What is CSS?

CSS (Cascading Style Sheets) controls how HTML looks: colours, fonts, spacing, layout and animation. HTML gives structure, and CSS gives style.

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

A CSS rule has a selector (p), and a declaration block in braces containing properties and values (color: darkblue;).

Three ways to add CSS

1. Inline

<p style="color: red;">Red text</p>

Good for quick tests, but hard to maintain.

2. Internal

<html>
<head>
  <style>
    h1 { color: teal; }
    p  { font-size: 20px; }
  </style>
</head>
<body>
  <h1>Hello CSS</h1>
  <p>Styled with an internal stylesheet.</p>
</body>
</html>

3. External (best practice)

Create style.css and link it in the <head>:

<link rel="stylesheet" href="style.css">

One stylesheet can style your whole website, which keeps code tidy and pages fast.

What does cascading mean?

When several rules affect the same element, CSS decides the winner using order (later wins), specificity (more specific wins) and importance. You will learn this in the next lesson.

Practice

Create index.html and style.css. Style the body background, the heading colour and the paragraph font size.