Code Examples

Scroll down the page or select a chapter from the list to view the code examples.

Chapter 01
Chapter 03
Chapter 04
Chapter 05
Chapter 06
Chapter 07
Chapter 08
Chapter 09
Chapter 10
Chapter 11
Chapter 12
Chapter 13
Chapter 14
Chapter 15
Chapter 16
Chapter 17
Chapter 18
Chapter 19
Chapter 20

Download All Code Examples [ZIP, 9.4 MB]

Note:

The page numbers shown below aren't necessarily accurate if you have either the EPUB or Kindle version of the book, because pages flow differently in those formats.
"Fig" is short for "Figure" and "Figs" is short for "Figures."
An item marked as an "Extra" represents an example that doesn't appear in the book.
Chapters 2 and 21 aren't shown because they don't contain any examples.

Chapter 1 Web Page Building Blocks

A Basic HTML Page
Page 3, Fig B: basic-html-page.html
Semantic HTML: Markup with Meaning
Page 6, Fig A: basic-html-page-with-2nd-paragraph.html
A Web Page's Text Content
Page 16, Figs A and C: page-text-content.html

Chapter 3 Basic HTML Structure

Starting Your Web Page
Page 43, Fig A: starting-web-page.html
Creating a Title
Page 46, Fig A: creating-a-title.html
Creating Headings
Page 48, Fig A: creating-headings.html

Page 49: h1-h6-default-display.html
Understanding HTML5's Document Outline
Page 55, Fig E: doc-outline-sample-version4.html

Page 57 (sidebar): doc-outline-sample-syndicated.html
Grouping Headings
Page 58, Fig A: grouping-headings.html
Creating a Header
Page 61, Fig A: creating-a-header.html

Page 62, Fig C: page-with-two-header-elements.html
Marking Navigation
Page 64, Fig A: marking-navigation.html
Creating an Article
Page 68, Fig A: creating-an-article.html
Defining a Section
Page 72, Fig A: defining-a-section.html
Specifying an Aside
Page 75, Fig A: specifying-an-aside.html
Creating a Footer
Page 80, Fig A: creating-a-footer.html
Creating Generic Containers
Page 84, Fig A: no-divs.html

Page 84, Fig B: creating-generic-containers.html

Page 87, Fig E: divs-with-ids.html
Improving Accessibility with ARIA
Page 88, Fig A: improving-accessibility-aria.html
Naming Elements with a Class or ID
Page 93, Fig A: naming-with-class-id.html
Adding the Title Attribute to Elements
Page 95, Fig A: adding-title-attribute.html
Adding Comments
Page 96, Fig A: adding-comments.html

Chapter 4 Text

Starting a New Paragraph
Page 100, Fig A: starting-paragraph.html
Adding Author Contact Information
Page 102, Fig A: author-contact-information.html
Creating a Figure
Page 104, Fig A: creating-a-figure.html
Specifying Time
Page 106, Fig A: specifying-time.html

Page 107, Fig C: specifying-time-more-examples.html
Marking Important and Emphasized Text
Page 110, Fig A: important-and-emphasized-text.html
Indicating a Citation or Reference
Page 112, Fig A: indicating-a-citation.html
Quoting Text
Page 113, Fig A: quoting-text-blockquote.html

Page 114, Fig C: quoting-text-q.html
Highlighting Text
Page 116, Fig A: highlighting-text.html

Page 117, Fig C: highlighting-text-example2.html
Explaining Abbreviations
Page 118, Fig A: abbreviations.html
Defining a Term
Page 120, Fig A: defining-instance-of-term.html
Creating Superscripts and Subscripts
Page 124, Fig A: superscript-and-subscript.html
Noting Edits and Inaccurate Text
Page 124, Fig A: noting-edits-del-ins.html

Page 125, Fig C: noting-edits-del-ins-example2.html

Page 126, Fig E: noting-inaccurate-text-s.html
Marking Up Code
Page 128, Fig A: marking-up-code.html

Page 129 (sidebar): kbd-samp-var.html
Using Preformatted Text
Page 130, Fig A: preformatted-text.html
Specifying Fine Print
Page 132, Fig A: specifying-fine-print.html
Creating a Line Break
Page 133, Fig A: creating-line-break.html
Creating Spans
Page 134, Fig A: creating-spans.html
Other Elements
Page 136 (u element): unarticulated-text.html

Page 137 (wbr element): creating-line-break-opportunity.html

Page 138 (ruby, rp, and rt elements): ruby-annotations.html

Page 138 (ruby, rp, and rt elements): ruby-annotations-example2.html

Page 141 (bdi element): bdi.html

Page 142 (meter element): using-meter-to-provide-gauge.html

Page 144 (progress element): indicating-progress.html

Page 144 (progress element): indicating-progress-example2.html

Chapter 5 Images

Note: To keep the examples simple for this chapter, all the HTML and image files are in the same folder. This is absolutely not what I recommend you do when building your pages. Instead, it is common practice to keep your files organized by placing images in a separate folder ("img" and "images" are popular folder names). The path to your image in the src value of each img element needs to reflect this.

For example, currently the HTML that loads the image in specifying-img-size.html is as follows (the image path is highlighted):

<img src="cornermarket.jpg" alt="Fruit Stand in Market" width="300" height="399" />

If you were to move cornermarket.jpg to a folder called "images" in the same directory as the HTML page, you would need to change the src value in the code as shown below:

<img src="images/cornermarket.jpg" alt="Fruit Stand in Market" width="300" height="399" />

You can see working examples in the Chapter 6 files (such as the first page, link-to-page.html). They reference images in a folder called img.

Inserting Images on a Page
Page 156, Fig A: inserting-an-image.html
Offering Alternate Text
Page 157, Fig A: alternate-text.html
Specifying Image Size
Page 159, Fig D: specifying-img-size.html
Scaling Images with the Browser
Page 160, Fig A: scaling-image-before.html (image shows at native size)

Page 160, Fig B: scaling-image-after.html (image is scaled down)
Adding Icons for Your Web Site
Page 162, Fig B: favicon.html

Chapter 6 Links

Creating a Link to Another Web Page
Page 167, Fig A: link-to-page.html

Page 168, Fig D: block-level-link.html

Page 169, Fig F: link-to-page-on-another-site.html
Creating Anchors
Page 172, Fig A: anchor-links.html

Page 173, Fig B: anchor-links-with-sections.html
Linking to a Specific Anchor
See the previous two examples.
Creating Other Kinds of Links
Page 175, Fig A: other-kinds-of-links.html

Chapter 7 CSS Building Blocks

Adding Comments to Style Rules
Pages 182-183, Figs A-D: css-comments.css
The Cascade: When Rules Collide
Page 184, Figs A and B: the-cascade.css and the-cascade.html

Page 186, Figs D and E: specificity.css and specificity.html
A Property's Value
Page 192, Fig I: rgba.css (view results in rgba.html)

Page 194: hsla.css

Page 195, Fig L: rgba-with-opaque-fallback.css

Page 195, Fig M: rgba-older-versions-ie.css

Chapter 8 Working with Style Sheets

Creating an External Style Sheet
Page 198, Fig A: base.css
Linking to External Style Sheets
Page 200, Figs A and B: base.css and link-external-style-sheet.html

Page 201, Fig D: link-external-style-sheet-example2.html (it also uses base.css)
Creating an Embedded Style Sheet
Page 202, Fig A: create-embedded-style-sheet.html
Applying Inline Styles
Page 204, Fig A: apply-inline-style.html
The Importance of Location
Page 206, Fig A: importance-of-location.html (it also uses base.css)

Page 207, Fig C: importance-of-location-example2.html (it also uses base.css)
Using Media-Specific Style Sheets
Page 208, Fig A: media-specific-style-sheets.html (it also uses base.css and print.css)

Page 209, Fig B: base-with-media-print.css
Offering Alternate Style Sheets
Page 210, Figs A-D: alternate-style-sheet.html, base.css, preferred.css, and alternate.css

Chapter 9 Defining Selectors

Selecting Elements by Name
Pages 216-217, Figs A and B: select-by-element-name.html and name.css
Selecting Elements by Class or ID
Pages 218-219, Figs A and B: select-by-class.html and class.css

Page 220 (second tip): select-by-id.html and id.css
Selecting Elements by Context
Page 221, Figs A-C: select-by-context.html and context.css (includes Figs B and C)

Page 223, Fig E: child-selector.css (view results in select-by-child-selector.html)

Page 224, Fig G: first-child-selector-no-effect.css (view results in select-by-first-child-no-effect.html)

Page 225, Fig I: first-child-selector.css (view results in select-by-first-child.html)

Page 226, Fig K: adjacent-sibling-combinator.css (view results in select-by-adjacent-sibling.html)
Selecting Part of an Element
Page 227, Figs A and B: select-by-first-line.html and first-line-selector.css

Page 228, Fig D: first-letter-selector.css (view results in select-by-first-letter.html)
Selecting Links Based on Their State
Page 230, Figs A and B: select-links-by-state.html and links-by-state.css
Selecting Elements Based on Attributes
Page 232-233, Figs A and B: select-by-attribute.html and attribute-selector.css

Extra Examples: select-by-attribute-various.html and attribute-selector-various.css
Specifying Groups of Elements
Pages 236-237, Figs A and B: select-by-groups.html and groups.css
Combining Selectors
Page 238, Fig A: combining-selectors.css (view results in combining-selectors.html)

Chapter 10 Formatting Text with Styles

Page 242, Fig A: no-styles.html (page without any CSS applied except browser defaults)
Choosing a Font Family
Page 243, Fig A: font-family.css (view results in font-family.html)
Specifying Alternate Fonts
Page 244, Fig A: font-family-alternate.css (view results in font-family-alternate.html)
Creating Italics
Page 246, Fig A: font-style-italic.css (view results in font-style-italic.html)
Applying Bold Formatting
Page 248, Fig A: font-style-bold.css (view results in font-style-bold.html)
Setting the Font Size
Page 250, Fig A: font-size-pixels.css (view results in font-size-pixels.html)

Page 251, Fig C: font-size-ems.css (view results in font-size-ems.html)
Setting the Line Height
Page 255, Fig A: line-height.css (view results in line-height.html)
Setting All Font Values at Once
Page 256, Fig A: font-shorthand.css (view results in font-shorthand.html)
Setting the Color
Page 258, Fig A: font-color.css (view results in font-color.html)
Changing the Text’s Background
Page 260, Fig A: background.css (view results in background.html)
Controlling Spacing
Page 264, Fig A: spacing.css (view results in spacing.html)
Adding Indents
Page 265, Fig A: text-indent.css (view results in text-indent.html)
Setting White Space Properties
Page 266-267, Figs A and B: whitespace.css and whitespace.html
Aligning Text
Page 268, Fig A: aligning-text.css (view results in aligning-text.html)
Changing the Text Case
Page 270, Fig A: text-case.css (view results in text-case.html)
Using Small Caps
Page 271, Fig A: small-caps.css (view results in small-caps.html)
Decorating Text
Page 272, Fig A: text-decoration.css (view results in text-decoration.html)

Chapter 11 Layout with Styles

Note: The vast majority of this chapter entails evolving a single page layout. As such, the CSS file progresses throughout the chapter, building upon the styles added in the previous pages.

If you want to bypass the steps, there are four versions of the finished page. All four CSS files with filenames begininning with "base" are the same except where explained below. The HTML and CSS files contain comments that elaborate on particular aspects of the code, too:

The finished page as shown in the steps throughout chapter
(mentioned on page 275):
base.css and finished-page.html
The finished page, but with a fixed width instead of a flexible width
(mentioned on page 275):
base-fixed-width.css and finished-page-fixed-width.html
The finished page, but with selectors that reference ARIA landmark roles instead of ids where appropriate (mentioned on page 285):
base-selectors-with-landmark-roles.css and
finished-page-selectors-with-landmark-roles.html
The finished page, but with IE-specific styles loaded via conditional comments instead of being in the base style sheet
(mentioned on page 277):
base-no-ie-specific.css, ie6.css, ie7.css, and
finished-page-conditional-stylesheets.html

Structuring Your Pages
Pages 280-281, Fig A: no-styles.html
(the same as finished-page.html, but without any CSS applied except browser defaults)
Styling HTML5 Elements in Older Browsers
Page 286-287: html5-elements-styling.css (step 1) and html5-elements-styling.html (step 2)
Resetting or Normalizing Default Styles
Page 290, Fig A: reset.html and reset.css

Page 291, Fig B: normalize.html and normalize.css

Page 291, Fig C: reset-and-text-formatting.html and reset-and-text-formatting.css
(this is the starting point for the rest of the chapter)
Changing the Background
Page 294, Fig A: background-image.css (view results in background-image.html)

Page 296, Fig D: background-shorthand.css (view results in background-shorthand.html)
Setting the Height or Width for an Element
Page 298, Fig A: width-height.css (view results in width-height.html)

Page 299, Fig C: max-width.css (view results in max-width.html)
Setting the Margins around an Element
Page 302, Fig A: margins.css (view results in margins.html)

Page 303, Fig C: margins-more.css (view results in margins-more.html)
Adding Padding around an Element
Page 304, Fig A: padding.css (view results in padding.html)

Page 304, Fig C: padding-c.css (view results in padding-c.html)

Page 305, Fig E: padding-e.css (view results in padding-e.html)
Making Elements Float
Page 306, Fig A: floats-imgs.css (view results in floats-imgs.html)

Page 306, Fig C: floats-imgs-no-wrapping.css (view results in floats-imgs-no-wrapping.html)

Page 307, Fig E: floats-main-div.css (view results in floats-main-div.html)
Controlling Where Elements Float
Page 308, Fig A: floats-clear.css (view results in floats-clear.html)

Page 308, Fig C: floats-add-to-masthead.css (view results in floats-add-to-masthead.html)

Page 309, Fig E: floats-clearfix.css (view results in floats-clearfix.html)
Setting the Border
Page 311, Fig A: setting-borders.css (view results in setting-borders.html)

Page 312, Fig D: border-styles.html (the CSS is embedded in the HTML)
Offsetting Elements in the Natural Flow
Page 314, Fig A: position-relative.css (view results in position-relative.html)
Positioning Elements Absolutely
Page 316, Fig B: position-absolute.css (view results in position-absolute.html)

Page 316, Fig D: position-absolute-relative.css (view results in position-absolute-relative.html)

Page 317, Fig F: nav-margin.css (view results in nav-margin.html)
Positioning Elements in 3D
Page 318-319, Figs A and B: z-index.html (the CSS is embedded in the HTML)
Determining How to Treat Overflow
Page 320, Fig B: overflow-hidden.css (view results in overflow-hidden.html)

Page 321, Fig D: overflow-auto.css (view results in overflow-auto.html)
Aligning Elements Vertically
Page 322, Fig B: vertical-align.css (view results in vertical-align.html)
Changing the Cursor
Page 323, Fig B: change-cursor.css (view results in change-cursor.html)
Displaying and Hiding Elements
Page 324, Fig A: display-img-default.html (default img display with no CSS applied)

Page 324, Fig C: display-block.html (the CSS is embedded in the HTML)

Page 325, Fig E: display-none.html (the CSS is embedded in the HTML)

Chapter 12 Style Sheets for Mobile to Desktop

Understanding and Implementing Media Queries
Page 333, Fig A: link-element-media-query.html (it also uses base.css and styles-480.css)
Please note that this version of base.css is different than the one that follows in the other examples.

Page 334, Figs B and C: basic-media-query.css and basic-media-query.html

Page 336, Fig G: link-element-media-query-more-examples.html

Page 337, Fig H: media-queries-in-stylesheet-more-examples.css

Extra for maximum-scale discussions on page 338-339, tip and sidebar: basic-media-query-max-scale.html

Page 339, Figs I and J in sidebar: 320x480-no-viewport-meta.html and
320x480-with-viewport-meta-width-and-initial-scale.html (view on a phone to notice the difference)
Building a Page that Adapts with Media Queries
Page 340, Fig A: global-base-styles-only.css (view results in base-styles-only.html)

The finished page as shown in the steps throughout chapter:

Page 342-245, Figs C-J: finished-page.html and global.css

The finished page, but with selectors that reference ARIA landmark roles instead of ids where appropriate. (RECOMMENDED approach if IE6 is not a concern):

Extra: finished-page-selectors-with-landmark-roles.html and global-selectors-with-landmark-roles.css

Chapter 13 Working with Web Fonts

Note: The filenames in the samples below do not always correlate to the filenames mentioned in the chapter. For instance, both stylesheet.css and demo2.html evolve during the chapter, so I had to create multiple versions of them to provide you the files in their various stages.

Downloading Your First Web Font
Pages 358-359, Figs A-C: demo.html and stylesheet.css (from Font Squirrel ZIP)
Working with @font-face
Page 360, Fig A: stylesheet.css (same as the previous stylesheet.css)

Page 361, Fig B: demo.html (same as the previous demo.html)

Page 362-364, Steps 2-6: stylesheet-multiple-webfonts.css (steps 2-4) and demo2.html (steps 5-6)
Styling Web Fonts and Managing File Size
Page 366-367, Steps 1-2: demo2-fake-italic-bold.html (it also uses stylesheet-multiple-webfonts.css)

Page 367-369, Steps 3-5: demo2-italic-bold.html (it also uses stylesheet-multiple-webfonts-italic-bold.css)

Chapter 14 Enhancements with CSS3

Rounding the Corners of Elements
Page 378-379, Figs A and C: rounded-corners.html and rounded-corners.css

Page 381, Fig E: rounded-corners-more-examples.css (view results in rounded-corners-more-examples.html)
Adding Drop Shadows to Text
Page 382-383, Figs A and C: text-shadow.html and text-shadow.css
Adding Drop Shadows to Other Elements
Page 384-385, Figs A and C: box-shadow.html and box-shadow.css
Applying Multiple Backgrounds
Page 388-389, Figs A and C: multiple-backgrounds.html and multiple-backgrounds.css
Using Gradient Backgrounds
Page 390-392, Figs A and C-G: gradients.html and gradients.css
Setting the Opacity of Elements
Page 394, Figs A and B: opacity-default.html (it also uses opacity-default.css)

Page 394, Figs A and C: opacity.html and opacity.css

Page 395, Fig E: opacity-ie-filter.css (view results in opacity-ie-filter.html)
Extra: Combining the Chapter's Effects
Extra: putting-it-all-together.html and putting-it-all-together.css

Chapter 15 Lists

Creating Ordered and Unordered Lists
Page 398, Fig A: ordered-list.html

Page 399, Fig C: unordered-list.html
Choosing Your Markers
Page 401, Figs A and B: choosing-your-markers.html (the CSS is embedded in the HTML)
Choosing Where to Start List Numbering
Page 403, Fig A: choosing-where-to-start-numbering.html
Using Custom Markers
Page 404, Figs A and B: using-custom-markers.html and using-custom-markers.css
Controlling Where Markers Hang
Page 406, Fig B: controlling-where-markers-hang.html (the CSS is embedded in the HTML)
Setting All List-Style Properties at Once
Page 407, Fig A: setting-all-list-style-properties.html (the CSS is embedded in the HTML)
Styling Nested Lists
Page 408, Figs A and B: nested-lists.html and nested-lists.css

Page 410-411, Fig D and sidebar: dropdown-nav.html and dropdown-nav.css
Creating Description Lists
Page 412, Figs A and B: description-list.html (the CSS is embedded in the HTML)

Page 413, Figs D and E: description-list-multiple-dts.html (the CSS is embedded in the HTML)

Page 414-415, Figs G and H: description-list-nested.html and description-list-nested.css

Chapter 16 Forms

Creating Forms
Page 419, Fig A: form.html (This is the main form discussed throughout the chapter.)

Page 420, Fig B: form.css
Processing Forms
Page 421-422, Fig A: showform.txt
(NOTE: The code in the book contains an error in the part that displays the Email checkbox values. The code is correct in the version here.)
(NOTE: You will need to change the name of this file to showform.php in order for it to work on your server. You will also need to have PHP installed, which is very common for web hosting services.)
Sending Form Data via Email
Page 424, Fig A: emailform.txt (view the form at form-email.html)
(NOTE: You will need to change the name of emailform.txt to emailform.php in order for it to work on your server. You will also need to have PHP installed, which is very common for web hosting services.)

Chapter 17 Video, Audio, and Other Multimedia

Reminder: Include the HTML5 shiv in the head of your HTML if you'd like Internet Explorer 6, 7, and 8 to recognize HTML5 elements and render the CSS you apply to them. (It *won't* make the video or audio element work in these older browsers, though.) See "About the HTML5 Shiv" in Chapter 11 (p.287) for details, or see http://code.google.com/p/html5shiv/.

Note: Some browsers may not play your media files unless they are served as the proper MIME type. Essentially, this means that when the server sends the page to the browser, it identifies the media file as, say, a WebM file (MIME type video/webm) or an MP4 file (MIME type video/mp4). If you're site is running on the Apache web server, you can configure the MIME types in what is known as the .htaccess file. It's a text file you typically upload to the root directory of your site, alongside your Home page. Here are the media-related MIME types to add to your .htaccess file:


   AddType video/ogg .ogm
   AddType video/ogg .ogv
   AddType audio/ogg .ogg
   AddType video/mp4 .mp4
   AddType video/webm .webm
   AddType text/plain .srt

Ask your web hosting company or search online for more information about .htaccess files.

Adding a Single Video to Your Web Page
Page 453, Fig A: webm-video.html
Adding Controls and Autoplay to Your Video
Page 455, Fig A: webm-video-with-controls.html

Page 456, Fig G: webm-video-with-controls-autoplay.html
Looping a Video and Specifying a Poster Image
Page 457, Fig A: webm-video-with-autoplay-loop.html

Extra: mp4-video-with-autoplay-loop.html

Page 457, Fig B: webm-video-with-poster-image.html
Preventing a Video from Preloading
Page 458, Fig A: webm-video-with-preload-none.html
Using Video with Multiple Sources
Page 459, Fig A: video-with-sources-and-msg-fallback.html
Adding Video with Hyperlink Fallbacks
Page 461, Fig A: video-with-sources-and-link-fallback.html
Adding Video with Flash Fallbacks
Page 463, Fig A: video-with-sources-and-flash-fallback.html

Page 464, Fig B: video-with-sources-and-flash-link-fallback.html
(Note: There is an error in the book. The code in Fig B is supposed to be in Fig C on page 465, and the screenshot in Fig C is supposed to be in Fig B.)
Adding a Single Audio File to Your Web Page
Page 469, Fig A: ogg-audio.html
Adding a Single Audio File with Controls to Your Web Page
Page 470, Fig A: ogg-audio-with-controls.html
Adding Controls and Autoplay to Audio in a Loop
Page 472, Fig A: ogg-audio-with-autoplay-controls.html

Page 472, Fig C: ogg-audio-with-loop-controls.html
Preloading an Audio File
Page 473, Fig A: ogg-audio-with-preload-metadata.html

Page 473, Fig B: ogg-audio-with-preload-auto.html
Providing Multiple Audio Sources
Page 474, Fig A: audio-with-sources.html
Adding Audio with Hyperlink Fallbacks
Page 475, Fig A: audio-with-sources-and-link-fallback.html
Adding Audio with Flash Fallbacks
Page 476, Fig A: audio-with-sources-and-flash-fallback.html
Adding Audio with Flash and a Hyperlink Fallback
Page 478, Fig A: audio-with-sources-and-flash-link-fallback.html
Embedding Flash Animation
Page 482, Fig A: embed-flash-animation.html

Chapter 18 Tables

Structuring Tables
Page 490, Fig A: table.html

Page 491, Fig C: table-evolved.html

Page 492-493, Fig D and E: table.css and table-evolved-and-styled.html
(the same as table-evolved.html except it loads the style sheet)
Spanning Columns and Rows
Page 494, Fig A: table-with-colspan-rowspan.html and table-with-colspan-rowspan.css (Extra)

Chapter 19 Working with Scripts

Note: You won't gain much from viewing these pages in a browser; their value is in the HTML code and comments. In particular, I've included comments in load-before-body-end-tag.html and load-before-body-end-tag-subfolder.html about why the code in the latter is preferred from the standpoint of organizing your JavaScript files.

Loading an External Script
Page 499, Fig A: load-before-body-end-tag.html

Extra: load-before-body-end-tag-subfolder.html (preferred; it loads the JS from a sub-folder)

Page 499, Fig B: load-in-head.html
Adding an Embedded Script
Page 502, Fig A: embedded-before-body-end-tag.html

Page 502, Fig B: embedded-in-head.html

Chapter 20 Testing & Debugging Web Pages

Checking the Easy Stuff: HTML
Page 511, Fig H: start-tag-error.html
Validating Your Code
HTML5 Validator

W3C HTML Validator (including HTML5)

W3C CSS Validator

Page 514-515, Fig A and C: mary-anna-error.html

Extra: mary-anna-fixed.html
Testing Your Page
Page 516, Fig B: testing-your-page-error.html

Extra: testing-your-page-fixed.html and styles.css (results shown on page 517, Fig C)