Get up to 80 % extra points for free! More info:

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.

Background

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

Noise texture on the background - Make Your First Website, Step by Step!

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 - Make Your First Website, Step by Step!

Header

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:

Logo - Make Your First Website, Step by Step!

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 - Make Your First Website, Step by Step!

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 - Make Your First Website, Step by Step!

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.

Download

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

Downloaded 75x (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 Hartinger
Avatar
User rating:
4 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. 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.
Activities