introduction-to-css-code-along

Introduction

It's time to see some CSS code in action. Codepen is a great tool to easily test HTML and CSS code and it's what we will use for our example.

Code Example HTML Structure

This Pen (saved Codepen document) contains an HTML document with the following structure:

  • a <body> element (root of the html content. In Codepen we will not see a body tag, it's implicitly present and wraps all the HTML content)

  • an <article> tag to define our content as self-contained unit (e.g. blog post, newspaper article)

  • an <h1> tag to wrap the <article>'s header text

  • <p> tags to wrap the <article>'s unstructured text

  • <ul> tags to represent un-ordered lists

  • <li> tags to wrap each list item

Code Example CSS Structure

The Pen also includes commented out CSS Code to (/* this is a CSS comment */):

  • Set the background of the <body> element (whole document) to #00b3e6 (light blue)

  • Sets the <article> element width to 700px

  • Centers the <article> element

  • Sets the font family of the <article> element to Helvetica Neue. Alternative fonts are provided in the event Helvetica Neue is not available on your computer

  • Set the background of the <article> element to white

  • Add 30px of white space to perimeter of the <article>

  • Set the font-size to 22px for the element with id main-header

  • Set the font-style to italic for elements containing the class perspective-questions

Code Along Instructions

Open the Pen in a separate browswer tab to follow the code along instructions.

Pen Screenshot

Unstyled HTML Document Screenshot

Styled HTML Document Screenshot

All the CSS code you need to successfully modify the page is already included but commented out. All you need to do is uncomment all the CSS declarations (property-name:value) one by one.

CSS Declarations Uncommenting Steps

PreviousIntroduction-to-cssNextProcedural Ruby

Last updated