HTML and CSS Basics

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are important for structuring and styling content on the web. Pressbooks uses these technologies behind the scenes to create your textbook. Understanding the basics of HTML and CSS will help you to make minor adjustments to your book that may not be possible with other available options and prepare you for more advanced customizations covered later in this guide. Don’t worry — this section is designed for beginners, and we’ll keep things simple and practical.

HTML and CSS changes that you apply are difficult to debug and reverse when compared to the options that Pressbooks already provides. Try to look for the feature in the Visual Editor in Chapters/Parts or in the Theme Options section before trying to implement any HTML or CSS.

What is HTML?

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:

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

Key Elements to Know

1. Headings: Structure your text into hierarchical levels (e.g., <h1>, <h2>).
2. Paragraphs: Use <p> for blocks of text.
3. Lists: Organize items using ordered (<ol>) or unordered (<ul>) lists.
4. Links: Create hyperlinks with the <a> tag (e.g., <a href="https://example.com">Visit Example</a>).
5. Images: Add visuals with the <img> tag (e.g., <img src="image.jpg" alt="Description">).

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.

What is CSS?

CSS is the language used to style HTML content. It defines how elements look—their colors, 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:

h1 {
    color: 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.

Key Concepts

1. Selectors: Target specific elements (e.g., h1, p, .class, #id).
2. Properties and Values: Define the styles (e.g., color: red;, margin: 10px;).
3. Classes and IDs: Use .class and #id to apply styles to specific elements.

Common CSS Properties

• Text: color, font-size, font-family
• Spacing: margin, padding, line-height
• Borders: border, border-radius
• Layout: display, flex, grid

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:

h1 {
   font-size: 30px;
}

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

HTML structures the content, while CSS styles it. Together, they control how your textbook looks and feels. The next section will guide you on how CSS rules can be added in your textbook and it will also provide some helpful tips in your journey with CSS.

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.