HTML and CSS Basics v2

After exploring the six themes and related preset options, you may want to understand how the markup language and style sheets function together. Pressbooks uses these technologies behind the scenes to create your textbook. Understanding the basics of HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) will help you to understand the basic web design of the parameters used on the web, including Pressbooks.

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:

<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://example.com">Visit Example</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:

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.

CSS Key Concepts

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

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

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-radiusLayout: 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:

h1 {
   font-size: 30px;
}

Note: These two 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.

What is next

If the adjustments you desire are unavailable in the options that Pressbooks already provides, get familiar with the basics and note any essential and nice-to-have structural and stylistic features for your project. Experimentation with HTML and CSS without a plan or prior Web design experience can make your code difficult to debug or reverse. The next section will explain how CSS rules can be added to your textbook and provide some helpful tips.

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.