introduction-to-css-code-along
Last updated
Last updated
It's time to see some CSS code in action. is a great tool to easily test HTML and CSS code and it's what we will use for our example.
This (saved document) contains an HTML document with the following structure:
a element (root of the html content. In we will not see a body tag, it's implicitly present and wraps all the HTML content)
an tag to define our content as self-contained unit (e.g. blog post, newspaper article)
an tag to wrap the 's header text
tags to wrap the 's unstructured text
tags to represent un-ordered lists
tags to wrap each list item
The also includes commented out CSS Code to (/* this is a CSS comment */):
Set the background of the element (whole document) to #00b3e6 (light blue)
Sets the element width to 700px
Centers the element
Sets the font family of the element to Helvetica Neue. Alternative fonts are provided in the event Helvetica Neue is not available on your computer
Set the background of the element to white
Add 30px of white space to perimeter of the
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
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.
Open the in a separate browswer tab to follow the code along instructions.