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
- Comment and uncomment CSS and HTML
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>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
Code Example CSS Structure
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
Code Along Instructions
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.
Pen Screenshot
Unstyled HTML Document Screenshot
Styled HTML Document Screenshot
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! Specifically, you used Codepen to modify HTML and CSS files. You also learned how commenting/uncommenting works in CSS and HTML!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent