Cascading Style Sheets (CSS3) and Graphical Elements

Lesson purpose

Lesson 3 adds presentation to the semantic HTML created in Lesson 2. Students learn to author and debug CSS, select and mark up images, and make visual decisions that remain readable, culturally appropriate, accessible, and usable at different viewport sizes. Presentation should reinforce meaning rather than replace it.

Learning objectives

Incorporate graphical images into HTML pages and distinguish GIF/GIF89a, JPEG, PNG, TIFF, BMP, and SVG use cases.
Add horizontal rules, background colors, and background images with CSS.
Explain RGB, hexadecimal, RGBA, HSL/HSLA, and the historical browser-safe palette.
Apply CSS selectors, declarations, inheritance, cascade, and appropriate placement.
Use typography, structural regions, and responsive constraints to improve readability.
Evaluate color and layout for different audiences, cultures, devices, and assistive technologies.

1. Why CSS belongs outside HTML

CSS was created because presentational HTML became difficult to maintain. A shared external stylesheet lets one rule update many pages, keeps HTML focused on meaning, improves consistency, and can be cached to reduce repeated downloads. Separating content from presentation also allows the same content to adapt to a phone, tablet, desktop, print view, or assistive technology.

Talking points

Separation: HTML identifies what content is; CSS describes how it should look and flow.
Reuse: One selector can style every matching heading, card, or navigation link.
Change management: A central edit prevents page-to-page visual drift.
Bandwidth: A cached external stylesheet may be reused across pages.
Compatibility: CSS features are implemented by modules; verify support for the property and value rather than assuming a version label guarantees support.

The book presents CSS1, CSS2, and CSS3 as successive standards. The modern practice is modular CSS: individual features advance independently, so test the feature you use and provide a resilient result when it is unavailable.

2. CSS rule anatomy

p.intro {
  color: #161616;
  font-size: 1.25rem;
}

Selector (p.intro): identifies the elements that receive the rule.
Type selector (p): narrows the match to paragraphs.
Class selector (.intro): adds a reusable hook that can be applied to appropriate elements.
Declaration block ({ ... }): contains the settings.
Property (color, font-size): names the presentation feature.
Value (#161616, 1.25rem): supplies the setting.
Colon: separates a property from its value.
Semicolon: separates declarations; keep it on the final declaration as well for easy editing.
Formatting: one declaration per indented line makes review and debugging easier.

Inheritance and the cascade

Some text-related properties inherit from a parent; most layout and box properties do not. An explicit rule on a descendant can override an inherited value. When declarations compete, the browser resolves origin and importance, cascade layers, specificity, scope/proximity, and source order. !important changes priority and should be an exception, not a routine fix. Developer tools show matched rules, crossed-out declarations, inherited values, and the final computed style.

CSS placement

Inline: applies to one element and has the highest maintenance cost for repeated design.
Internal: applies to one document; useful for a contained demonstration or page-specific rule.
External: applies across pages and is easiest to govern consistently.

Prefer the narrowest scope that remains maintainable. A relative path keeps the project portable:

<!-- index.html -->
<link rel="stylesheet" href="styles/site.css">
<h1>Trail Guide</h1>
<p class="intro">Plan before you hike.</p>

/* styles/site.css */
.intro {
  color: #161616;
  font-size: 1.25rem;
}

Sass can add variables, nesting, and other authoring conveniences, but a build step compiles Sass into CSS. Browsers receive the generated CSS, so Sass does not remove cascade, specificity, compatibility, or documentation responsibilities.

3. Structural separators and entities

<hr> represents a thematic break such as a change of topic. In modern HTML it has no layout attributes; style its width, alignment, color, and size with CSS. Use a real section heading when the content needs a named region, and use <hr> only when the separation itself carries meaning.

Reserved characters must be escaped when they are intended as text rather than markup:

<p>Use &lt; and &gt; to show angle brackets; use &amp; for an ampersand.</p>
<p>Copyright &copy; 2026 NEMCC</p>

An entity begins with & and ends with ;. Common references include ©, ®, ",  , <, >, and &. Use CSS spacing instead of repeated non-breaking spaces for layout.

4. Images and format decisions

Images can explain, establish mood, support navigation, or sell a product, but unnecessary images increase transfer size and clutter. Choose a format by subject and delivery needs:

JPEG: lossy compression and millions of colors; usually efficient for photographs. More compression reduces file size and image quality.
PNG: lossless raster graphics and transparency; useful for interface graphics, screenshots, and images needing crisp edges.
GIF/GIF89a: limited palette and simple legacy animation; use only when that limitation fits the asset.
TIFF: high-quality print/production format; generally too large for ordinary Web delivery.
BMP: uncompressed raster format; usually inefficient for Web pages.
SVG: scalable vector graphics for suitable logos, icons, and diagrams; verify that the content and security policy support inline or external SVG.

The image element is void and needs a source plus an alternative:

<img src="images/trail-map.png"
     alt="Map showing the accessible trail entrance"
     width="800" height="500">

src: path to the resource; upload the referenced directory with the page.
alt: communicates purpose when the image cannot be seen.
Dimensions: reserve layout space and preserve the intrinsic ratio; do not distort by changing width and height independently.

Alternative text by purpose

Informative: state the essential information conveyed by the image.
Functional: describe the action or destination when the image is a link or control.
Decorative: use alt="" so assistive technology can ignore a flourish that adds no information.
Complex: provide a nearby text equivalent or fuller description.

Background images decorate a box rather than becoming document content. Provide a background color while the image loads, maintain text contrast, and ensure the page still communicates if the image fails. Use CSS layout systems such as flexbox or grid for relationships; use floats only for limited text-wrapping cases.

5. Color systems and accessible contrast

Screen color mixes light. RGB values range from 0–255; higher values are lighter. Hexadecimal notation combines red, green, and blue pairs (#RRGGBB). RGBA adds an alpha value from 0 (transparent) to 1 (opaque). HSL expresses hue (0–360 degrees), saturation, and lightness; HSLA adds alpha.

The historical 216-color browser-safe palette helped 8-bit displays but is not a modern requirement. CMYK is a print-production model, not normal CSS syntax. Current decisions should be based on contrast, meaning, tested support, and user settings.

body {
  background-color: #f3eddd;
  color: #161616;
}

a:link { color: #125f78; }
a:visited { color: #5a3d73; }
a:focus-visible { outline: 3px solid #cbb677; }

Evaluate foreground and background together. Keep link states distinguishable, make keyboard focus visible, and never communicate status by color alone. Add text, icons, patterns, or programmatic states as redundant cues. Consider dark mode, high contrast, zoom, and device differences.

6. Typography and page regions

font-family: use a resilient stack with fallbacks; quote names containing spaces.
font-size: use relative units such as rem so zoom and user settings remain useful; 16px is commonly treated as 1rem.
Line length and spacing: control measure, line-height, margins, and padding for comfortable reading.
Hierarchy: let HTML headings express structure; use CSS scale and weight for appearance.
Serif and sans-serif: choose readable forms and verify that the selected typeface exists or has a fallback.

Use semantic regions to support layout and navigation:

header introduces a page or section.
nav identifies major navigation links.
main contains the dominant unique content.
footer contains supporting information for its nearest page or section.

7. Fixed, liquid, and responsive layout

A fixed-width layout uses set dimensions and can force horizontal scrolling on small screens. A liquid or fluid layout uses relative space and can adapt more gracefully, but still needs readable line lengths and minimum/maximum constraints. Responsive systems change layout when content no longer fits, not merely at arbitrary device labels.

Let columns share available space with flexible tracks.
Use min/max limits to protect readable line length and component size.
Keep semantic source order understandable when columns collapse.
Prevent media and controls from overflowing their container.
Test narrow viewports, zoomed text, keyboard navigation, and missing resources.

8. Design and audience evidence

Color, images, language, and layout communicate tone and organizational identity. A combination that feels professional to one audience may have a different cultural meaning elsewhere. Ask who will view the site, what “professional” means to that audience, whether translations are needed, and whether the message or imagery assumes a particular culture. Gather stakeholder and user evidence rather than treating personal preference as a requirement.

9. Classroom application

Trace a style to its result

Select an element in developer tools.
Inventory matching, inherited, and overridden declarations.
Explain why the winning declaration has priority.
Make the smallest maintainable source change and retest.

Style the semester resume page

Link an external stylesheet from the Lesson 2 HTML skeleton.
Add reusable rules for body text, headings, links, and page regions.
Add one purposeful image with purpose-appropriate alternative text.
Test contrast, focus, zoom, narrow layouts, and missing-image behavior.
Inspect the cascade and validate after each meaningful change.

10. Knowledge check

A later declaration loses even though it appears last: a higher-priority cascade criterion won.
A decorative flourish is announced: give it an empty alt.
A status is shown only by changing black text to red: add a text or programmatic cue; do not rely on color alone.
A two-column page overflows on a narrow viewport: adapt tracks and constraints and test again.

Common misconceptions

CSS3 is not one frozen feature set; current CSS advances in modules.
A browser-safe palette is not a modern design requirement.
alt is not a filename or a visual caption; it is a purposeful text alternative.
A background image is not a substitute for meaningful page content.
More compression is not always better; JPEG quality and file size trade off.
!important does not repair poor selector architecture.
Color alone is not accessible communication.
A layout that works on a desktop is not automatically responsive.

Lesson summary

CSS keeps semantic HTML reusable and maintainable while providing typography, color, spacing, regions, and responsive constraints. Images succeed when their format, dimensions, alternative text, and fallback behavior match their purpose. Test the cascade, contrast, culture, viewport behavior, and failure states with evidence so presentation reinforces meaning instead of hiding it.