Build Your First Website (And Thwack Zombies with HTML and CSS) – Part 6

Let’s add some space above and below the <nav> to help the site look great. We can do this with the margin-top and margin-bottom properties.

nav {
    margin-top: 100px;
    margin-bottom: 50px;
}

While we’re working with the navigation, let’s set the color of nav a elements to orangered, and let’s remove the underline beneath the links by setting text-decoration to none.

nav a {
    color: orangered;
    text-decoration: none;
}

We can also mark the page that a user is on. To do this, we’ll add a class attribute to the HTML of the <li> that holds the link of the current page. On index.html, we’ll set the home link like this:

<li class=“currentpage”>
    <a href=“index.html”>Home</a>
</li>

On bio.html, add the currentpage class to the <li> that holds the Bio link. Note: we’re adding the class attribute now so that we don’t forget it later, but since we’ve still only added styles to the index.html page, nothing will change on the Bio page until we’ve copied our CSS there.

To select a class, you use the class name with a period in front of it (i.e., .currentpage).

We’ll use an orangered border on the bottom of the current page to show a user which page they are on. Borders require three values to appear: a color, a style and a width. We can set them all together in one statement, like this:

.currentpage {
      border-bottom: orangered solid 2px;
}

Let’s move down to the footer. The <hr> is a great separator, but its color isn’t quite “on brand” so to speak, so let’s change it to the orangered color we’ve used elsewhere. With <hr>, the easiest way to change it is to set a border on the bottom or top.

footer hr {
     border-top: 2px solid orangered;
}

The <hr> would look even better if it didn’t go the full width of the footer, so let’s set its width to 60%. This means that it will stay 60% of its parent element’s width no matter how wide or thin the parent gets. But it would look even better if it was centered. Margin has a special keyword: auto, which centers an element horizontally. Margin: auto requires the element to be a block-level element (or set to display: block;) with a set width. <hr> is a block element, and percentage widths count as widths, so we’ll add these two properties to the footer hr selector and watch it center.

width: 60%;
margin: auto;

Let’s center the text using text-align: center on the footer element and add a top margin of fifty pixels.

footer {
    text-align: center;
    margin-top: 50px;
}

Finally, let’s set a limit on how wide the page can be. Currently, it can stretch as wide as the browser, but on a desktop or laptop, that can be wide enough to make the content really hard to read. To set a maximum width, use the max-width property. We’ll also want it to be centered, so we’ll use our trusty margin: auto for that too. We’ll need to apply these two properties to the <nav>, <header>, <main>, and <footer>. We can do all of them at once by separating the selectors with a comma:

nav, header, main, footer {
    max-width: 1000px;
    margin: auto;
}

But the margin here will overwrite the margins we’ve set on <nav> and <footer> if we put it below them, (and if we put it above the nav and footer declaration blocks, then they will overwrite the auto margins). The easiest way out of this is to add a <div> element that wraps around all four elements. We also need to give the <div> a handle we can access from CSS, since there are other <div>s on our site. Let’s add a class of wrapper to the <div>. Place the opening tag <div class=“wrapper”> before the <nav> opening tag and the closing tag of the wrapper, </div>, after the closing footer tag. (Don’t forget to add <div class=“wrapper”> to bio.html too.) Lastly replace nav, header, main, footer in the CSS with .wrapper.

.wrapper {
    max-width: 1000px;
    margin: auto;
}

Now that we’ve applied CSS to the parts of the page that will be the same across pages (namely the <header> and <footer>), let’s copy the <style> element and the CSS from your index.html to bio.html. Go ahead and save both pages.

You should be able to click through the navigation and see your currentpage styles change for each page. The overall look and feel should be the same across both pages.

The image that shows on the bio would look a lot better if it was smaller and the text flowed around it, rather than having it stick out as it currently does. In the <style> element of the bio page, add a CSS selector for the <img> element and set a property of float to the value of right.

img {
    float: right;
}

This will pull the image out of normal flow and send it over to the right, allowing the text to flow around it. However, the text can ride right up to the image, which doesn’t look as good, so let’s add a margin of 5px to the left and bottom of the img:

img {
    float: right;
    margin-left: 5px;
    margin-bottom: 5px;
}

Now let’s get that image down to size. Let’s set a width of 300 pixels and a height of 300 pixels. Now save it, and take a look.

img {
    float: right;
    margin-left: 5px;
    margin-bottom: 5px;
    width: 300px;
    height: 300px;
}

Hmm… Something doesn’t look right (besides Dr. Boople’s fashion sense). Dr. Boople looks squished (even if that’s an improvement for him). This is because we changed the aspect ratio of the image. It was rectangular, and we made it into a square. One way to fix this is to calculate the correct height based on the aspect ratio of the image. There is a simpler way though. You can set the height of the image to auto, which will modify the height such that the aspect ratio will be preserved.

img {
    float: right;
    margin-left: 5px;
    margin-bottom: 5px;
    width: 300px;
    height: auto;
}

Now if we could just fix Dr. Boople’s fashion sense…