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 that you'll see in practice here.
Objectives
You will be able to:
- Use Codepen to preview and modify HTML and CSS files
- Uncomment CSS code
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 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>
][h tags] 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 to700px
- Centers the [
<article>
] element - Sets 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
Code Along Instructions
Open the Pen in a separate broswer 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
Summary
Awesome! In this code along you got to preview and practice a standard web development environment and modify CSS code!