HTML & CSS Basics

Basics of HTML and CSS in

Pressbooks

HTML structures web content, while CSS styles it. Together, they control how your textbook looks and feels.

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.


Additional Resources

  • HTML Tutorials by W3Schools
  • CSS Tutorials by W3Schools
  • HTML & CSS Basics for Digital Writers by Cate Deventer, Indiana University Pressbooks
  • There are many other resources available online for HTML and CSS, but most of them are focused on webpages. Please be sure to understand how these features would work in Pressbooks, as there are many subtle differences between using them in Pressbooks and webpages.
Considering modifying the default theme beyond the theme options provided as part of your Pressbooks project with Concordia University Library? If so, please include your intentions to customize the Cascading Style Sheets (CSS) in the project plan for your Open Textbook or Open Guidebook. We additionally recommend preparing a design plan [link].

License

Icon for the Creative Commons Attribution 4.0 International License

Guide to Pressbooks at Concordia University (DRAFT) Copyright © by Rachel Harris; Sana Ahmad; Rahil Kakkad; Zo Kopyna; Chhayhee Sok; Asifur Rahman; Lena Palacios; and Ariel Harlap is licensed under a Creative Commons Attribution 4.0 International License, except where otherwise noted.

Share This Book