Overview
Design Choices
Boilerplating
Ready-to-Style
Simple Styling
CSS Exercises

Overview

Let's take some time to review how HTML and CSS work with a few examples.

Important: About these examples: All of the code in these examples is hosted on my account on codepen.io. I have tried to make it easy to examine the three different views that matter to us: The HTML file, the CSS file, and the browser output. Additionally, I have made it so that you can edit the code in all of the examples I provide. If you want to understand how things work, you are going to have to experiment with the code. Repeatedly. You will never understand how code works by reading about it.

Additional note: codepen.io is great, but it isn't perfect. I'll start out by putting almost all of both a real HTML file and a real CSS file in each example, but codepen works best when we just work with simplified excerpts of our HTML page. I'll let you know when I start doing that.

A note about this tutorial. I'm going to approach the problem of understanding HTML and CSS from a different angle: Instead of saying "Here's the code whereby you style a webpage," I'm going to try this: "Here's some meaningful content and here are our design goals. How can we make our content look better? What do we need to know?

Our Text

For this review of the basics of HTML and CSS, we're going to make use of a recent publication of the Anti-Defamation League's Center for Technology and Society. The document, "Free to Play," represents recent research into the frequency and nature of hate speech in online multiplayer games. The text we'll use here is a single page entitled "Recommendations for Government." I'll include parts of it in the codepen examples throughout, but if you want to download the raw text to work on, you can open it from here.

We have the text: Now we need to know what we're supposed to do with it.