# 2.2: Header CSS ## 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. ```css html, body { padding: 0; margin: 0; } ``` ## 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. ```css header { background-color: #000064; padding: 10px; position: fixed; top: 0; width: 100%; } ``` ![Header Styled](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8jfzkobBq0j8iouS%2F2.2-header-styled.png?generation=1524162314759788\&alt=media) 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 `` portion of the `index.html` file. ![Header Styled Result](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8jgjUxg3_3l0FiZ2%2F2.2-header-styled-result.png?generation=1524162314056225\&alt=media) ## 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 `` tags next to the header? We should make the header an `inline` element... ```css h2 { margin: 0; color: white; padding: 20px 15px; display: inline; } ``` ![H2 Styled](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8jhiOUJIlVCg2htd%2F2.2-h2-styled.png?generation=1524162313589707\&alt=media) ![H2 Styled Result](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8jhy4QjwH8gmZpBY%2F2.2-h2-styled-result.png?generation=1524162312465846\&alt=media) ## 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. ```css header a { float: right; color: white; margin: 5px 10px; font-style: normal; } header a:first-of-type { margin-right: 50px; } ``` ![Links Styled](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8jjGVz9aG4eGevwb%2F2.2-links-styled.png?generation=1524162316346219\&alt=media) ![Links Styled Result](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8jjwUoa7KRwJVpOt%2F2.2-links-styled-result.png?generation=1524162313065054\&alt=media) ## Next Section Now let's work on the first section of the webpage. Go to [3.1: Introduction](https://eleven-fifty-academy.gitbook.io/intro-to-coding/part-3-introduction/3.1-introduction-html).