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

Boilerplating

Step one: Put the document into plain-vanilla HTML. Using the least amount of effort possible, we need to get things web-ready. Let's start with a boilerplate.

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

Boilerplate is another term for a template or framework. HTML and CSS benefit greatly from boilerplate documents because they need so much careful handling to make them work consistently. I've made a boilerplate for us. Here's what it does:

It's a great starting point. Now let's put the document into the boilerplate and assign some selectors.

See the Pen ADL Plain Vanilla by Garrison LeMasters (@Garrison) on CodePen.

Here is a link to the file which will be opened by your browser as a real-life HTML document.