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

Updated 15,16 Nov

Take a look at the CSS Grid tutorial

See the first example of a magazine layout,
and look at the live version on codepen.io.


Updated 7 Nov

Get the HTML file and the CSS, too.


Updated 5 November

     Review a page that shows an approach to styling the "Time Interview" document by using divs and classes.

     Get the code for the styled page (above).

     Get the original interview in order to add your own styles.

Updated 2 November

     Review a tutorial on the use of classes in webdesign.

     More information about HTML div tags as a way to organize content.


29 October

        Assignment for 29 October available here.

After restyling with Google Fonts and adjusting a few properties: Recommendations for Government | See raw .HTML | .CSS

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.