Lesson 13 - Styling the HTML page head

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

header {
    height: 73px;
}

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:

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:

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