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.
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
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) - Set the
<article>
element width to700px
- Center the
<article>
element - Set the font family of the
<article>
element toHelvetica Neue
. Alternative fonts are provided in the eventHelvetica Neue
is not available on your computer - Set the background of the
<article>
element towhite
- Add 30px of white space to perimeter of the
<article>
- Set the
font-size
to22px
for the element withid
main-header
- Set the
font-style
toitalic
for elements containing the classperspective-questions
Open the Pen in a separate browswer tab to follow the code along instructions.
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.