Part 5:Back to the Future

How to Update the Styling of the Page

Step 1: What if you don’t have much content in your row? For example, it just says something like “drink it up” instead of being actual paragraphs of well written content. You probably wouldn’t want a small grey row mixed with a large white row, that’d just look awkward. To prevent this from happening you can add a min-height to all .content-row elements. This will make the rows a more even height, no matter what amount of content you have in the section.

Choose a better font!

Step 2: The default font is ugly, you should pick a better font. Now! You can choose any font you’d like for this step. The font here (which is superior to anything you’ll pick, unless you copy it) is called Roboto. Google makes it.

Google has a ton of fonts you can use for free. Click the link and take a look. Don’t be a sheep and just take my word on what the best font is. Am I giving you mixed signals? ;P

Step 3: There are a few ways you can add a custom font to your website.

Here you will learn how link it from the URL Google provides which is super simple.

You should copy and past the <link> code into your page’s <head> section. This will load a special CSS file. This file adds the font for you to use in the CSS files that follow it. That is why you need to double check that you link to the font, before you link to your own CSS file.

Step 4: Here, you specify that you want all text inside of the <body> to use Roboto as it’s default font. You should also provide a different backup font style. Make sure to do this encase there is an issue downloading Roboto.

Step 5: The third, ugly section was just to get a better idea about how the different sections were looking overall. You don’t have to add that nastiness!

To give the sections more depth, you should make the edges of the grey section look “softer.”

In your CSS file add box-shadow: (line 80). This adds a shadow under the section. 0px 0px is what makes the shadowing appear as if it is directly behind the section. To blur the edges, you should add by 5px and select the color ,#333333 (a dark gray).

Step 6: Sit back and relax now that you have completed all five parts!

Show your support

Clapping shows how much you appreciated Rose Pacheco-Campbell’s story.