Resume Website: CSS3 and Images — Programming Examples

Project purpose

Lesson 2 built the semantic HTML foundation for the semester resume website. Lesson 3 adds presentation with an external CSS3 stylesheet, introduces images and color, and restructures the page with HTML5 semantic elements. The HTML content and heading hierarchy from Lesson 2 stay the same — Lesson 3 changes how the page looks, not what it says.

Important: Use only images with a clear right to use them: a personal photo the student owns, an original graphic, or a properly licensed or public-domain image. Do not copy another person’s photo or artwork from the Web without permission. Continue to avoid publishing a home address, personal phone number, or other sensitive information.

Lesson 3 goals

By the end of this build, students should be able to:

create an external CSS3 stylesheet and link it from index.html
identify a selector, property, value, declaration, and rule in a CSS3 rule
explain inheritance, the cascade, and why !important is an exception to use sparingly
add a horizontal rule as a thematic break and style it with CSS
add one purposeful image with format-appropriate, purposeful alt text
align an image relative to text with a CSS class rather than a deprecated HTML attribute
specify color with hexadecimal, RGB/RGBA, and HSL/HSLA values, and explain why the historical browser-safe palette and CMYK do not apply here
set a background color and font stack with fallbacks, using relative font sizing
restructure the page with HTML5 semantic elements instead of a flat body
use an HTML entity for a copyright symbol
explain the difference between fixed-width and liquid layout and choose liquid for this project
validate both the HTML and the CSS and retest across browsers and window sizes

Project setup

Add a stylesheet next to the existing file:

resume-website/
├── index.html
└── styles/
    └── site.css

Keeping CSS in its own styles folder mirrors how real projects separate content from presentation and keeps the project organized as more files are added later in the semester.

Instructor follow-along

1. Link an external stylesheet

Talking points:

<link rel="stylesheet" href="styles/site.css"> goes in <head>, after <title>.
CSS can be applied inline, internally in a <style> block, or externally in a linked file. Inline overrides internal, and internal overrides external — but external is the easiest to maintain across an entire site, which is why the project uses it.
A relative path (styles/site.css) keeps the project portable if the folder is moved or uploaded.
An external stylesheet can be cached by the browser, which matters once the site has more than one page.

Pause and ask: If a second page is added later this semester, what do we gain from linking that page to the same stylesheet?

2. Learn CSS anatomy and the cascade

Talking points:

A rule is a selector plus one or more declarations in curly braces: h1 { color: #161616; }.
h1 is the selector, color is the property, #161616 is the value, and color: #161616; is the declaration.
End every declaration with a semicolon, including the last one, so new lines can be added without breaking the rule.
Some properties inherit from a parent element; most layout properties do not.
When two rules conflict, the browser resolves the cascade using source order, specificity, and origin. !important overrides normal cascade order and should be a rare exception, not a habit.
Browser developer tools (right-click → Inspect) show matched rules, inherited values, and which declaration actually won.

Pause and ask: If two rules both set color on the same heading, which one wins, and how could you check that in DevTools?

3. Style body text and headings

Talking points:

font-family should list a preferred font plus fallbacks, such as arial, verdana, helvetica. Quote any font name containing spaces.
font-size in em (or rem) lets a user’s browser zoom and text-size settings keep working; the common convention is that 16px equals 1em.
color sets text color; background-color sets the page background. Both accept the same value types.
If a background image and a background color are both set, the image renders first and the color is a fallback if the image fails to load.

Sizing units at a glance:

px — a fixed size; the same regardless of zoom or context. Fine for a thin border, not ideal for text.
em — relative to the parent element’s font size; scales with nearby text but can compound when elements are nested.
rem — relative to the root (html) font size only; the safest default for font sizes since it scales predictably without compounding.
% — relative to the parent’s size; common for widths in a liquid layout.

Use rem/em for text and spacing so zoom and accessibility settings keep working, % for widths that should flex with the window, and px sparingly for things that should never change size.

Pause and ask: Why does it help to specify a background color even on a page that also has a background image?

4. Add and style a horizontal rule

Talking points:

<hr> marks a thematic break, such as a topic change — not decoration for its own sake.
HTML5 dropped <hr> layout attributes; use CSS width, height, and margin to size and position it.
A good place for one on this project is between the header contact information and the rest of the resume.

Pause and ask: Lesson 2 warned against repeated <br> elements for spacing. Why is a styled <hr> a different case?

5. Add one purposeful image

Talking points:

<img> is a void element; src and alt are both required for the page to validate.
Choose a format by purpose: JPEG for a photo, PNG for a logo or graphic needing transparency or crisp edges, SVG for a simple icon.
Write alt text by purpose: informative text describes what the image shows; functional text describes a destination or action; decorative images get alt="" so assistive technology skips them.
Specify only one of width/height (or use percentages) so the browser scales the other dimension proportionally instead of distorting the image.

Pause and ask: If this image were a decorative flourish instead of a headshot or logo, what would its alt value be?

6. Align the image relative to text

Talking points:

Create a CSS class such as img.floatleft or img.floatright with float and a small margin, then apply it with class="floatleft" in the HTML.
vertical-align (top, middle, bottom) controls alignment for an image inline with text rather than floated beside a paragraph.
HTML alignment attributes on <img> are no longer supported in HTML5 — positioning is CSS’s job now.

Pause and ask: Why can’t we use an old HTML align attribute on <img> anymore, and what replaced it?

7. Specify colors accessibly

Talking points:

Hexadecimal (#RRGGBB), RGB/RGBA (rgb(0-255, 0-255, 0-255), with alpha 0.0–1.0), and HSL/HSLA (hue 0–360°, saturation and lightness as percentages, with alpha) are all valid ways to specify color.
The 216-color “browser-safe” palette was a historical constraint for old 8-bit displays and is not a modern requirement.
CMYK is a print color model and is not native CSS syntax.
Check contrast between text and background rather than choosing colors by eye alone, and never communicate meaning by color alone.

Pause and ask: Two colors look “close enough” in hex, but the resume text becomes hard to read against the new background — what should be checked before deciding the colors are final?

8. Restructure with HTML5 semantic elements

Talking points:

Replace the flat body from Lesson 2 with semantic regions: <header> for the name, title, and contact paragraphs; <main> for the summary, education, skills, experience, and projects sections; <footer> for references and a copyright line.
These elements describe the purpose of a section to browsers, search engines, and assistive technology — a <div id="header"> does not.
The CSS in site.css can now target header, main, and footer directly instead of relying only on classes or IDs.

Pause and ask: What does an HTML5 <header> communicate that a generic <div id="header"> does not?

9. Choose liquid over fixed-width layout

Talking points:

A fixed-width layout uses set pixel widths and can force horizontal scrolling on a narrow screen.
A liquid (relative) layout uses percentages or a max-width so the page adapts to the browser window.
This project should use liquid sizing for its overall width now, ahead of the responsive work planned for a later lesson.

Pause and ask: Lesson 2 already tested resizing the browser window. What should look different now that CSS controls layout instead of the browser’s defaults?

10. Document, validate, and retest

Talking points:

Comments in both files should explain non-obvious choices, never contain private information, and stay out of the way of the rendered page.
Validate index.html with the W3C Nu HTML Checker again, since the structure changed.
Validate styles/site.css with the W3C CSS Validation Service.
Retest in a second browser, resize the window narrow and wide, and confirm the alt text appears if the image path is temporarily broken.

Starter CSS

Copy this into resume-website/styles/site.css, then adjust the values once the page looks right.

/* styles/site.css */
/* Lesson 3: external stylesheet for the resume website */

body {
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: #161616;
  background-color: #f7f5f0;
  max-width: 40em;
  margin: 0 auto;
  padding: 0 1em;
}

header {
  margin-bottom: 1em;
}

header h1 {
  margin-bottom: 0.25em;
}

hr {
  width: 80%;
  height: 2px;
  margin: 1.5em auto;
  border: none;
  background-color: #cbb677;
}

main h2 {
  border-bottom: 1px solid #cbb677;
  padding-bottom: 0.25em;
}

img.profile {
  float: left;
  width: 25%;
  margin: 0 1em 0.5em 0;
}

footer {
  margin-top: 2em;
  font-size: 0.9em;
  color: #444444;
  text-align: center;
}

Updated `index.html` (Lesson 3 revisions)

Rebuild the page from the Lesson 2 file: link the stylesheet, restructure with semantic elements, add the horizontal rule, add one image, and add a copyright line.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Student resume for Your Name">
  <meta name="author" content="Your Name">
  <title>Your Name | Resume</title>
  <link rel="stylesheet" href="styles/site.css"> <!-- new: links the external CSS3 stylesheet -->
</head>

<body>
  <!-- Replace the sample information with your own safe, professional content. -->

  <header> <!-- new: HTML5 semantic element wrapping the name/contact info -->
    <h1>Your Name</h1>
    <img src="images/profile.jpg" alt="Your Name" class="profile" width="150" height="150"> <!-- new: image element, requires src and alt -->
    <p><strong>Web Development Student</strong></p>
    <p>Booneville, Mississippi</p>
    <p>Email: student@example.com</p>
    <p>Phone: 555-0100</p>
  </header>

  <hr> <!-- new: thematic break, styled with CSS -->

  <main> <!-- new: HTML5 semantic element wrapping the main content -->
    <h2>Professional Summary</h2>
    <p>
      Motivated web development student learning to create clear,
      accessible, and standards-based websites. Interested in an
      entry-level opportunity to apply technical and problem-solving skills.
    </p>

    <h2>Education</h2>
    <h3>Northeast Mississippi Community College</h3>
    <p>
      Web Development Program<br>
      Expected graduation: Month Year
    </p>

    <h2>Skills</h2>
    <ul>
      <li>HTML document structure</li>
      <li>Readable and valid markup</li>
      <li>CSS3 styling and external stylesheets</li>
      <li>Problem solving</li>
      <li>Written and verbal communication</li>
    </ul>

    <h2>Experience</h2>
    <h3>Job Title or Volunteer Role</h3>
    <p><em>Organization Name, City, State | Month Year to Present</em></p>
    <ul>
      <li>Describe one responsibility using a strong action verb.</li>
      <li>Explain a contribution or result when possible.</li>
      <li>Show a technical, teamwork, or customer service skill.</li>
    </ul>

    <h2>Projects</h2>
    <h3>Resume Website</h3>
    <p>
      Building a standards-based resume website throughout IST 1433.
      Lesson 3 added an external stylesheet, an image, and HTML5
      semantic structure. The project will continue to grow as new
      HTML, CSS, and JavaScript concepts are learned.
    </p>
  </main>

  <footer> <!-- new: HTML5 semantic element wrapping references + copyright -->
    <h2>References</h2>
    <p>Available upon request.</p>
    <p>Copyright &copy; <span>Your Name</span>. All rights reserved.</p> <!-- new: copyright line using the &copy; entity -->
  </footer>

  <!-- Your Name, today's date. Lesson 3 CSS3 and images. -->
</body>
</html>

Student customization checklist

Validation and testing

Open index.html in a browser and confirm the stylesheet is applied.
Validate index.html with the W3C Nu HTML Checker.
Validate styles/site.css with the W3C CSS Validation Service.
Correct the first meaningful error in each, then revalidate.
Temporarily rename the image file and confirm the alt text appears in its place, then restore the file name.
Open the page in a second browser.
Resize the browser window narrow and wide and confirm the layout and text remain readable.
Zoom the browser’s text size up and confirm the page still reads clearly.

Lesson 3 design decisions

CSS lives entirely in an external stylesheet, not inline or in an internal <style> block, to keep one file governing the whole page’s presentation.
The page uses liquid, relative sizing (max-width, %, em) rather than fixed pixel widths so it already adapts to different window sizes ahead of the dedicated responsive lesson.
The heading hierarchy and content from Lesson 2 are unchanged; CSS reinforces that structure rather than replacing it.
Color and font choices were checked for contrast and include a fallback font.
Hyperlink styling (a:link, a:visited) is intentionally deferred until the next lesson introduces the <a> element.

Next lesson checkpoint

Keep index.html and styles/site.css as the source of truth. The next lesson adds hyperlinks and navigation while preserving this structure and styling.

Project purpose

Lesson 3 goals

Project setup

Instructor follow-along

1. Link an external stylesheet

2. Learn CSS anatomy and the cascade

3. Style body text and headings

4. Add and style a horizontal rule

5. Add one purposeful image

6. Align the image relative to text

7. Specify colors accessibly

8. Restructure with HTML5 semantic elements

9. Choose liquid over fixed-width layout

10. Document, validate, and retest

Starter CSS

Updated index.html (Lesson 3 revisions)

Student customization checklist

Validation and testing

Lesson 3 design decisions

Next lesson checkpoint

Updated `index.html` (Lesson 3 revisions)