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

See the second part of this exercise.

HTML & CSS Exercises

On these pages, you'll find a series of example HTML pages that I have styled with basic CSS selectors. Typically, these focus on things like font, color, alignment, decoration, and so on. This page does not make use of advanced CSS techniques like flexbox or the CSS Grid.

Remember that CSS and HTML work hand-in-glove. It is seldom just a matter of changing a CSS sheet and expecting your HTML page to render properly. Often, you must bounce from HTML to CSS, tweaking each as you go.

Remember, too, that the best way to approach these examples is to make modest, incremental changes to one part of the code and then look to see how it affected the rendered display. Don't make too many changes at once, or you'll lose track of what worked and what didn't.

Example One

(Suggested experiments and changes to try are included below the codepen window.)

In the CSS attached to the "Minimal Design Standards" requirements webpage, from Miami University (2014), I start by setting everything to the Helvetica font-family ("everything" means "anything that can be styled," and is symbolized here by the asterisk ("*")). It sets a kind of baseline.

The h1 selector (h1 is the topmost header) gets a lot of attention: First, according to my specifications, the text inside the selector should be 25 pixels in size.

I've also:

A quick note: See how I have put quotes around the words Times New Roman in that last example? That's a context thing: Human beings see those words together and we know they need to be understood as a cluster. Computers see three unrelated words. So we have to use quotes around them, to keep CSS from having a meltdown.

See the Pen MiamiGuidelines_examples by Garrison LeMasters (@Garrison) on CodePen.

Suggested tasks: