Web Development Study Guide: Online Lessons 3–4

How to use this guide

Use this guide after reading Lessons 3 and 4 and completing the related activities. Practice identifying the exact part of a CSS rule or hyperlink that a question describes. Then test your code in a browser at different widths and with links that point to local files, external resources, and locations within a page.

The ideas that connect Lessons 3–4

Lesson 3 controls how structured HTML looks and adapts. Lesson 4 connects those documents into a usable site. In both lessons, good Web development depends on clear meaning, predictable syntax, accessibility, and maintenance:

CSS changes presentation without replacing HTML structure.
Images and links must have purposeful alternatives and destinations.
Relative paths preserve a project’s organization; absolute URLs identify external resources.
A page that looks correct is not finished until its contrast, layout, keyboard behavior, destinations, and ongoing maintenance have been checked.

Lesson 3 — Cascading Style Sheets (CSS3) and Graphical Elements

Why CSS exists

HTML describes content and structure. Cascading Style Sheets (CSS) describe presentation: color, typography, spacing, backgrounds, borders, and layout. Keeping presentation in CSS makes a site easier to update, keeps pages visually consistent, and lets one external stylesheet serve many pages. A cached external stylesheet can also reduce repeated downloads.

The course presents CSS1, CSS2, and CSS3 as successive standards, but modern CSS develops as independent modules. Test the individual properties and values you use rather than assuming that a version label guarantees identical support everywhere.

CSS rule anatomy

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

Part	Meaning in the example
Selector	`body`; identifies the elements to style
Property	`background-color` and `color`; names the presentation feature
Value	`tan` and `#161616`; supplies the setting
Declaration	The property-value pair(s) inside braces, such as `{background: tan;}`; a single pair such as `color: #161616;` is also called a declaration
Rule	The selector plus its declaration block

Use a colon between a property and its value and a semicolon between declarations. The selector body, the rule body { background: tan; }, the value tan, the declaration { background: tan; }, and the property background are different pieces of the same rule.

Some properties inherit from a parent element. When declarations compete, the cascade considers priority, specificity, scope, and source order. !important can override normal priority, but it should be an exception rather than a routine repair for poorly organized selectors.

Three ways to apply CSS

Method	Where it is written	Best use
Inline	In a single element’s `style` attribute	A one-off demonstration or tightly scoped exception
Internal	In a `<style>` block in the document’s head	Rules used by one page
External	In a separate `.css` file linked with `<link>`	Reusable site-wide styling and easiest maintenance

Prefer external CSS for a multi-page site. A typical link is:

<link rel="stylesheet" href="styles/site.css" />

If a user’s computer does not have a named font, the browser uses a default or fallback font. Provide a font stack so the page remains readable:

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
}

Horizontal rules, entities, and spacing

<hr> represents a thematic break. Browsers commonly display it with a three-dimensional shading effect by default, but its width, alignment, color, and size should be controlled with CSS rather than obsolete HTML attributes.

Reserved or non-keyboard characters use HTML entities: an ampersand, a name or number, and a semicolon. Common examples include © for ©, ® for ®, € for €, ¥ for ¥, < for <, > for >, & for &, " for quotation marks, and   for a non-breaking space. Characters such as € and ¥ that are not on the keyboard are non-keyboard characters written as entities. Browsers collapse extra spaces and ignore hard returns, so to indent a paragraph or add extra spaces between words in HTML, insert non-breaking spaces ( ). For general layout, prefer CSS.

Images and file formats

The <img> element is a void element. Its src identifies the image file and its alt provides alternative text that appears while the graphic is loading, or in place of the graphic in non-graphical browsers or when the image cannot be seen.

<img
  src="images/campus-map.png"
  alt="Map showing the accessible campus entrance"
/>

Choose an image format for the content and delivery requirements:

Format	Typical use and characteristics
JPEG	Photographs and complex images; supports up to 24 bits of color information (16.7 million colors) and lossy compression. More compression usually means smaller files and lower quality. A JPEG can be much smaller than a similar-sized PNG.
GIF	Line art, simple drawings, and navigation graphics; supports 256 colors, transparency, interlacing, and animation.
PNG	Lossless Web graphics developed using open standards, with adjustable bit depth and transparency; useful when crisp edges or transparency matter.
BMP	Usually uncompressed and large, so it is inefficient for ordinary Web delivery.

The WebP format was introduced by Google in 2010.

Use concise, useful alternative text. Describe the information or action, not merely the file name. If an image is decorative and communicates nothing, use an empty alternative such as alt="". If an image is a link, the alternative should describe the link’s destination or action.

By default, an image aligns its bottom with the surrounding text (bottom alignment); CSS can change that alignment, for example with vertical-align.

Avoid inserting spaces or hard returns inside an <img> tag, because XHTML will render the additional spaces or hard returns, which may affect the placement of the image on the page. Keep the tag readable through normal formatting while keeping its attributes within one element boundary.

Color systems and accessibility

Screens mix light using the RGB model. Red, green, and blue values commonly range from 0 through 255; mixing all three at their highest values produces white, while all zeroes produce black. In RGB code, the lower the numeric value representing a color, the darker that color will be, and the higher the value, the lighter it will be.

Hexadecimal: #RRGGBB; #FFFFFF is white and #000000 is black. Hexadecimal uses 0–9 and A–F, so A = 10, F = 15, 10 = 16, and FF = 255, the top of the 0–255 range.
RGB: rgb(255, 255, 255); identifies red, green, and blue components.
RGBA: RGB plus an alpha value for transparency.
HSL: Hue, saturation, and lightness; hue is measured around a 0–360-degree color wheel.
CMYK: Cyan, magenta, yellow, and key/black; it is a print color model and is not supported as a normal HTML5 Web color scheme.

The historical 216-color browser-safe palette was designed for older 8-bit displays. Current design decisions should emphasize contrast, readable text, visible focus, user settings, and tested browser support. Do not communicate status by color alone; add text, icons, patterns, or another programmatic cue.

Layout, typography, and page design

Use succinct wording, especially on the home page, because many users scan a page quickly for specific information or a link to it. Keep each page focused, divide content into meaningful sections, and include navigation links at the top and bottom of the page and within the body of the page to reduce the need to scroll. Do not put navigation only at the top.

Use font stacks with fallbacks and relative sizes such as rem so text can resize.
Use HTML headings for hierarchy and CSS for their appearance.
Check line length, contrast, whitespace, and readability at different zoom levels.
A fixed-width layout uses set dimensions and may force horizontal scrolling on small screens.
A liquid or fluid layout uses relative space and adapts more easily to different screens. It is the preferred general approach for modern responsive pages.

Lesson 3 terms to know

CSS, selector, property, value, declaration, rule, cascade, inheritance, specificity, !important, inline CSS, internal stylesheet, external stylesheet, font stack, fallback font, hr, HTML entity, non-breaking space, RGB, RGBA, hexadecimal, HSL, CMYK, browser-safe palette, JPEG, GIF, PNG, BMP, WebP, lossy compression, alt, fixed-width layout, liquid layout, responsive design

Lesson 4 — Hyperlinks

The anchor element

An anchor turns text or an image into a hyperlink:

<a href="schedule.html">View the class schedule</a>

<a> is the container element for the link.
href is the hypertext reference that identifies the destination.
The text between the opening and closing tags is the clickable link text.
The opening tag needs a quoted href value, a closing angle bracket, and a matching </a>.

In the example, schedule.html is the target and View the class schedule is the text displayed to users. By default, clicking a hyperlink displays its specified destination in the current browser context; it does not automatically open a new browser window.

Browsers commonly show unvisited links as blue and underlined and visited links as purple and underlined. In CSS, the a:link selector styles unvisited links, a:visited styles visited links, a:hover styles a link under the pointer, and a:active styles a link being clicked. CSS can change these states, but links must remain visually distinguishable and keyboard focus must remain visible.

URI, URL, and path vocabulary

A URI (Uniform Resource Identifier) is the broad category of resource identifiers.
A URL (Uniform Resource Locator) identifies a resource by location and access scheme.
A URN (Uniform Resource Name) identifies a resource by name within a namespace.
A relative or partial URL is resolved from the current document’s directory.
An absolute or fully qualified URL contains the full path, including the protocol indicator such as https://.

Use relative paths for files within your own site:

<a href="about/team.html">Meet the team</a>
<a href="../index.html">Return home</a>

These paths continue to work when the project moves as long as the directory structure and file names remain consistent. Preserve capitalization and spelling because a path that works on one local system may fail on a case-sensitive Web server.

Use an absolute URL for an external resource:

<a href="https://www.w3.org/">World Wide Web Consortium</a>

The protocol indicator is part of a fully qualified external URL. Use publicly available links and trustworthy destinations when linking to other organizations, and consider copyright, licensing, privacy, and implied endorsement.

Local, internal, and external hyperlinks

Local hyperlinks connect pages within your own Website and should use the project’s relative directory structure.
Internal hyperlinks jump to another point or section within the same Webpage.
A link to another Website or external file uses an absolute URL and is an external hyperlink.
An image can become a hyperlink when the <img> element is placed inside an anchor.

<a href="index.html">
  <img src="images/logo.png" alt="Course home" />
</a>

The image is now the clickable link content. Its alt describes the destination or action, not just the image’s appearance.

Fragment links and bookmarks

An internal link requires an internal bookmark, called an anchor, that identifies the point the link references within the page. Define the target with the id attribute, then create the link with an <a> element whose href value starts with #:

<nav aria-label="Glossary index">
  <a href="#html">HTML</a>
  <a href="#url">URL</a>
</nav>

<h2 id="html">HTML</h2>
<p>Hypertext Markup Language structures a document.</p>
<h2 id="url">URL</h2>
<p>A Uniform Resource Locator identifies a resource location.</p>

The # tells the browser to find a target in the current document. A path and fragment can target a section in another file, such as syllabus.html#grading. A full URL plus a fragment, such as http://www.ucorp.biz/internal.html#First, links to an internal anchor in an external file. When the href value omits the #, the browser looks for a location within an external document. The fragment must match the destination id exactly.

A glossary index or table of contents is an indexing and cataloging feature: users can scan available topics and jump directly to the explanation. Test the target’s existence, keyboard behavior, focus location, and browser history.

Link maintenance

Broken or obsolete links create link rot. An automated link checker can identify invalid references, but the next step is to inspect and manually update, repair, or remove the affected code. A successful server response does not prove that the destination is current or useful.

Use a maintenance loop:

Inventory important local, external, image, and fragment links.
Check status, destination relevance, wording, accessibility, and security.
Repair paths, redirects, fragments, link text, or navigation.
Retire obsolete links while preserving necessary user paths and records.

Lesson 4 terms to know

hyperlink, anchor, href, link text, URI, URL, URN, relative URL, partial URL, absolute URL, fully qualified URL, local hyperlink, internal hyperlink, external hyperlink, fragment, hash, id, bookmark, a:link, image link, link rot, link checker, mailto, tel