HTML & CSS Basics

Pressbooks uses HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) behind the scenes to create your textbook. Understanding how markup language and style sheets function together will help you grasp foundational web design parameters and accessibility principles. The following basics may be of interest to those working with preset themes, but they are essential for anyone attempting to customize their book.

HTML (HyperText Markup Language)

HTML is the language used to structure content on the web. It consists of elements (or “tags”) that define different parts of your content, such as headings, paragraphs, lists, and links. For example:

  HTML:

  <h1> This is a Heading </h1>
  <p> This is a paragraph of text. </p>
  
  <ul>
        <li> First item </li>
        <li> Second item </li>
  </ul>

HTML Key Elements to Know

Headings: Structure your text into hierarchical levels (e.g. <h1>, <h2>).

Paragraphs: Use <p> for blocks of text.

Lists: Organize items using ordered <ol> or unordered <ul> lists.

Links: Create hyperlinks with the <a> tag (e.g. <a href=”https://link.com”> Link </a>).

Images: Add visuals with the <img> tag (e.g. <img src=”image.jpg” alt=”Description”>).

HTML Exercise

Try to understand the HTML content of your section on Pressbooks by clicking on the Text (HTML) tab in the Edit Part/Chapter page. Take great caution when trying to change any of the HTML tags.

CSS (Cascading Style Sheets)

CSS is the language used to style HTML content. It defines how elements look—their colours, fonts, sizes, and layout. In Pressbooks, CSS customizations let you modify the visual appearance of your book.

How CSS Works

CSS uses “selectors” to target HTML elements and apply “rules” that style them. For example:

  CSS:

  h1 {
        colour: blue;
        font-size: 24px;
  }

  p {
        line-height: 1.5;
  } 

This code styles all <h1> elements to be blue and have a font size of 24 pixels. It also increases the line spacing for <p> elements.

CSS Key Concepts

Selectors: Target specific elements (e.g., h1, p, .class, #id).

Properties and Values: Define the styles (e.g., colour: red;, margin: 10px;).

Classes and IDs: Use .class and #id to apply styles to specific elements.

Common CSS Properties

Text: colour, font-size, font-family

Spacing: margin, padding, line-height

Borders: border, border-radius

Layout: display, flex, grid

CSS Exercise

Navigate to Appearance > Custom Styles in your Pressbooks dashboard. Try adding a simple CSS rule in the “Your Styles” section, such as changing the font size of headings:

  CSS:

  h1 {
        font-size: 30px;
  }

Note: These two lines of code will change the font size of all h1 elements in your textbook. Explore <div> and .class if you want to learn how to apply these changes to selected parts.