📖 1.2.1. Introduction

Before we go any further, give yourself a pat on the back. You've already done a lot to prepare for building the entire website.

One really important step you took in the last lesson was to build a series of "containers" (aka divs) to hold different types of content. In this lesson, you'll see how those divs allow you to add content and style to sections without worrying about how each one affects the others.

The following image shows what you've built so far:

By building off of this design, you'll accomplish the following:

• Use relative paths to connect HTML and CSS documents.

• Use CSS selectors to apply styles to specific HTML elements.

• Build header and footer components for a webpage.

• Use HTML attributes to provide additional context to HTML elements.

1.2.3. Add Content to the Header

The following image shows the basic content that we'll add to the <header> element:

We'll begin by adding two things that most modern webpages have: branding and navigation.

These two important components are typically contained in the header and footer so that they appear on every page in a uniform way. Think about a website you're familiar with: does the top of the site look the same on every page you visit? You betcha! That's branding. And where do you look when you want to navigate to another page? Typically, you look for a menu on the top and/or bottom of the webpage. That's navigation.

Add Branding

Branding refers to the logo, colors, and general style (aka "brand") of a company or organization. Think about Target's red bullseye or Amazon's orange arrow; if you visit these websites, you'll always see their brand loud and clear at the top (and usually bottom) of the page.

We started to add branding content in Lesson 1 when we added <h1>RUN BUDDY</h1> to the <header>. This put the Run Buddy name at the top of every page. We'll style it later in this lesson.

Add Navigation

Okay, so branding content is taken care of, but what about navigation?

Open index.html in VS Code, and add <nav> and </nav> immediately below <h1> but above the closing </header> tag.

It should look something like the following HTML:

<header>

  <h1>RUN BUDDY</h1>

  <nav></nav>

</header>

The <nav> element is a semantic element introduced in HTML5. Semantic elements describe the information that's inside them, which aids both accessibility and SEO. What are accessibility and SEO, you ask? Read on:

• Accessibility is the practice of adding HTML elements in a way that allows assistive technology, such as screen readers, to explain the page's content in a meaningful way to those who have a disability such as vision or hearing loss.

• SEO, or search engine optimization, is the process of maximizing the number of visits a website receives and how frequently it shows up in search results.

DEEP DIVE

There are a number of tools for adding accessibility to webpages. The most prominent and easy to implement is HTML5's semantic elements. Before HTML5, the <div> element was used for all blocks of content on a webpage. This forced developers to work extra hard to identify content for screen readers. Now, semantic elements like <header>, <footer>, and <nav> work just like a <div> element, but they have meaningful names that tell the browser about the content inside them. For more information, refer to the MDN Web Docs on web accessibility

There are a number of ways to organize navigation. We'll use a popular method of creating a list of navigation links.

In the index.html file, type the following right after the opening <nav> you just created:

<!-- Unordered list element -->

<ul>

  <!-- List item element-->

  <li>

    <!-- Anchor element -->

    <a href="#what-we-do">What We Do</a>

  </li>

  <li>

    <a href="#what-you-do">What You Do</a>

  </li>

  <li>

    <a href="#your-trainers">Your Trainers</a>

  </li>

  <li>

    <a href="#reach-out">Reach Out</a>

  </li>

</ul>

Let's unpack what we just created, starting with describing what a list is.

Lists

In HTML, there are two types of lists: ordered and unordered.

• Ordered lists, denoted with the <ol> element, tell the browser to interpret any nested list item (denoted with the <li> element) in numeric order (1, 2, 3, etc.).

• Unordered lists (<ul>) allow for a more loosely formatted list by marking each nested list item with a symbol (such as a bullet point or square).

The following image shows examples of ordered and unordered lists:

The relationship between a <ul> or <ol> element to an <li> is a direct parent/child relationship, meaning that an <li> (or child) should be nested or contained within the parent element's opening and closing tags—in this case, the <ol> or <ul> elements.

Within reason, anything can be nested in an <li> element. In this case, we created a link in each list item using an anchor element (<a>). Anchor elements are used to create links that take us to other destinations when clicked. These destinations can be within the same page, on another page in the website, or on another website entirely.

CONNECT THE DOTS

The <a> element is a prime example of the "hypertext" in Hypertext Markup Language (HTML). Hypertext is defined as text that links to other text. Since this term was coined in the early 1960s, its definition has expanded to include other types of media as well (such as images and videos).

The following examples show the <a> element being used to create links:

<!-- When you click "Go to Google," it will take you to Google -->

<a href="https://google.com">Go to Google</a>

<!-- This will take us to our own site's privacy policy HTML page -->

<a href="./privacy-policy.html">View Our Privacy Policy</a>

<!-- This does nothing at all -->

<a>This does nothing</a>

Attributes

Did you notice that the first two examples have an href= inside their opening tags? This is an HTML attribute.

Attributes can be used to give an HTML element a unique identity, create relationships with other elements, and provide design changes using CSS. They give functionality, meaning, and context to HTML elements.

Attributes aren't necessary for every element, but some do require them. One of those is the <a> element. If we were to omit the href attribute in the preceding examples, the links wouldn't work.

Here are some popular attributes:

• The id attribute is a unique identifier for an HTML element. The value of this can only be used once per HTML document.

• The class attribute is another way of identifying an HTML element, but its value is expected to be more general and can be reused across multiple HTML elements on a page.

• The title attribute—not to be mistaken for the <title> element—holds a value that appears as a small pop-up (known as a tool-tip) when the cursor is pointed at an element for a period of time.

DEEP DIVE

For more information, refer to the MDN Web Docs on HTML attributes. Consider bookmarking the page for future reference.

The values associated with the href attributes in the navigation we just added give us the ability to jump to a certain spot on our current page. The syntax href="#what-we-do tells the browser that when that <a> element is clicked, go find another HTML element on the page with the id attribute of that same name: "what-we-do". Notice, when creating the link to the "what-we-do" section with the <a> element, we use a hashtag # with the href attribute. We haven't added that attribute yet, but we will soon.

Now that we know what <a> elements are and how they're used, let's implement a best practice and make the branding in the <header> of the page clickable to take the user back to the homepage. We can do this by wrapping the content between the <h1> tags with its own <a> with an href value of "/", as the following code shows:

<h1>

  <a href="/">RUN BUDDY</a>

</h1>

The value of the href used here—a forward slash ("/")—will always represent the path to the topmost directory of an application or project. In this case, when a user clicks the <a> element, they will be taken to the topmost directory. And because there is no file specified, the index.html file will be loaded.

REWIND

Think back to when you learned that if no specific file is being looked for, a computer will try to provide an "index" page. In web development, this is why the homepage has a filename of index.html.

If the code inside the <header> element now looks like the following, you're ready to move on and make the landing page look good:

<header>

  <h1>

    <a href="/">RUN BUDDY</a>

  </h1>

  <nav>

    <ul>

      <li>

        <a href="#what-we-do">What We Do</a>

      </li>

      <li>

        <a href="#what-you-do">What You Do</a>

      </li>

      <li>

        <a href="#your-trainers">Your Trainers</a>

      </li>

      <li>

        <a href="#reach-out">Reach Out</a>

      </li>

    </ul>

  </nav>

</header>

DEEP DIVE

To learn more about the HTML elements we just used, refer to the following MDN Web Doc articles:

• MDN Web Docs on the anchor element <a>

• MDN Web Docs on heading elements <h1>–<h6>

• MDN Web Docs on the navigation element <nav>

• MDN Web Docs on the unordered list element <ul>

• MDN Web Docs on the list item element <li>

Commit to Git and Push to GitHub

You just did a decent amount of work, so you should save it and push it up to GitHub for safekeeping. Using the commands you learned in the last lesson, go ahead and do this now.

Here's a refresher of the Git commands:

1. git add -A or git add .: Use this to tell Git to pick up (also known as "track") any new, edited, or removed files in your project.

2. git commit -m "<commit message>": Then tell Git what you added or changed (replace <commit message> with a short note about what changed).

HINT

These two commands tell Git locally what you're saving and why you're saving it. These two must be done first (in this order) before you can push the code up to GitHub.

3. git push origin main: Use this command to push all of the code and file edits from your recent commit to GitHub.

Now your code is saved locally on your computer and remotely on your GitHub profile. If you visit your GitHub Pages link at <username>.github.io/run-buddy (replace <username> with your GitHub username), you'll be able to see how the new HTML looks when viewed in a browser!

DEEP DIVE

We've seen the # syntax in action with href values, and you'll use it in many more places throughout your career as a programmer. This is known as an octothorpe.

For more information, refer to the Wikipedia page on the #

The HTML elements we've implemented so far do a great job at two things:

• Organizing content (such as the content between the <h1> tags in<h1>RUN BUDDY</h1>)

• Providing interactivity (for example, using the <a> element's href attribute to take the user somewhere else when they click the link)

But there is more we need to do: make the content and interactivity look good!

Looks Matter

One question that HTML used to answer was "How do I look?" Before CSS, HTML handled all of the design aspects of a website in addition to the content and structure. Developers had a very limited set of options—they could change the color of text, add a background color, give images height and width dimensions, but not a heck of a lot else.

Most advanced (for the time) designs were achieved by taking a mock-up of the design and slicing it into a bunch of small images, then laying them all into an HTML table element to build the image on the webpage. Think about how difficult it would be to create a complex design by chopping up an image and placing the pieces into Microsoft Excel cells. As you can imagine, this wasn't very much fun.

LEGACY LORE

Most older website designs have been removed from the internet, but we do know of one that remains: the self-described worst website ever. This website demonstrates why a general set of best practices was instituted for modern web designs.

As developers began to want more control over their page designs, they realized that HTML might not be capable of doing the job. Thus, a new language was created to take some of the burden off of HTML when it came to presentation and design, and that language is CSS.

1.2.5. Set Up the Style Sheet

Now that we know the route we're taking to add CSS to the webpage, let's do it!

Perform the following steps:

1. Using this newfound knowledge of command-line tools, create a folder called assets (Hint: Use mkdir to create a folder, then use ls to print the contents and see if it worked!).

2. Move into the newly created assets folder using cd and then create another folder inside assets called css.

3. Move into the newly created css folder and create a file called style.css. Don't worry about putting anything in it just yet.

Now that the file is created, we need to tell the HTML document to read any applicable styles that style.css might have for it. Let's do this now by placing <link rel="stylesheet" href="./assets/css/style.css" /> in between the <head> tags in the HTML document.

PAUSE

What do you think href="./assets/css/style.css" is telling the HTML document to do?

We're instructing the <link> tag to find the stylesheet called style.css in the assets/css subfolder and apply the CSS rules listed in that file.

We just used the HTML element link to tell the HTML document to go find a specific resource (file) and incorporate it into the document. It needs at least one attribute, href, which behaves similarly to how it works in <a> elements, but this one is serving a different purpose. This one is saying "find this file called style.css located in the css folder inside of the assets folder, read it, and incorporate any of its information into this HTML document."

This is the first real instance where we've provided a value to an href that points to another file in the directory. This is known as relative pathing, and it's a very important concept so make sure to read about it below.

The other attribute, rel, is providing information on the nature of the relationship of the linked document—the one specified with the href—to the HTML. In this case and most of the time, we'll use rel="stylesheet", but as time goes on there might be situations where that will change.

IMPORTANT

Throughout your career, there will be almost daily instances where you'll need to make one file look for and read another. We used this earlier with the link element's href value "./assets/css/style.css".

This was an example of relative pathing, which works well for us. The other option would be to put a fixed path (also known as an absolute path) from the host computer's directory structure, which would look something like this:

<link rel="stylesheet" href="/Users/<username>/Desktop/run-buddy/assets/css/style.css" />

See a potential problem here? This path is very specific to someone's personal computer—it even has a username in it. If we were to put this code into production or share it with a teammate, the project's code would then live on a different computer entirely. The path in the example most likely does not exist on that computer, meaning any reference to it would break and the page wouldn't load correctly.

The best solution for this is to use relative pathing. With relative pathing, when we push up the entire folder structure for the project all at once, the paths don't lose context as to where they are.

Let's test this and make sure it works by adding the following CSS code to style.css:

body {

  font-family: Helvetica, Arial, sans-serif;

  background-color: tomato;

}

If that turned the whole background of your page to red, then it works! Go ahead and remove the background-color style from the page as we won't need it anymore.

PAUSE

We'll get into explaining the preceding CSS syntax in a minute. Before we do, take a moment and think about what's happening here. In CSS, you'll often see the word body. Where have we seen "body" before?

We used the word "body" to create the HTML <body> element in Lesson 1. The <body> element contains all the content that a user sees on a webpage.

1.2.7. Add Detailed CSS Styles

Now that we've created our base <header> styles, let's adjust some of the elements that are nested inside of it.

Style the Header

Let's start with the header's <h1> and <a> elements. Add the following CSS to the style sheet:

header h1 {

  font-weight: bold;

  font-size: 36px;

  color: #fce138;

  margin: 0;

}

header a {

  color: #fce138;

}

Here, we're implementing a more specific selector pattern. The first one ensures that we are only applying styles that are specific to a particular <h1> element: the one that is contained inside a <header> element. This is a great method for keeping styles scoped to a particular section and context.

Let's examine the property declarations in the CSS that we just added:

• font-size: The size of the font in the element.

• font-weight: Sets the font to lighter, normal, or bold. There are other values associated with this property, but there's no need to dive into them now.

• color: Sets the text color for the element. Notice how it overrides the color we set for <body>; this is because it is applied directly to the element.

The CSS Cascade

The cascade in CSS can be tricky to understand at first; so before we jump back into the styling, let's learn a bit more about it by watching the following video:

📹 CSS CASCADE

In HTML, there will be many cases where the same elements are used for very different reasons in a document. This will typically mean that the CSS applied to them needs to be different as well. How CSS determines which styles are applied to which elements when there are multiple instances of them on a page can be described by using a word in its name: "cascading."

The cascade is a set of rules CSS follows when determining the order of importance when it comes to applying styles. Say, for instance, we want to make multiple <a> elements in the <header> yellow, but we want to make the <a> element in the <footer> blue. This can be achieved by being more specific in the selection of elements and saying "let's select all <a> that are in <header> and do this with them," meaning we will only focus on elements inside another element.

The cascade considers the following three factors:

1. Importance: When you add !important to the end of a property declaration, it will override any conflicting style declarations for that element. This isn't recommended because overriding the default "cascading" behavior of CSS will make your site harder to maintain.

2. Specificity: CSS weighs the importance of different types of selectors by how specific they are. If we were to apply a style by selecting h1, it will apply to all <h1> elements. But if we were to then apply a style by selecting header h1, it will ignore conflicting property declarations in the h1 definition and apply header h1 instead because it is a more specific selection.

3. Source Order: There's nothing to stop us from accidentally selecting and defining styles to the same element more than once, but CSS is read top-down. This means that if we select h1 and give it a color of red on line 1, then select it again and give it a color of blue on line 4, the <h1> element will be blue because that was defined later.

CSS styles are also applied through something known as inheritance, which means that if a style isn't explicitly defined for a child element, it will use the style being applied to the parent element.

DEEP DIVE

To learn more, refer to the MDN Web Docs on cascade and inheritance

View the CSS Styling in the Browser

Reload your page in the browser. The header should now look like the following image:

If your header doesn't look like this, go back and review the CSS and see where things went wrong. When it looks the way you want, continue with the lesson.

Style the Navigation Bar

Let's start moving that navigation bar over to the right. These next steps introduce more selectors. Keep in mind that this is just one of many ways to select and apply styles.

We'll explain these properties when we're all done, so don't worry if it's confusing at first. In between applying these styles, make sure to save and refresh the page in the browser to see the changes happening!

Here's a rundown of what we'll be doing:

1. Apply styles to every <a> element in the header.

2. Apply styles to the <nav> element.

3. Apply styles to the <nav> element's <li> elements.

4. Apply styles to the <a> elements inside of the <li> elements.

5. Marvel at the progress we've made!

Let's start with applying additional styles to every <a> element in the header. Update the header a rule to look like the following CSS:

header a {

  text-decoration: none;

  color: #fce138;

}

In the preceding code, we styled all of the <a> elements inside <header>, including those in <h1> and <nav>. We used a new property here as well, the text-decoration property. The text-decoration property applies underline, strikethrough, or overline styles to text. By default, the value is none, so we don't usually have to explicitly tell it not to do this. With <a> elements, however, the browser automatically applies a blue color and an underline, and we don't want the links to look like that.

Now we'll move on to styling the <nav> element. Add the following CSS:

header nav {

  float: right;

  margin: 7px 0;

}

Here, we've done something fairly drastic. We took the <nav> element and moved it to the right side.

As we've seen so far, most HTML elements position themselves along the left side of the page with one following the other. So we've taken one totally out of the normal "flow" of the page. The property we used here is called float.

The float property takes an element that wants to occupy 100% of its parent's width by default (known in CSS as a block element) and pushes everything that follows it below it, allowing other elements to come alongside of it or wrap around it (known in CSS as inline elements).

We can use the float property when we have HTML elements that would look better side by side, which allows us to use the horizontal space in a more meaningful way. Other CSS properties allow us to turn block elements into inline elements, but using float in this case made more sense because we needed to turn this element into an <inline> element and move it to the right. The float property let's us do both at once.

DEEP DIVE

The browser wants to interpret and position certain HTML elements in a specific way. This concept is called flow. Normal flow in HTML is a page with no CSS overriding default layout styles. This flow follows two directions: block (top to bottom) and inline (left to right)

In HTML, certain elements are designed by default to occupy 100% of the width of whatever the parent element is. If the parent element is 800px wide, then the child is 800px wide and won't allow anything to the left or right of it. This is known as a block-level element. Popular elements that have a default block styling are the <h1>–<h6> elements, <div>, section, <nav>, <header>, <footer>, and <li>.

The other type of element default is an inline element, which only occupies the space it needs to occupy and does not demand 100% width. These are used to allow elements to appear to the left or right of them. The most popular inline element is the <a> element.

CSS allows us to override these elements' default layout definitions through a few different ways, but the most on-the-nose one is to apply a display property to that element. For example, display: block forces an element to occupy 100% of the width of its parent. On the other hand, display: inline makes an element only occupy the space it needs and allows other elements to flow "in line" with it horizontally.

We've also added in a little bit of a top and bottom margin here too. The margin property here has a value of 7px 0, which means it has 7px of space added to the top and bottom, and 0px to the left and right.

Now that we have the two main pieces (<h1> and <nav>) in position, let's move on to the <nav> elements. Add the following CSS:

header nav ul li {

  display: inline;

}

Did you notice that before we added display: inline, the list looked like, well, a list? This is because each <li> is a block element, meaning the browser lets it occupy 100% of the width of whatever parent element it's in. As mentioned previously, block elements will always force the next element to be on the next line. To make the navigation links line up horizontally in a row, which is the eventual goal, we need to make it an inline element here. This is another case of us overriding a default style that the browser provides <li> elements.

The last one we need to hit is the <nav>'s <a> elements. Notice how we've already applied styles to the <a> elements in the <header>, but now we need to be more specific and give only these particular <a> elements styles that the other <a> element doesn't need. So now these <a> elements will receive not only the styles we added earlier, but these styles as well.

Add the following CSS:

header nav ul li a {

  margin: 0 30px;

  font-weight: lighter;

  font-size: 22px;

}

This has been a lot to take in, but hopefully it has given you a basic understanding of how things want to behave and how you can undo that if you want to.

PAUSE

Considering all this, what do the following selectors do?

• header nav ul li

• header nav

• Select all <li> elements inside a <ul> element inside a <nav> element inside a <header> element.

• Select all <nav> elements inside a <header> element.

We still need to add some CSS to make the navigation align perfectly. To do this, we'll need to override some browser quirks. With that said, let's head back and look at fixing the little issue in the <header>.

At this point, the <header> should look something like the following image:

Think about that preceding list of block-level elements and see if there's any element in the <header> that's taking up more width than it needs to.

HINT

It's on the lefthand side and it's not the <nav> element!

Did you guess the <h1> element? Then you're correct! To fix this, let's add another style property to the existing style. In particular, let's set that element's display property to inline, as shown in the following code:

header h1 {

  font-weight: bold;

  font-size: 36px;

  color: #fce138;

  margin: 0;

  display: inline;

}

By adding that one property declaration and setting the <h1> to inline instead of block, we moved the <nav> on the righthand side up—but not as far as we thought it would. What gives? If we took the <h1> element out of block styling, shouldn't that allow whatever is coming to the right of it to be on the same line?

This is happening for the same reason that the teal background of the <header> doesn't come flush up against the top-left of the page, which is what we were hoping for. The good news is that we can fix both of these problems at once, while also preventing similar future problems as well.

As we've mentioned, the browser has some thoughts of its own about styling some elements. Without CSS, browsers give heading elements (<h1>–<h6>) some default styling, such as making them bold and adding padding around them to, well, make them look like headings! As a matter of fact, the browser provides built-in margins and padding to a lot of elements by default. This is a remnant of a world before CSS, when the browser did more of the heavy lifting when it came to styling text.

Before we can start styling a page using CSS, we need to remove these default browser-enforced styles. To do this, we'll apply some default CSS values for every element in the page to level the playing field all at once.

Let's go head and do that by adding this to the very top of the style sheet:

* {

  margin: 0;

  padding: 0;

}

We just told every element on the page to not have any margin or border unless we explicitly tell it to. Now we don't have to concern ourselves with undoing built-in browser styles one by one.

The asterisk * we used here is used quite often in programming. It is typically called a wildcard, but in CSS it is known as a universal selector. This is essentially a catch-all selector that says, "I won't match one thing—I'll match everything!"

DEEP DIVE

To learn more, refer to the MDN Web Docs on universal selectors

Okay, so now we're looking good, right? The header is flush up against the top-left corner of the page, so there's no weird white gap. The navigation is nice and directly to the right of the <h1>.

We can safely say at this point that we've finished the <header>! Woo-hoo!

Refresh the page in the browser. It should look like the following image:

Awesome job! It's time to move on to styling the <footer>. Don't worry—we went through so much in this one section that a lot of the work we do next won't be as long or difficult.

Don't forget to save your work and push to GitHub by using the following commands:

git add -A

git commit -m "<message-that-describes-the-commit>"

git push origin main

You're nearing the end of this lesson! Next and last, we'll set up and design the footer.

This first part is easy. We don't even have to concern ourselves with the fancy Made with love section because it's already done. So let's focus on the other content in the <footer>: the privacy policy link and the copyright.

The Run Buddy legal department is drafting a privacy policy for the site, but it won't be ready until later in the project. For now, we'll add a placeholder link to it in the footer. We can update the link with the actual URL when the page is ready.

Add the following HTML to the <footer>, right after the <h2>:

<div>

  <a href="#">Read Our Privacy Policy</a><br />

  &copy; 2019 Run Buddy, Inc.

</div>

When we apply styles to the <footer> in the next step, we want the link to the privacy policy and the copyright to be on the righthand side of the page. We could position them individually on the right, or we could wrap both of them in a container (in this case, a <div>) and then move the whole container over when we're ready. The latter sounds easier, because it is—and that's just what we did!

Let's review the new HTML we used in the preceding code:

• 1. <br />: We used the break element (<br/>) to create a line break between the Privacy Policy link and the copyright. When you use <br/>, whatever comes after it will be on the next line. Because <a> elements are inline elements, we needed to create that space manually.

  2. Break elements are great for design situations like this that don't require a ton of CSS tweaking, but just a simple line break.

PRO TIP

• You'll sometimes see <br/> written as <br>. HTML lets you write it either way, and both of these have the same effect. However, using <br/> is the best practice, because other HTML-like syntaxes do enforce the closing forward slash. If you get into the habit of writing <br/> now, you won't have to switch later!

• &copy;: In the preceding code, &copy; precedes the Run Buddy copyright notice; it creates the little copyright symbol. This is called an HTML entity, a special code that starts with an ampersand (&) and can be used to create symbols.
  
  

• In case you haven't noticed, every HTML element is surrounded by a less than (<) and greater than (>) symbol. So what happens if we need to use a greater than sign as content and not as HTML syntax? The solution is to use the HTML entity &gt; which creates a >.

DEEP DIVE

To learn more, refer to the MDN Web Docs on HTML entities

One more thing to mention is the use of a # as the value of the href. Remember how we used href="#what-we-do to navigate to another section of the same page with an id attribute that looks like id="what-we-do"? Here, we're using the # as a placeholder for a privacy policy page that doesn't exist yet. It's a way to show that there will be a link here eventually—we can circle back after we create the page to update it.

Now the <footer> has all the right bones to start styling!

As you kick off this section, think back to the styles you applied to the <header> and notice how many of these concepts are repeated.

Start by adding the following CSS to the <footer>:

footer {

  background: #fce138;

  width: 100%;

  padding: 40px 35px;

}

Did you notice that we used the same property declarations for the <footer> as we did in the <header> with just a few value tweaks to give it a different background color and padding values?

Now let's go ahead and tackle the rest of the content in the <footer> by following these steps:

1. Apply the following style to the left <h2> element:

footer h2 {

  display: inline;

  color: #024e76;

  font-size: 30px;

  margin: 0;

}

2. Apply the following style to the right <div> container that holds the rest of the content:

footer div {

  float: right;

  line-height: 1.5;

  text-align: right;

}

3. Apply the following style to the <a> element:

footer a {

  color: #024e76;

}

That wasn't so bad, was it? Did you notice that we repeated the same layout that was in the header by making the <h2> an inline element and the <div> float to the right?

We only introduced the following two new properties:

• The line-height property assigns how much vertical space should be between lines of text content. The value (1.5) means we want the spacing to be 1.5 times the size of the font. This value varies depending on what font we're using, but 1.5 is a good baseline. The idea behind this is we don't want the lines of text too close or too far apart. This lets us finesse the spacing and make it more readable.

• The text-align property lets us align the text to the left, right, center, or justified. By default, it is left-aligned.

See the newly updated <footer> by saving your files and refreshing the page in the browser. You'll notice it doesn't look quite right, however, as shown in the following image:

How could this be? Well, remember that whole "box model" discussion from earlier? The issue has something to do with that. We told the footer CSS rule declaration to have both a width of 100% and padding of 35px on both the left and right sides. Having a width of 100% means it will be the full width of its parent (in this case, the <body> element), but then we add on a total of 70px to the left and right with padding and it makes the <footer> element wider than the actual screen!

Luckily, there's a fix that will instruct the browser to ignore padding in the overall width. Update the * selector CSS at the top of the file to look like the following code:

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

Save your CSS file and refresh in the browser. You should see something that resembles the following image:

How did that one line of code fix it? Let's find out.

Box-Sizing: Calculating the Width and Height of Elements

The box-sizing property determines how to calculate the width and height of each element. There are two possible values for the box-sizing property: content-size and border-box.

• The content-size value is the default, and calculates the height and width of the element by only counting the content box of the CSS Box Model. This means that the border and padding must be calculated separately and added to the width and height to determine the size of the element.

• The border-box value calculates the height and width of the element by including the border and padding additions to the content box.

DEEP DIVE

To learn more, refer to the MDN Web Docs on the box-sizing property

Great work! You've officially completed all of the styles for the header and footer!

We covered a lot, so let's do a knowledge check:

1.2.10. Reflection

We covered a lot in this lesson. There's no easy way to be introduced to some of these concepts—CSS in particular—so we just jumped right in and started coding.

Let's recap what we accomplished:

• Built two major components that typically go on every webpage: the header and footer. By doing them one by one, we learned about new HTML elements and structure without getting overwhelmed.

• Learned quite a few new HTML elements that we'll use throughout the rest of this project (and your career!).

• Provided context, meaning, and functionality to HTML elements by using HTML attributes.

• Styled our header and footer using CSS.

• Implemented CSS using the link element and relative paths.

• Styled elements and nested elements by using CSS element selectors and properties.

• Used CSS to override the default way that browsers style HTML elements.

The best part about learning all of these new topics at once is that the upcoming steps will be less introduction and more doing!

In the next lesson, we'll move on to the body of the landing page, starting with creating a flashy "hero" section to entice visitors to stay on the site and eventually sign up with Run Buddy.

Lesson Code Snapshot

Download the code snapshot for this lesson to compare with your own code. It’s okay if your code isn’t exactly the same—use this code snapshot as a starting point for the next lesson.