introduction-to-css-code-along

Introduction

It's time to see some CSS code in action. Codepenarrow-up-right 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 Penarrow-up-right (saved Codepenarrow-up-right document) contains an HTML document with the following structure:

Code Example CSS Structure

The Penarrow-up-right also includes commented out CSS Code to (/* this is a CSS comment */):

Code Along Instructions

Open the Penarrow-up-right in a separate browswer tab to follow the code along instructions.

Pen Screenshot

arrow-up-right

Unstyled HTML Document Screenshot

arrow-up-right

Styled HTML Document Screenshot

arrow-up-right

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

arrow-up-right

Last updated