HTML and CSS

Goals

What HTML Looks Like

Show me a simple HTML page about Sasquatch sightings with a heading, a paragraph, and a list.

Explain how multiple tags can be used together.

i
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Sasquatch Sightings</title>
  </head>
  <body>
    <h1>Sasquatch Sightings in British Columbia</h1>
    <p>
      This page records recent sightings of <em>Gigantopithecus canadensis</em>
      and <em>G. horribilus</em> in British Columbia.
      Data was collected by volunteers &amp; researchers in early 2024.
    </p>

    <h2 id="recent">Recent Sightings</h2>
    <ul>
      <li>2024-01-15: <em>G. canadensis</em> near Hope, BC. Weight &gt; 200 kg.</li>
      <li>2024-02-03: <em>G. horribilus</em> near Whistler. Female; weight &lt; 150 kg.</li>
      <li>2024-03-21: <em>G. canadensis</em> in Manning Park. Color: &quot;reddish-brown&quot;.</li>
    </ul>

    <h2 id="about">About This Project</h2>
    <p>
      The Sasquatch Observation Registry collects verified sightings
      from trained volunteers across British Columbia.
      Jump back to <a href="#recent">recent sightings</a>
      or visit <a href="https://example.com/sasquatch">the project website</a>.
    </p>

    <p>&copy; 2024 Sasquatch Research Institute</p>
  </body>
</html>

HTML and Markdown

Markdown is a shorthand notation meant to be readable as plain text and convertible to HTML. When you write **bold** in Markdown, a converter turns it into <strong>bold</strong> in HTML. HTML is what browsers actually understand; Markdown is a shortcut for humans writing documents. Most web applications, including this tutorial, generate HTML programmatically rather than writing it by hand, which is why understanding HTML matters even if you rarely type it yourself.

Page Structure

What does every valid HTML page need to have?

How do I add notes inside an HTML file that won't appear in the browser?

Common Tags

What are the most common HTML tags?

What tags do I use to add emphasis, links, and images?

Special Characters

If a less-than sign is special, how do I include one in HTML without the browser treating it as a tag?

What are the most common HTML entities I will actually need?

Attributes and Links

How do I link from one part of a page to another in HTML?

How do I embed an image in an HTML page?

File Paths vs. URLs

src="map.png" is a file path: the browser looks for map.png in the same directory as the HTML file. You can open the page by double-clicking the file and the image will appear. src="https://example.com/map.png" is a URL: the browser fetches the image from a remote server. This works in a browser tab, but it requires a network connection and the remote server to be available. The same distinction applies to href in <link> and <a> tags. For pages you are developing locally, file paths let you work without running a web server.

Tables

Rewrite the sightings list as a table with columns for date, species, location, and notes.

What does the HTML for a table with a header row and three data rows look like?

i
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Sasquatch Sightings</title>
  </head>
  <body>
    <h1>Sasquatch Sightings in British Columbia</h1>
    <p>
      This page records recent sightings of <em>Gigantopithecus canadensis</em>
      and <em>G. horribilus</em> in British Columbia.
      Data was collected by volunteers &amp; researchers in early 2024.
    </p>

    <h2 id="recent">Recent Sightings</h2>
    <table>
      <tr>
        <th>Date</th>
        <th>Species</th>
        <th>Location</th>
        <th>Notes</th>
      </tr>
      <tr>
        <td>2024-01-15</td>
        <td>G. canadensis</td>
        <td>Near Hope, BC</td>
        <td>Weight &gt; 200 kg; sex not recorded</td>
      </tr>
      <tr>
        <td>2024-02-03</td>
        <td>G. horribilus</td>
        <td>Whistler area</td>
        <td>Female; weight &lt; 150 kg</td>
      </tr>
      <tr>
        <td>2024-03-21</td>
        <td>G. canadensis</td>
        <td>Manning Park</td>
        <td>Male; color described as &quot;reddish-brown&quot;</td>
      </tr>
    </table>

    <h2 id="about">About This Project</h2>
    <p>
      The Sasquatch Observation Registry collects verified sightings
      from trained volunteers across British Columbia.
      Jump back to <a href="#recent">recent sightings</a>
      or visit <a href="https://example.com/sasquatch">the project website</a>.
    </p>

    <p>&copy; 2024 Sasquatch Research Institute</p>
  </body>
</html>

Styling with CSS

Add a stylesheet to the sightings page that sets the font and page width, and puts borders on the table.

selector {
    property-name: value;
    another-property: value;
}

Show me CSS rules that center a heading, set a page font, and add borders to table cells.

i
    <style>
      body {
        font-family: sans-serif;
        max-width: 40em;
        margin: 1em auto;
        padding: 0 1em;
      }

      h1 {
        text-align: center;
        color: #333333;
      }

      h2 {
        border-bottom: 1px solid #cccccc;
      }

      table {
        border-collapse: collapse;
        width: 100%;
      }

      th, td {
        border: 1px solid #cccccc;
        padding: 0.4em 0.8em;
        text-align: left;
      }

      th {
        background-color: #eeeeee;
      }

      .note {
        font-style: italic;
        color: #666666;
      }

      .copyright {
        text-align: center;
        font-size: 0.85em;
        color: #999999;
      }
    </style>

Inline Styles

HTML allows styling directly on any element with a style attribute: <p style="color: red;">Warning.</p>. This is called inline styling, and it does work, but it's a bad idea for the same reason copy-pasting is a bad idea. If you later decide to change that shade of red, you have to hunt down and update every individual element. A stylesheet keeps all the style decisions in one place so one change affects everything at once.

CSS Classes

How do I make some table cells look different from others using CSS?

How do I style one specific element differently from all others of the same type?

Check Understanding

See [mdn-html2024] for (much) more information.

What is wrong with <p>first <b>bold</p></b>?

The <b> and <p> elements overlap: <b> opens inside <p> but closes after </p>. HTML elements must be strictly nested, so the correct version is <p>first <b>bold</b></p>.

Why does <p>Price: 3 < 4 and 5 > 2</p> cause problems in a browser?

The browser interprets < as the start of a tag and > as the end of one, so it sees < 4 and 5 > as a broken tag rather than text. The correct version is <p>Price: 3 &lt; 4 and 5 &gt; 2</p>.

What is the difference between a class selector (.highlight) and an ID selector (#highlight)?

A class selector (.highlight) matches every element that has class="highlight", and any number of elements on the page can share the same class. An ID selector (#highlight) matches the one element with id="highlight", and each ID must appear at most once per page. Use classes for styling groups of elements; use IDs for linking to specific spots.

Why is an internal stylesheet better than inline styles for a page with many elements?

An internal stylesheet keeps all style decisions in one place. To change a color, you edit one rule in <style> rather than finding every element with style="...". An external stylesheet (a separate .css file included with <link>) is even better for sites with many pages, because one file can style all of them.

A page has <img src="photo.jpg"> and the image shows a broken icon in the browser. The file photo.jpg is in a folder called images that sits next to the HTML file. What is wrong and how do you fix it?

The src attribute points to photo.jpg in the same directory as the HTML file, but the image is actually in a subdirectory called images. The fix is <img src="images/photo.jpg" alt="...">.

A stylesheet has the rule p { color: navy; } and also .highlight { color: red; }. A paragraph written as <p class="highlight">Warning</p> appears in navy, not red. Why, and how do you fix it?

Both rules apply to this element, so CSS picks the more specific one. A class selector and a tag selector have the same specificity when written separately, so the rule that appears later in the stylesheet wins---and in this case p comes after .highlight. Move .highlight { color: red; } to appear after p { color: navy; }, or make it more specific by writing p.highlight { color: red; }.

Exercises

Add a Navigation Bar

Add an unordered list at the top of styled_page.html with links to the #recent and #about anchors already in the file. Add CSS rules to the internal stylesheet so the list items appear side by side rather than stacked.

Color-Code by Species

Edit styled_page.html to give each data row a CSS class that matches its species (canadensis or horribilus). Add rules to the stylesheet so rows for each species have a different background color.

Add a Second Page

Create a new file about.html in the htmlcss directory that describes the Sasquatch Observation Registry in a paragraph or two. Add a link from styled_page.html to about.html, and a link back from about.html to styled_page.html. Give about.html the same internal stylesheet as styled_page.html.

Fix the Broken Page

The file below has three HTML errors. Find and fix them without using an LLM.

<!DOCTYPE html>
<html>
  <head>
    <title>Errors</head>
  </title>
  <body>
    <h1>Sasquatch &amp Research</h2>
    <p>Sightings where weight > 100 kg are flagged.</p>
  </body>
</html>

Ordered List

Rewrite the unordered sightings list in basic_page.html as an ordered list. Then add a CSS rule to styled_page.html that removes the default left margin on the list.

Change the Color Scheme

Edit the stylesheet in styled_page.html to use a dark background (#222222) with light text (#eeeeee). Update the table header background and border colors so they still look reasonable against the dark background.

Add a Caption

HTML tables support an optional <caption> element placed immediately after the opening <table> tag. Add a caption to the table in styled_page.html and write a CSS rule to center it and make it italic.