Week 4 — CSS Fundamentals: Style the Structure

Sublime Text coding lab

Complete this coding task in Sublime Text, save the files using the names below, and open the HTML page in a browser to test it.

Today’s coding focus

External CSS, selectors, declarations, properties, values, and debugging

Project files and folder structure

Create week-04/index.html and week-04/css/styles.css; link the stylesheet with a relative path.

Syntax to practice

CSS rule syntax selector { property: value; }; element and class selectors; braces, colons, semicolons; <link rel="stylesheet" href="css/styles.css">.

Build it

Style the Week 3 profile page with background and text colors, base font, content width, spacing, and a distinct heading. Intentionally remove one semicolon, observe the effect, and fix it.

Code along: Connect HTML to an external stylesheet and practice selectors.

Open in Sublime Text: week-04/css/styles.css

Type the example below, save the file, and read the comments and selectors carefully. Use this as a starting point, then modify it for your own project.

body {
  margin: 0;
  padding: 24px;
  font-family: Arial, sans-serif;
  color: #222222;
  background: #f4f4f4;
}
h1 { color: #2457a7; }
.intro { font-size: 1.2rem; line-height: 1.6; }
.card { padding: 20px; background: white; border: 1px solid #ccc; }

Complete HTML and CSS example

These are matching files. Create the folders shown below, save each code sample using the exact filename, and keep the stylesheet link consistent with your folder structure.

HTML file: week-04/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS Fundamentals</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <main>
    <h1>CSS Fundamentals</h1>
    <p class="intro">HTML gives content structure; CSS controls presentation.</p>
    <section class="card"><h2>Practice</h2><p>Change the selector and observe the result.</p></section>
  </main>
</body>
</html>

CSS file: week-04/css/styles.css

body { margin: 0; padding: 24px; font-family: Arial, sans-serif; color: #222; background: #f4f4f4; }
h1 { color: #2457a7; }
.intro { font-size: 1.2rem; line-height: 1.6; }
.card { padding: 20px; background: white; border: 1px solid #ccc; border-radius: 8px; }

Important: The HTML links to css/styles.css. Keep that path correct relative to the HTML file.

Modify it

Add class=”intro” to a paragraph and class=”card” to a section. Change the heading color.

Save and test

1. Save the file in the exact folder shown above.
2. Open the HTML file in a browser, or refresh it after saving if it is already open.
3. Check that linked CSS, images, and navigation work. If something fails, inspect filenames, capitalization, nesting, and relative paths.

Assignment and required deliverables

Submit every item below. Use the specified filenames and folder structure. A screenshot does not replace a required source file.

Required files

• week-04/index.html — profile page linked to external CSS.
• week-04/css/styles.css — at least six declarations across four or more rules.
• week-04/README.txt — explain element, selector, property, and value.

Submission checklist

• Stylesheet loads; six or more declarations; four or more rules; README defines all four terms.
• Keep all HTML, CSS, image, text, and PDF files inside the named weekly or project folder.
• Open the HTML file in a browser before submitting and confirm linked CSS and images load.