CSS Basics

What Is CSS?

CSS (Cascading Style Sheets) controls how your website looks. HTML builds the structure, CSS adds the design.

Linking a CSS File

You already linked your stylesheet in your HTML pages:

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

This tells the browser to load your CSS rules.

Changing Text Color

In your style.css file, add:

h1 {
  color: blue;
}
      

This will make all <h1> headings blue.

Changing Background Color

You can change the background of the whole page:

body {
  background-color: #f0f0f0;
}
      

Styling Boxes

Your lessons use a .lesson-box class. You can style it like this:

.lesson-box {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}
      

Lesson Checkpoint

Before moving on, make sure you have:

1. Opened your css/style.css file.
2. Added styles for body, h1, and .lesson-box.
3. Committed your changes to GitHub.
4. Viewed your updated site on GitHub Pages.

Use the navigation bar to continue learning.