LESSON 3.11

Module 3 Template: Putting It All Together (Optional)

Pulling together the Module 3 template changes

Link a stylesheet, add a Google Font, and center the header, nav, main, and footer sections of your template.

Optional Lesson. This lesson walks through the template changes for Module 3. If you are taking CSCI1450 or BUS1880, these steps are part of your lab grade. If you are a self-directed learner, follow along to build a solid reusable template for your own projects. This lesson picks up on the template work in Lessons 2.1, 2.2, 2.6, 2.7, and 2.8. You can also find all the template instructions in the blog post.

By the end of Module 3 your website template should have a stylesheet attached, a Google Font loaded, and the major sections centered on the page. This lesson walks through each of those steps.

Step 1: Add style.css to Your Template Folder

If you have not already done this in Lesson 3.04, do it now.

  1. Open your text editor and create a new file.
  2. Use File → Save As to save it as style.css inside your template folder.
  3. Open your template/index.html file and add this line inside the <head>:
<link rel="stylesheet" href="style.css">

Step 2: Add a Google Font

If you have not already added a Google Font in Lesson 3.07, do it now. Choose an easy-to-read font like Roboto, Open Sans, Montserrat, or Lora.

  1. Go to fonts.google.com and select a font.
  2. Click Get Font, then Get Embed Code, and copy the @import line.
  3. Paste the @import at the very top of your style.css file.
  4. Add the font to the body selector:
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

body {
   font-family: "Montserrat", sans-serif;
}

Use your own font name. The example above uses Montserrat.

Step 3: Center the Header

Add this to your stylesheet to center the content inside the header:

header {
   text-align: center;
}

Step 4: Center the Navigation

nav {
   text-align: center;
}

Step 5: Style the Main Section

On most websites the header, nav, and footer span the full width of the page, but the main content area has a maximum width to keep lines of text from getting too long to read comfortably.

main {
   max-width: 1000px;
   margin: 20px auto;
   padding: 10px;
}

margin: 20px auto is shorthand for: 20px on the top and bottom, and auto on the left and right, which centers the element horizontally.

Step 6: Center the Footer

footer {
   text-align: center;
}

Check Your Work

Open index.html in Chrome. Your page should have your Google Font applied throughout, the header and nav text centered, the main content centered with a max-width, and the footer text centered. Your template is now a solid starting point for every project going forward.

Note: We will keep adding to this template throughout the course. If you skipped any steps, go back and complete them now. Some CSS in later modules depends on the semantic elements and stylesheet being in place.

❓ Frequently Asked Questions

Do I have to complete this lesson if I am learning on my own?

This lesson is marked optional for self-directed learners. The steps are useful for building a solid reusable template, but you can skip it and come back later if you prefer to keep moving through the lessons.

What if I already did some of these steps in an earlier lesson?

Just skip those steps. Each step says which earlier lesson it builds on, so if you attached your stylesheet in Lesson 3.04 or added a Google Font in Lesson 3.07, you are already ahead and can move on to the next step.

Why do I need to center the page content in CSS?

Full-width text is hard to read on large screens. Centering your content in a wrapper with a max-width keeps line lengths comfortable and gives your site a clean, professional look from the very beginning.

★ Key Takeaways

This lesson pulled together the template work from Module 3 into one place. You linked a stylesheet, added a Google Font, and centered the header, nav, main, and footer sections. These are the building blocks you will use on every project going forward.

Back to CSS Fundamentals

← Back to CSS Fundamentals Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.

Tools of the Trade

HTML/CSS Lessons