1. CSS Introduction

What you will learn

• What CSS is and what it is used for
• How CSS and HTML work together
• How to read and change a first CSS example

What is CSS?

CSS stands for Cascading Style Sheets. It describes how HTML elements look on screen: colours, fonts, spacing, layout, and more.

• HTML says what the content is: a heading, a paragraph, a link.
• CSS says how it looks: blue text, a wide margin, a round border.

Why use CSS?

• One change, many pages. Put your styles in one file, and every page that uses it updates.
• Cleaner HTML. Structure stays separate from decoration.
• Layouts for every screen. The same page can look right on a phone and on a wide monitor.

A first example

Press Try it Yourself and change blue to green.

<style>
  p {
    color: blue;
    font-size: 20px;
  }
</style>

<p>This text is styled with CSS.</p>

How the example works

1. The <style> element holds CSS code inside an HTML page.
2. p is a selector. It chooses which elements to style: every paragraph.
3. Inside the curly braces { } are declarations. Each one sets a property and a value.
4. color: blue; makes the text blue. font-size: 20px; makes it 20 pixels tall.

The same HTML, two looks

CSS changes the look without touching the HTML. The same paragraph can look plain or styled just by changing the rules.

Common mistakes

• Thinking CSS changes the structure of a page. It changes appearance and layout.
• Forgetting a semicolon at the end of a declaration.
• Writing CSS directly in the page body instead of inside <style>.

<style>
  p {
    color: red;
  }
</style>
<p>I am learning CSS.</p>

Summary

• CSS controls how HTML looks.
• A rule is a selector plus declarations in curly braces.
• Keeping style separate from structure saves time.