search

2.2: Header CSS

hashtag
Ensure zero padding and margin

Open style.css and add the following rule to make sure there's no margin or padding on the HTML or body.

html, body {
  padding: 0;
  margin: 0;
}

hashtag
Overall header

We want a pretty deep blue color for the header, set with the background-color property. Let's also add some padding to fatten the header up a little, and fix it across the top of the screen.

header {
  background-color: #000064;
  padding: 10px;
  position: fixed;
  top: 0;
  width: 100%;
}
Header Styled

You should now see a blue background across the top of the page. If you don't see this, make sure you correctly linked the style.css file in the <head> portion of the index.html file.

Header Styled Result

hashtag
Our name

We can barely see our name because of the black text vs deep blue background. Let's make the color of the text white. Header tags are also "block" level elements, they take up the whole width of the screen... what if we want our <a> tags next to the header? We should make the header an inline element...

H2 Styled
H2 Styled Result

hashtag
Links

Now let's make those links look a little better - turning the text white is a good start. Let's also move them to the far right part of the screen.

Links Styled
Links Styled Result

hashtag
Next Section

Now let's work on the first section of the webpage. Go to 3.1: Introduction.

Previous2.1: Header HTMLNextPart 3: Introduction

Last updated