Using CSS:
A Step-by-Step Tutorial

On the previous page you got a taste of layouts with the “Shoping Site” product page. Here, we’ll explore how we could build a blog page in under 3 hours, all with the power of CSS.

If you’re still a little uncertain how all this code comes together, please complete this tutorial using the files found in the “follow-along” folder:

1. View the completed site in a new tab.
2. Download the example files, which includes 2 folders:
   • “completed” contains the full site
   • “follow-along” contains the templates and materials for this guide

This guide is broken up into 10 areas, so you can just view what you need help on:

1. Project Overview (files, linking, stucture)
2. Calling Fonts (downloaded and through Google API)
3. General Styling (backgrounds, creating selectors)
4. Main Layout Areas (the basic pieces)
5. Site Heading and Slogan (display, alignment)
6. Interactive Site Logo (hovers, placement, position)
7. Large Content Areas (typographical styling, pseudo elements)
8. Small Content Areas (“pull quotes” or asides)
9. Buttons (pseudo classes)
10. Menus (navigation bars and dropdowns)

Step 1: Project Overview

Flies, linking, and site structure.

Step 2: Calling Fonts

Using fonts you’ve downloaded, and ones you’re importing from Google Fonts.

Step 3: General Styling

Applying fonts, creating selectors, and adding background images and colors.

Step 4: Main Layout Areas

Styling the basic pieces, and an intro to DIVs and classes.

NOTE: At 09:00, I gave you the wrong property. It should be max-value: 700px; not min-value: 700px;.

Step 5: Site Heading and Slogan

Creating a site information area at the top of your page, which displays the site’s title, slogan, and…

Step 6: Interactive Site Logo

…a site logo that changes on hover.

Step 7: Large Content Area(s)

First creating a big box for a large body of text, then adding typographical styling and pseudo elements to make it visually interesting.

NOTE: :first-letter is a pseudo-element, not a pseudo-class.

Step 8: Small Content Area(s)

Using divs and floats to “pull” quotes out from the main body.

Step 9: Button

Creating a linking button using pseudo classes.

Step 10: Menu

Creating a navigation bar to house links to your site pages and social media accounts, as well as adding a dropdown menu to organize content.

NOTE: At 27:00, I mispelled “width” which is why my .menu-item selections weren’t sizing or centering. The element should look like

#site-links .menu-item {
  width: 6em;
  padding: .5em 1em;
  display: inline-block;

{ TODO: }

1. Open the example in a separate tab to see it in full. Be sure to view the source code!
2. Try this tutorial out for yourself, and then try again without me. How’d it go?