First Styled Page

Introduction

Your first real CSS milestone is not memorizing many properties, but building a clean HTML page and styling it in a controlled way. In this chapter, you will create a small page, connect an external stylesheet, and apply foundational styles for typography, spacing, and simple layout.

Prerequisites

• Basic HTML structure knowledge
• Development environment ready from chapter 3
• A browser with DevTools

Project Goal

Build a simple page that includes:

• a page title
• a short intro paragraph
• a call-to-action button
• a feature list card

You will style it with:

• colors
• spacing
• font settings
• border radius and shadows
• hover feedback

Step 1: Create the HTML File

Create index.html:

This HTML builds a simple brand-style landing page: a hero section with a heading, description, and button, plus a feature card that highlights what the page demonstrates. It also links an external stylesheet so structure and presentation stay separate.

Step 2: Create the CSS File

Create css/styles.css:

This is the CSS for the page. You do not need to understand every line yet—later chapters will cover these details. For now, the goal is simply to finish your first styled page.

Step 3: Preview the Page

Use your local server or Live Server, then open the page in a browser.

Checklist:

• Title and paragraph are readable
• Button has color and hover feedback
• Card has spacing and shadow
• Layout remains readable on small screens

If styles do not apply, inspect the <link rel="stylesheet"> path first.

Step 4: Verify with DevTools

Inspect the button in DevTools:

• check the .button rule in Styles
• toggle background on/off
• force :hover state to test interaction

Inspect the <main class="container">:

• verify computed width
• confirm grid gap spacing

This habit helps you debug faster than random trial-and-error edits.

Common Beginner Errors