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-css NextProcedural Ruby

Last updated 6 years ago

hashtagIntroduction

hashtagCode Example HTML Structure

hashtagCode Example CSS Structure

hashtagCode Along Instructions

hashtagPen Screenshot

hashtagUnstyled HTML Document Screenshot

hashtagStyled HTML Document Screenshot

hashtagCSS Declarations Uncommenting Steps