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.