Lesson 13 - Styling the HTML page head

HTML and CSS First website 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

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

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;
}

Logo

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

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 - Fixed navigation menu and positioning in CSS :)


 

Download

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

 

 

Article has been written for you by David Capka
Avatar
Do you like this article?
1 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 College The author learned IT at the Unicorn College - a prestigious college providing education on IT and economics.
Activities (7)

 

 

Comments

Avatar
PAUL NORTON
Member
Avatar
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

 
Reply 12/20/2016 6:12
Avatar
David Capka
ICT.social team
Avatar
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.

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

OK, THANX A LOT LET ME TRY RIGHT AWAY

 
Reply 12/21/2016 5:01
Avatar
Prinz_Div
Member
Avatar
Prinz_Div:29. March 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.

 
Reply 29. March 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.