Now that you understand how CSS works, how rules are written, and how selectors precisely target elements, it's time to bring your portfolio to life.

In Unit 2, you built clean, semantic HTML pages - using meaningful structure like <header>, <main>, <section>, lists, images, and forms. In Unit 3, you learned how to target those elements using type, class, ID, attribute, and state selectors.

This section brings everything together.

You'll now apply CSS to:

  • Structural elements (header, nav, main, footer)
  • Text elements (headings, paragraphs, lists, links)
  • Media elements (images)
  • Form elements (labels, inputs, buttons)

The goal is not decoration. The goal is consistency, clarity, and usability.

By the end of this section, your portfolio will move from plain structured HTML to a cohesive, professional website that reflects both thoughtful structure and intentional design.


Bringing It All Together

You've learned:

  • HTML structure defines meaning.
  • CSS rules define presentation.
  • Selectors control exactly what gets styled.

Now you'll apply those skills across your entire project.

Your goal is to create a consistent visual system across all pages - your Home, About, and Contact pages should feel unified. Shared fonts, colors, spacing, and interaction states should carry through the entire site.

This is where real development begins.

Step 1: Review Your Project Folder

Make sure your /project folder contains:

project/
  index.html
  about.html
  contact.html
  assets/
    css/
      style.css
    img/
      profile.jpg

All three pages must link to the same stylesheet:

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

One stylesheet = one visual system.

Step 2: Establish a Base Style

Open style.css and begin with base rules that apply across the entire site.

These are type selectors - broad rules that affect all matching elements.

/* Base styles */
html {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
}

body {
  margin: 2rem;
  background-color: #fdfdfd;
}

/* Shared link styles */
a {
  color: #0a66c2;
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

These rules apply globally and establish tone and readability.

Try this:

You are shaping the personality of your site.

Step 3: Create a Visual Hierarchy

Remember from Unit 2: headings define structure.

Now CSS reinforces that structure visually.

h1 {
  font-size: 2rem;
  color: #1d3557;
}

h2 {
  font-size: 1.4rem;
  color: #457b9d;
  margin-top: 1.5rem;
}

p {
  margin-bottom: 1rem;
}

This is where HTML meaning and CSS presentation meet.

Tip: Avoid too many colors or font sizes. Consistency builds trust.

Step 4: Add Simple Layout and Spacing

Now you begin shaping layout behavior while still respecting normal flow.

header, footer {
  text-align: center;
  padding: 1rem 0;
}

main {
  max-width: 800px;
  margin: 0 auto;
}

img {
  max-width: 100%;
  border-radius: 8px;
  display: block;
  margin: 1rem auto;
}

Pro Tip: You can also keep max-width and height from your original style.css. Feel free to play around with parameters. If something doesn't work, you can always start again from the provided templates.

You are:

  • Centering readable content
  • Controlling width
  • Preventing image overflow
  • Adding breathing room

This is foundational layout control.

Step 5: Style Your Form (Structure Meets Precision)

In Unit 2, you built a structured contact form. In Unit 3.2, you practiced targeting form elements with attribute and state selectors.

Now apply those skills here.

form {
  background: #f1faee;
  padding: 1rem;
  border-radius: 6px;
}

label {
  display: block;
  margin-bottom: 0.3rem;
}

input, textarea {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input:focus,
textarea:focus {
  outline: 2px solid #1d3557;
}

button {
  background: #1d3557;
  color: white;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 4px;
}

button:hover {
  background: #457b9d;
}

Notice what you're doing:

  • Targeting element types (input, textarea)
  • Targeting states (:focus, :hover)
  • Creating consistent spacing and interaction feedback

This is applied selector precision.

Step 6: Apply Styles Across Pages

Each page has a different purpose, but all share your base system.

Home:

  • Welcome message
  • Navigation
  • Featured image

About:

  • Bio
  • Lists
  • Supporting image

Contact:

  • Form elements
  • Structured labels
  • Clear interaction states

The structure came from Unit 2. The precision came from Unit 3. Now they work together.

Step 7: Preview and Refine

Open your site in the browser or GitHub Pages.

Look for:

  • Consistent spacing
  • Clear hierarchy
  • Readable contrast
  • Predictable link behavior
  • Form alignment and usability

Make small changes. Refresh often. This is what real iteration is all about.


Common Fixes - Style Your Portfolio with CSS

Styles not appearing on some pages → Confirm all pages link to the same stylesheet and paths are correct.

Inconsistent spacing → Check for duplicate or conflicting rules.

Layout feels too wide → Add max-width and center main.

Images breaking layout → Always use max-width: 100%.

Form elements misaligned → Ensure label, input, and textarea use display: block and consistent margins.

Over-styling too early → Simplify. Reduce color count. Increase whitespace.


Reflection

By this point, you should see clearly how structure and style work together. A single shared stylesheet creates cohesion across multiple pages and reinforces your site's identity. The selectors you practiced earlier now have practical meaning - they allow you to control layout, spacing, and interaction with intention rather than guesswork. As you refine your portfolio, consider how your typography choices affect readability, how your spacing affects comfort, and how your color system shapes tone and accessibility. You are no longer just writing HTML and CSS - you are designing experiences.


Next Steps

In Unit 4, you'll build on this foundation by learning how to make your layouts responsive. You'll move from static structure to adaptive design - ensuring your portfolio works beautifully on phones, tablets, and desktops.

Now it starts looking real.

Source: Khalil Abdullah and Saylor University
Creative Commons License This work is licensed under a Creative Commons Attribution 4.0 License.