HTML & CSS Refresher

This chapter assumes basic familiarity with HTML and CSS. Here is a quick refresher of the concepts you will need for DOM manipulation.

HTML Basics

HTML uses tags to structure content. Tags usually come in pairs:

<p>This is a paragraph.</p>
<h1>This is a heading</h1>
<button>Click me</button>

A minimal HTML page looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>Welcome to my page.</p>
  </body>
</html>

The <head> contains metadata (title, links to stylesheets). The <body> contains the visible content.

Attributes, IDs, and Classes

Tags can have attributes that provide additional information:

<img src="photo.jpg" alt="A photo">
<a href="https://example.com">Click here</a>
<input type="text" placeholder="Enter name">

Two attributes are especially important for selecting elements with JavaScript:

  • id - uniquely identifies a single element
  • class - labels one or more elements (can be shared)
<div id="header">This is the only header</div>

<button class="btn">Save</button>
<button class="btn">Cancel</button>
<button class="btn primary">Submit</button>

CSS Selectors

CSS styles elements using selectors. JavaScript’s querySelector uses the same selector syntax:

/* Select by tag name */
p { color: blue; }

/* Select by class (prefix with .) */
.btn { background: gray; }

/* Select by ID (prefix with #) */
#header { font-size: 24px; }

/* Select by attribute */
input[type="text"] { border: 1px solid black; }

You can combine selectors:

/* All paragraphs inside an element with class "card" */
.card p { margin: 10px; }

/* Element with both classes "btn" and "primary" */
.btn.primary { background: blue; }

Applying CSS

You can apply CSS in three ways:

  1. External file (preferred): <link rel="stylesheet" href="styles.css">
  2. Internal: <style> tag in the <head>
  3. Inline: style attribute on an element: <p style="color: red;">

Further Reading

For more depth, see MDN’s HTML basics and CSS first steps.