Our layout is almost complete, and looks a lot like the Google homepage now. In this video, we'll look into customizing a few things like hover effects, font styles and links.

First off, if you see, the fonts used in the header are different, and they have different hover effects too, so we need to fix this. If you guessed we'll be using pseudo classes for this implementation, you're 100% right.

Open styles.css, and first, I'm going to add some comments for better readability.

Now, we'll add some pseudo classes for the links. Let's have the links in black color, reduce the font size a little bit, change the font family, and remove text decoration.

header a:link {
  color: black;
  font-family: sans-serif;
  font-size: .8em;
  text-decoration: none;
}

The page should look like this now:

It's much closer to the Google page, and next, we'll add a hover effect. In this pseudo class, we'll just add an underline effect.

header a:hover {
  text-decoration: underline;
}

If you refresh the browser, you'll see the changes.

Next, we'll style the Sign-In button. The funny thing is this button is going to need the most styling out of all the elements we've worked on so far.

Let's get going. We'll have a border radius of 2px, a width of 80px and a height of 35px, change the background color to a shade of grayish blue and the font color to white, keep the font size to 0.8em to keep it the same as other elements on the header, have a relative position, align the text to center, make it bold with a font weight of 600, and have a margin of 5px on all sides except the top. Lastly, our border will be 1px thick, solid, and a grayish white.

#sign-in {
  border-radius: 2px;
  width: 80px;
  height: 35px;
  background-color: #2289d5;
  color: white;
  position: relative;
  font-size: .8em;
  text-align: center;
  font-weight: 600;
  margin: 0px 5px 5px 5px;
  border: 1px solid #CAC9C9;
}

Let's refresh the browser, and it should look like this:

If you see, this is much similar to the Google homepage. You can also play with it a little bit in terms of color, font family, and anything else you want. I'm happy though with these changes.

Then, we'll move on to the footer. Like the header, let's add pseudo classes. However, let's have a color of gray, and the list-type to be none. The rest is the same as header.

footer a:link {
  text-decoration: none;
  color: #787878;
  list-style-type: none;
  font-family: sans-serif;
  font-size: .8em;
}

I think the page now looks a lot more professional.

The hover effects will be the same as header.

footer a:hover {
  text-decoration: underline;
}

As a last thing, we'll do hover effects for the two buttons located in the center of the page.

There are many styles you can add for the hover effect, but I want to keep it simple, and add a nice border to it. If you go to the style code of .button, you'll see that we added a border of white. In general though, it makes no sense to add a white border when the background is white, but it was done on purpose, so we can change the border color to a shade of gray for our hover effect. Also, we'll change the cursor effect to a pointer.

.button:hover {
  border: 1px solid #A6A6A6;
  cursor: pointer;
}

These changes look cool on the browser.

We have a nice gray hover effect now. Try removing the white border from our .button style, and you'll see that the button looks a little ugly now. This is why we have that border color, even if it sounds redundant. With this, we're almost done with the site.