Project Solution: Integrating the CSS Header and Content Styles

Now that we have all the content we want, let's add some styling to it.

For that, we'll create a file called styles.css, and import it inside our <head> tag in index.html.

<head>
  <title>Google Clone</title>
  <link rel="stylesheet" href="styles.css">
</head>

Just to make sure this file is working , I'll give a background color of black in our CSS file. If you refresh the browser, the background is black, and this means, everything is working fine.

Let's now get down to creating styles for the entire page. First off, we'll create a "*" attribute, and this means, the style that we mention in the curly braces will apply to the entire page. For this project, let's set a margin of 0px, so it gives us flexibility to implement our sticky footer.

* {
  margin: 0px;
}

Also, the nice thing about Visual Source is it gives you a detailed explanation for every attribute, and this is particularly good if you're just learning HTML or CSS.

Next, let's go to our header tag. For our header, we want it to be on the top right side, so we have to set a value of 0px to our top and right attributes. Before that, we have to make the value of our position attribute as "absolute". Finally, we want our text-align to be to the right.

header {
  position: absolute;
  right: 0px;
  top: 0px;
  text-align: right;
}

If you refresh the page, you'll see that the header list has been moved to the top right position. To remove the bullet points, we have to customize the ul and li tags. First off, we'll change our display attribute to a value of "inline-block", so the values not one below the other, but on the side of each other.
Also, we'll add a margin of 10px between each item.

header ul li {
  display: inline-block;
  margin: 10px;
}

If you refresh the browser, it looks much better.

large

I think that's with the header.

We'll move to the content now. If you see the code, all the components are inside a div tag with an ID called "content". This means, we are going to use a "#" sign for the style. To start off, let's have a margin of 200px, and also use an attribute called important. It gives a good effect, and I'd recommend you play around with it a little bit to become familiar. Next, we'll center this content using the flex property, and justify it. Lastly, we'll set a value of "center" to our align-items attribute.

#content {
  margin-top: 200px !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

The page now looks like this, which is closer to how we want.

large

If you see, they're not stacked below the logo. To fix that, let's add a value "both" to an attribute called clear inside our #logo tag. Essentially, this attribute will allow us to have items on top of each other, instead of placing them from left to right. Also, we'll set the width to 100% and text-align to center.

#logo {
  clear: both;
  width: 100%;
  text-align: center;
}

This should bring our page closer to the Google page.

large

We'll have to do the same for our text field too, and we'll also add a top margin to give it some extra space.

#search {
  clear: both;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

Next, let's style our search box to make it longer. So, let's set the width to 600px, and height to 15px. We'll also give a custom border that is 1px thick, solid, and in gray color. Finally, let's add a padding of 5px and a margin of "0px, 0px, 5px, 0px". Alternately, you can also do margin-bottom.

#search-box {
  width: 600px;
  height: 15px;
  border: 1px solid #999999;
  padding: 5px;
  margin: 0px 0px 5px 0px;
}

Now, the output looks much closer to the original one.

large

We'll continue styling in the next video.