Module 2 · Lesson 3⏱ ~10 minCSS

Making It Beautiful

Classes, buttons, images, and putting it all together into a polished page.

Classes and Reusable Styles

So far we've been styling elements by their tag name — all <h1> elements look one way, all <p> elements another. But what if you want some headings to be big and blue and others to be small and gray? That's where classes come in.

A class is a name you give to a CSS rule so you can apply it selectively. In CSS, classes start with a dot:

css

.hero-title {
  font-size: 48px;
  color: #4F7EF7;
  font-weight: bold;
  text-align: center;
}

.subtitle {
  font-size: 18px;
  color: #666666;
}

.highlight-box {
  background-color: #fff3cd;
  padding: 15px;
  border-left: 4px solid #ffc107;
}

In your HTML, you apply a class using the class attribute:

html

<h1 class="hero-title">Welcome to My Site</h1>
<p class="subtitle">Building things from scratch</p>
<div class="highlight-box">
  <p>This is an important announcement!</p>
</div>

Why classes are powerful:

You can reuse the same class on any number of elements — write .highlight-box once, use it everywhere
An element can have multiple classes — just separate them with spaces: class="card featured large"
Classes are not tied to a specific tag — you can put class="highlight-box" on a <div>, <section>, or even a <p>

Tag selectors vs. class selectors: use tag selectors (h1, p) for base styles that apply to everything. Use class selectors (.hero-title, .card) for specific, reusable styles. In real projects, most of your CSS will use classes.

Styling Links and Buttons

You can make a plain link look like a polished button with just a few CSS properties:

css

.btn {
  text-decoration: none;       /* remove the underline */
  display: inline-block;       /* so padding works properly */
  padding: 12px 24px;         /* size the button */
  background-color: #4F7EF7;  /* brand color */
  color: white;               /* white text */
  border-radius: 8px;         /* rounded corners */
  font-weight: bold;
}

.btn:hover {
  background-color: #3A5FC8;  /* darker on hover */
}

.btn-outline {
  background-color: transparent;
  color: #4F7EF7;
  border: 2px solid #4F7EF7;
}

.btn-outline:hover {
  background-color: #4F7EF7;
  color: white;
}

In your HTML:

html

<a href="/signup" class="btn">Get Started</a>
<a href="/learn-more" class="btn btn-outline">Learn More</a>

The hover pseudo-class: notice .btn:hover — the :hover part is a pseudo-class. It applies styles only when the user's mouse is over the element. When they move away, the styles revert. This creates the interactive "button" feel. Other useful pseudo-classes include :focus (when an element is focused, like by keyboard navigation) and :active (when being clicked).

Common button pattern: the base class (like .btn) sets the shared styles. A modifier class (like .btn-outline) overrides just the differences. An element gets both: class="btn btn-outline". This is one of the most common patterns in real-world CSS.

Working with Images

Images need special CSS treatment to behave well across different screen sizes. Here are the essential image styles:

css

img {
  max-width: 100%;    /* never wider than its container */
  height: auto;       /* maintain aspect ratio */
}

.profile-pic {
  width: 150px;
  height: 150px;
  border-radius: 50%;       /* circular */
  object-fit: cover;        /* crop to fill nicely */
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.hero-image {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 12px;
}

max-width: 100% — the golden rule for responsive images. The image will never overflow its container. On a phone screen, it shrinks. On a big monitor, it stays at its natural size (or whatever size you set).
border-radius: 50% — creates a perfect circle (if width and height are equal). Used for profile pictures, avatars, and icon backgrounds.
object-fit: cover — crops the image to fill the specified dimensions without stretching. Think of it like Instagram's crop tool. The alternative is contain, which fits the whole image inside and may leave empty space.
box-shadow — adds a shadow behind the image for depth. Values: horizontal offset, vertical offset, blur radius, color. Example: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

Putting It All Together

Here's a complete, styled page using everything from Modules 1 and 2. Study how the HTML structure and CSS styles work together:

HTML:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Alex Johnson — Developer</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <nav>
        <a href="#" class="logo">Alex Johnson</a>
        <a href="#about" class="nav-link">About</a>
        <a href="#work" class="nav-link">Work</a>
        <a href="#contact" class="btn">Get in Touch</a>
      </nav>
    </header>

    <main>
      <section class="hero">
        <h1 class="hero-title">Hi, I'm Alex</h1>
        <p class="subtitle">
          I build things for the web — from scratch, one line at a time.
        </p>
        <a href="#work" class="btn">See My Work</a>
      </section>

      <section class="cards">
        <div class="card">
          <h3>Design</h3>
          <p>Clean, accessible interfaces that feel great to use.</p>
        </div>
        <div class="card">
          <h3>Development</h3>
          <p>HTML, CSS, and JavaScript — the building blocks of the web.</p>
        </div>
        <div class="card">
          <h3>Learning</h3>
          <p>Always growing. Currently mastering React and TypeScript.</p>
        </div>
      </section>
    </main>

    <footer>
      <p>&copy; 2026 Alex Johnson. Built from zero.</p>
    </footer>
  </body>
</html>

CSS (styles.css):

css

/* ----- Base Styles ----- */
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background-color: #fafafa;
  color: #333333;
}

/* ----- Header / Navigation ----- */
header {
  background-color: white;
  border-bottom: 1px solid #e5e5e5;
  padding: 16px 0;
}

nav {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: #333333;
  text-decoration: none;
  margin-right: auto;
}

.nav-link {
  color: #555555;
  text-decoration: none;
}

.nav-link:hover {
  color: #4F7EF7;
}

/* ----- Hero Section ----- */
.hero {
  text-align: center;
  padding: 80px 20px;
  background-color: #f0f4ff;
}

.hero-title {
  font-size: 48px;
  color: #2c3e50;
  margin-bottom: 16px;
}

.subtitle {
  font-size: 18px;
  color: #666666;
  margin-bottom: 32px;
}

/* ----- Cards Section ----- */
.cards {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
}

.card {
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
}

.card h3 {
  font-size: 20px;
  color: #4F7EF7;
  margin-bottom: 8px;
}

.card p {
  color: #666666;
  line-height: 1.6;
}

/* ----- Button ----- */
.btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #4F7EF7;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
}

.btn:hover {
  background-color: #3A5FC8;
}

/* ----- Footer ----- */
footer {
  text-align: center;
  padding: 24px;
  color: #999999;
  font-size: 14px;
  border-top: 1px solid #e5e5e5;
}

With just HTML and CSS — no JavaScript, no frameworks, no fancy tools — you can build a page that looks professional and complete. A real header, a hero section with a call-to-action button, a content area with cards, and a footer. Every polished website is built on these exact fundamentals.

Your First Real Project

Now it's your turn. Build a personal landing page that includes everything you've learned. Your page should have:

A header with your name and navigation links styled as a nav bar
A hero section with your name as a big heading and a short bio paragraph
A skills or hobbies section — use an unordered list or card-style layout
A styled "Contact Me" button (it doesn't need to go anywhere real — use # as the link)
A profile picture — make it circular with border-radius: 50% (use https://placehold.co/200x200 if you don't have one)
A footer with your name and the year

This is a real project you can share. Use external CSS (a separate .css file) for all your styles. Focus on making it look polished — clean spacing, consistent colors, and readable typography.

Try It Yourself

Build the personal landing page described above. Here's a checklist to guide you:

Create index.html with all the structure from Module 1
Create styles.css and link it in your <head>
Style the body: set a background color and font
Style the header/nav: make it look like a real navigation bar
Style the hero section: big heading, centered text, a button
Add cards or a styled list for your skills/hobbies
Style the footer
Open it in your browser and admire your work!

Key Terms

Class

A reusable name for a set of CSS styles. Written with a dot in CSS (.class-name) and applied to HTML with the class attribute. Classes let you style specific elements without affecting others.

Hover

A pseudo-class (:hover) that applies styles when the user's mouse is over an element. Commonly used for buttons and links to create interactive feedback.

Responsive

A design approach where pages adapt to different screen sizes. Key tools: max-width: 100% for images, max-width containers, and flexible layouts.

Selector

The part of a CSS rule that targets which HTML elements to style. Can be a tag name (h1), a class (.btn), or a combination.

Pseudo-class

A keyword added to a selector (like :hover or :focus) that targets an element in a specific state. Always starts with a colon.

Check Your Understanding

What is a CSS class and why would you use one?

Answer: A class is a reusable name for a set of CSS styles (written as .class-name in CSS). You use classes when you want to style specific elements without affecting all elements of the same tag — for example, making one heading big and blue while another stays small and gray.

How do you make a link look and behave like a button?

Answer: Remove the underline with text-decoration: none;, add padding for size, set a background-color, add border-radius for rounded corners, and use :hover to change the background when the mouse is over it.

What does border-radius: 50% do to a square image?

Answer: It turns the image into a perfect circle. The 50% means the corners are rounded by half the element's width/height, which on a square element creates a circle.

Previous: Spacing and Layout Next: What Is JavaScript?