Black Friday is here! Take advantage of this unique opportunity and get up to 80% extra knowledge for free! Read more here
bf extended_2022

Lesson 13 - Styling the HTML page head

In the previous lesson, Navigation menu, footer and HTML entities, we made the HTML code part of our website's header and a footer. In today's lesson, we're going to style the header.


The header and the footer will both have the same background, an image with noise that we generated at Mine looks like this:

Noise texture on the background

We'll set the background for the entire body, but it will not be applied to the header nor the footer. The reason being, that we want all of the space on the website to be filled with the background. Including the space below the footer, leftover space for when the content is short, and every space that would otherwise have been left blank when the user has a high resolution. If we didn't set it up this way, there would be a chunk of white space under the footer, on big screens.

We'll specify the background for the body in its selector, where we have already set the font style. We will set the background color, for reasons we have already covered in previous lessons. We will set the body's margin to 0, which removes the ugly thin spacing around the whole website. Last, of all, we set the minimal body width to 960 px. As you may recall, 960px is the recommended width for websites (disregarding responsive versions, which we will get to later on). When we shrink a browser window down, our website won't break due to the specified minimal width. Instead of breaking, it will display scrollbars.

Our website's body's style should now look like the following:

body {
    background: url('images/background_grey.png') #1c2228;
    margin: 0px;
    font: 14px Verdana;
    min-width: 960px;

Here's avisual representation of the results:

Body background in HTML and CSS


Let's proceed and start styling the header. First of all, we'll set the header height to 73px. We will apply the style to all of the headers, including the article header:

header {
    height: 73px;
We added a logo into the HTML as a div. As you already know, a
is an element that is solely meant for styling and does not have any sort of semantic. In CSS, we add an image by setting it as a background and disabling the background-repeat. This is an alternative to using the image HTML tag. The advantage to doing it this way is that such an image is easier to position and manipulate as it is a background. This approach is not appropriate for article contents, however, it's quite useful for layouts.

I used this image for the logo:


You can download it as well if you want, or use your own. Its size is 64x64 pixels. We could also use a pretty little icon we wanted to (you already know where to find them). Let's style the div with an id of "logo". The ID selector works exactly the same as the class one. The only difference being that it starts off with a # instead of a . (dot):

#logo {
    background: url('images/logo.png') no-repeat;
    width: 250px;
    height: 60px;
    float: left;
    margin: 7px 0px 0px 20px;

Setting the background should be pretty straightforward. The "no-repeat" value means to say that an image shouldn't loop (tile over one another, like in website backgrounds).

Then we set the width and the height of the div with the logo and text.

Float marks the element as "floating", which is necessary in order to place it next to the navigation menu. Non-floating block elements are stacked under each other. Notice that the logo has been under the navigation up until now.

The margin sets the outer spacing, the values order is top, right, bottom, left. Meaning that we moved it a bit lower and to the right.

Now, let's move to the HTML and wrap the text in the logo div in an <h1> tag. It's a good practice to mark the logo text as an <h1>. Older HTML specifications didn't allow 2 first-level headings on a single page. HTML did away with that in version 5, all you have to do is make sure the headings are wrapped in the <header> tag. Having it this way is more logical since both a website and the currently displayed article have some sort of a heading.

<div id="logo"><h1>HoBi</h1></div>

To make our heading look good, we'll decrease its top margin which will move it up, and move it a bit further to the right:

#logo h1 {
    margin: 14px 0px 0px 10px;

Having done all of that, the results should look something like this:

A website logo in HTML and CSS

Navigation menu

Don't think I forgot about the navigation menu! We'll start by disabling the bullet points in the navigation. To do so, we use the list-style-type property. For which we can choose from the following values:

  • circle - Circles
  • decimal - Numbers
  • decimal-leading-zero - Numbers with a leading zero for numbers less than 10
  • disc (default) - Filled circles
  • lower-alpha - Lower-case Latin letters
  • lower-greek - Lower-case Greek letters
  • lower-latin - Lower-case Latin letters
  • lower-roman - Lower-case Roman numbers
  • none - No bullet points
  • square - Rectangles
  • upper-alpha - Upper-case Latin letters
  • upper-greek - Upper-case Greek letters
  • upper-latin - Upper-case Latin letters
  • upper-roman - Upper-case Roman numbers
  • inherit - Inherits the type from the parent element

We'll go with the "none" value, which disables bullet points.

Set this style to the list, and disable its margin (the empty space at the top will disappear):

nav ul {
    margin: 0px;
    list-style-type: none;

Now let's align the list items horizontally to make them look better. As you may have guessed, we'll align them using the float property with the value set to "left". Then it's only a matter of adjusting spacings, font, and color to taste.

nav ul li {
    float: left;
    padding: 0px 25px;
    margin: 0 5px;
    font-size: 17px;
    height: 73px;
    line-height: 4.3em;

The line-height property is new to you. Do you remember when we said that centering in CSS is poorly designed? The line-height property sets the line height, which allows us to center text in an element. In our case, the button texts will be centered.

We don't want links tp be blue, but white. Coloring them is trivial, and we already know how to disable underlining:

nav a {
    color: white;
    text-decoration: none;

Now, let's style the active item and the item we hover our mouse over. As a matter of fact, we'll just make them have the same style. Add the :hover parameter to the selector:

nav ul li:hover, .active {
    background: #ffbb00;
    box-shadow: 0px 0px 5px black;

The result will be the following:

Navigation menu in HTML and CSS

The code we worked on today is available for download below, as always. We'll finish the template in the next lesson - Solved tasks for HTML and CSS lessons 12-13 :)

In the following exercise, Solved tasks for HTML and CSS lessons 12-13, we're gonna practice our knowledge from previous lessons.


Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.


By downloading the following file, you agree to the license terms

Downloaded 71x (87.28 kB)
Application includes source codes in language HTML


Previous article
Navigation menu, footer and HTML entities
All articles in this section
Make Your First Website, Step by Step!
Skip article
(not recommended)
Solved tasks for HTML and CSS lessons 12-13
Article has been written for you by David Capka
User rating:
4 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn university David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.




PAUL NORTON:12/20/2016 6:12

hey am on lesson 13 and everything was smooth untill when i changed the background of my page to black by using this
body {
background: url('images/bac­kground_grey.png') #1c2228;
margin: 0px;
font: 14px Verdana;
min-width: 960px;
then the whole page even the section's background changed to black.
image 1 was before i put in that code but it turned to image 2 after adding that code but the thing had to look like image 3 I have re-written the codes for over 2 hours but am getting the same thing.image 4 and 5 are the images of my html doc.
some one with a solution to help me

12/20/2016 6:12
David Capka team
Replies to PAUL NORTON
David Capka:12/20/2016 11:17

Hi Paul, there is a zip archive attached under each lesson where is the correct source code. You probably messed with background image names. Just download our archive and check what have you done differently.

12/20/2016 11:17
You can walk through a storm and feel the wind but you know you are not the wind.
Replies to David Capka
PAUL NORTON:12/21/2016 5:01


12/21/2016 5:01
Prinz_Div:3/29/2017 7:36

sorry after putting this code it changes the background of every thing
body {
background: url('images/bac­kground_grey.png') #1c2228;
margin: 0px;
font: 14px Verdana;
min-width: 960px;
don't know were to go from here.

3/29/2017 7:36
To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

4 messages from 4 displayed.