HTML and CSS

Introduction

The next three lessons make JavaScript change real pages, so you need to be able to read what it will be changing. This lesson is a quick tour of the parts of HTML and CSS that a script relies on. If you want the full story, StepVioz has complete HTML and CSS courses. If you have already taken them, read this lesson as a reminder of how a script sees a page.

How it works

HTML: the structure. An HTML page is made of elements, written with tags. Most elements have an opening tag, content, and a closing tag with a slash. Some, like an image, have no content and no closing tag. Attributes inside the opening tag give extra details:

<a href="https://example.com" target="_blank">A link</a>
<img src="cat.png" alt="A sleeping cat">

Elements nest inside each other and form a tree. A full page has a head (the title, links to CSS files) and a body (what is shown). Common elements:

Choosing elements by meaning (a real button, headings in order, alt text) is called semantic HTML. It makes pages work with screen readers and search engines.

CSS: the look. A CSS rule is a selector and a block of declarations, property: value;. The selector picks elements: p (every p), .card (elements with class="card"), #main (the one with id="main"), nav a (links inside a nav). Learn these well, because document.querySelector accepts exactly the same selectors.

The box model and layout. Every element is a box: the content, then padding (space inside the border), the border, and margin (space outside it). display: flex on a container lines its children up in a row (or a column with flex-direction: column), and gap puts space between them:

Classes are a switch for scripts. A rule such as .hidden { display: none; } does nothing until an element has that class. A script then only has to add or remove the class, and all the details of the look stay in the stylesheet.

A program can also build HTML as text. The traced example below turns data into the HTML for a table, which is how many web pages are made:

// Build the HTML for a table from data.
const students = [
  { name: "Rahim", mark: 82 },
  { name: "Mitu", mark: 91 },
  { name: "Arif", mark: 67 },
];

let html = "<table>\n  <tr><th>Name</th><th>Mark</th></tr>\n";
for (const s of students) {
  const cls = s.mark >= 80 ? ' class="top"' : "";
  html += `  <tr${cls}><td>${s.name}</td><td>${s.mark}</td></tr>\n`;
}
html += "</table>";
console.log(html);

Syntax

<button id="save" class="primary">Save</button>

.primary { background: navy; color: white; }
.hidden  { display: none; }

Example

Edit the code below and press Run the page to see the result:

Line by line

1. The div with the class card groups everything in one box.
2. h1 is the main heading, and p carries the class role so that it can be styled alone.
3. The ul with two li items is a real list, and the a is a real link.
4. In the CSS, body sets the font and page colour.
5. .card limits the width, centres the box with automatic side margins, and adds padding and a shadow.
6. The last two rules style the heading and the role.

Expected result

A white, rounded card, centred on a grey-blue page, with a blue name, a grey line under it, a list of two skills and a link.

In the real world

Every interface you use is a tree of elements styled by CSS. Teams often agree on names for classes so that designers and developers can work on the same page. A script that relies on #save will break the moment someone renames that id, which is why many teams use dedicated names such as data-action="save".

Common mistakes

• Forgetting to close a tag, so the rest of the page nests inside it.
• Using a div with a click handler instead of a real button. Keyboards and screen readers cannot use it.
• A missing alt on images.
• Misspelling a class. .Card in CSS does not match class="card", because CSS names are case-sensitive.
• Forgetting the semicolon between CSS declarations, which breaks the next one.

Best practices

• Use elements for what they mean, and classes for how they look.
• Keep every id unique on the page.
• Let a script switch classes, and let CSS decide what those classes look like.

Summary

HTML is a tree of elements with attributes, and CSS selects those elements and styles them. Every element is a box. The same selectors are used in CSS and in JavaScript, which is why a class can act as a switch that a script turns on and off.

Mark lesson complete