It's time to see some CSS code in action. Codepen is a great tool to easily test HTML and CSS code that you'll see in practice here.
You will be able to:
- Use Codepen to preview and modify HTML and CSS files
- Comment and uncomment CSS and HTML
This Pen (saved Codepen document) contains an HTML document with the following structure:
- A
<body>element (root of the html content. In Codepen you 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 unordered lists<li>tags to wrap each list item
The Pen also includes commented-out CSS Code to:
- Set the background of the
<body>element (whole document) to#00b3e6(light blue) - Sets the
<article>element width to700px - Centers the
<article>element - Sets the font family of the
<article>element toHelvetica Neue. Alternative fonts are provided in the eventHelvetica Neueis not available on your computer - Set the background of the
<article>element towhite - Add 30px of white space to the perimeter of the
<article> - Set the
font-sizeto22pxfor the element withidmain-header - Set the
font-styletoitalicfor elements containing the classperspective-questions
Open the Pen in a separate browser 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.
Awesome! In this code along you got to preview and practice a standard web development environment and modify CSS code! Specifically, you used Codepen to modify HTML and CSS files. You also learned how commenting/uncommenting works in CSS and HTML!