Tag Archives: theme

Adding navigation menu buttons to your web page

In this tutorial you will learn how to add buttons to improve your navigation menu using CSS. The menu buttons will change colour when the mouse hovers over them or when a page has been visited.

This tutorial also provides you with a CSS layout template that you can use to add a header, content area, and footer in addition to the navigation menu. You can read through the page to see how each section of the code works or jump down the page to see the entire HTML and CSS code.

This is what the web page layout looks like (click the image to see the live site):

css_layout_buttons
CSS layout with menu buttons – click the image to view the live web page

This is what the menu hover effect looks like when the user’s mouse hovers over a button:

menu_gif

Step 1 – Adding the menu links to the HTML code

The first step to creating the navigation is to add the links to the other web pages on your site in the HTML code of the web page. The menu will be inside a div with an ID of “nav”. The links on the menu will then be inside an unordered list – each link will ne an individual list item. Here is what the HTML code looks like for the nav div:

<div id="nav">
  <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="about.html">About</a></li>
     <li><a href="products.html">Products</a></li>
     <li><a href="support.html">Support</a></li>
     <li><a href="contact.html">Contact us</a></li>
  </ul>
</div>

Step 2 – Adding the CSS code for the nav div

From here you need to add the CSS code that will style this menu. The nav div will be the first part that we will add CSS code for. The CSS code for the nav div below includes a dark blue/purple background colour, a height of 300 pixels and width of 150 pixels (this could be changed to a % value too). It is also set to float: left so that the menu is on the left side but this could be left out if you want a horizontal menu. Lastly, 5 pixels of padding is added.

#nav{
 background-color:#334a94;
 height:300px;
 width:150px;
 float:left;
 padding:5px;
}

Step 3 – Adding the CSS code for the unordered list

Then we add the style information for the list <ul> element. The list-style-type is set to none so that there are no bullets (dot points) on the list. The width of the unordered list is set to 100% so it takes up all of the width of the div, and the background colour is set to a dark blue/purple colour here. You could add margin and padding if you want or leave them as 0.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #334a94;
}

Step 4 – Adding the CSS code for links inside each list item.

Here we add a style that will apply to any link that is a list item on a list. Remember, the <li> tag is used to create list items and the <a> tag is used for links. For this style, we change the font to Calibri, size 14 with a font-style of none. Display is set to block (change to inline if you want a horizontal menu), the colour of the text is white, some padding is added, and text-decoration is set to none so that the links are not underlined.

li a {
  font-family:Calibri;
  font-size: 14pt;
  font-style:none;
    display: block;
    color: #FFFFFF;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

Step 5 – Add the CSS code for visited links

By adding the “li a:visited” CSS code, we are applying a style to only links on a list that link to a page that has been visited by the user.

li a:visited {
    background-color: #4CAF50;
    color: #FFFFFF;
}

Step 6 – Adding the CSS code for hover links

We can apply a style to links when the mouse hovers over a link (button). On this menu, we have applied a style that will change the background colour of a button to a light purple colour and the font colour to black whenever the mouse hovers over a button.

li a:hover {
    background-color: #786ED4;
    color: #000000;
}

And that’s it! You can change the code to suit your theme and try making a horizontal menu instead of a vertical menu. If you want the entire HTML code and CSS code you can copy it below.

The entire HTML file code:

<!DOCTYPE html>
<html>
<head>
 <title>Basic CSS Layout</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="theme.css" type="text/css"/>
</head>
<body>
 
<div id="header">
 <h1>My website</h1>
</div>
 
<div id="nav">
  <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="about.html">About</a></li>
     <li><a href="products.html">Products</a></li>
     <li><a href="support.html">Support</a></li>
     <li><a href="contact.html">Contact us</a></li>
  </ul>
</div>
 
<div id="section">
 <h2>Welcome to my website</h2>
 <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
 <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
</div>
 
<div id="footer">
 Copyright....2015.
</div>
</body>
</html>

The entire CSS file (theme.css) code

#header{
 background-image:url("background.png");
 background-color:#334a94;
 height:100px;
 color:#FFFFFF;
 text-align:left;
 padding-left:20px;
 padding-top:20px;
 font-family:Arial;
}
 
#nav{
 background-color:#334a94;
 height:300px;
 width:150px;
 float:left;
 padding:5px;
}
 
#section{
 width:500px;
 float:left;
 padding:10px;
}

h2{
  font-family:"Tahoma";
}

p{
  font-family:"Palatino Linotype";
}
 
#footer{
 background-color:#334a94;
 color:#FFFFFF;
 clear:both;
 text-align:center;
 padding:20px;
}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #334a94;
}

li a {
  font-family:Calibri;
  font-size: 14pt;
  font-style:none;
    display: block;
    color: #FFFFFF;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

li a:visited {
    background-color: #4CAF50;
    color: #FFFFFF;
}

li a:hover {
    background-color: #786ED4;
    color: #000000;
}

Note that for the header section a background image is specified. If you do not have a background.png file in the same directory as the CSS code, then the image will not appear but the dark blue/purple background colour will show instead. Click here if you’d like to download a blue/purple gradient background image to use as your header background. easter_egg_button

Background images and colours

This tutorial explains how to add a background image to divs and the body section of your web page. It also explains how to have fixed background images (that don’t scroll with the content of your web page) and change the placement of background images. You will also see how to add background colours behind background images.

In the example image below, there is a div inside the body of the page. The body has a background image (a greyish gradient) while the div has a light green background.

Screen Shot 2017-04-14 at 4.30.34 pm

Watch the video below and then scroll down to see the sample code.

Below is the sample code for the HTML file. If you add more content to your page so that the page can scroll down, you will notice that the background image doesn’t move because it is set to a fixed position in the CSS code. Note that the HTML code refers to CSS in a separate stylesheet file (called stylesheet4.css and stored in a resources folder).

<!DOCTYPE html>
<html>
<head>
 <title>Background images</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet4.css" type="text/css"/>
</head>
 
<body>
 
 <div>
 <h1>This is a heading</h1>
 <p>This is a paragraph</p>
 </div>
 
</body>
 
</html>

Here is the sample code for the CSS file (it’s called stylesheet4.css and stored in a resources folder):

body{
 background-image:url("nepal.png");
 background-color:blue;
 background-repeat:no-repeat;
 background-attachment:fixed;
}
 
div{
 width:450px;
 height:300px;
 background-image:url("canada.jpg");
 background-repeat:no-repeat;
 background-position:center top;
}

Using CSS to style your webpage

CSS stands for Cascading Style Sheets and is a style sheet language that is used to describe the look and style of web pages. CSS can be used to create a theme by modifying the layout, colours, and fonts.

Without any special styling or formatting, the web pages that we create don’t look very exciting. That’s where CSS comes in! We can use CSS to change the colour of text and backgrounds, use different font styles, and change the layout and overall theme of our site. This tutorial explains how to use CSS in a webpage.

There are three different ways of applying CSS:

  • Inline styling – the style attribute is applied within the HTML tag
  • Internal style sheet – style attributes are applied to selectors inside the head section of a webpage
  • External style sheets – style attributes are applied in a separate CSS file that can be used across a website

Below is an example of how to use inline styling within a HTML tag:

Inline styling
Inline styling

Below is an example of how to place the styling within the style tag inside the head section of a webpage:

Adding CSS using the style tag in the head section.
Adding CSS using the style tag in the head section.

This video tutorial will focus on using inline styling and internal style sheets. The next tutorial will explain how to use external style sheets. Watch the video below to see how to use CSS and then scroll down to see the sample code.

The sample code below shows how to use inline styling:

<!DOCTYPE html>
<html>
<head>
 <title>Adding CSS to a webpage</title>
 <meta charset="utf-8"/>
</head>

<body>
 <h1 style="color:red">This heading is red.</h1>
 <h2 style="color: #FE2EF7; border: solid 1px">This heading is pink with a border</h2>
 <p style="color:blue">This text is blue.</p>
 <p style="color:green; background-color: yellow">This text is green on a yellow background</p>
</body>

</html>

The sample code below shows how to use an internal style sheet:

<!DOCTYPE html>
<html>
<head>
 <title>Adding CSS to a webpage using internal stylesheets</title>
 <meta charset="utf-8"/>
 <style type="text/css">
 p{
 color:blue;
 }
 </style>
</head>

<body>
 <p>This is a paragraph of text. Because a style has been applied using the p selector, this paragraph will be blue.</p>
</body>

</html>

Tip:

The sample code for inline styling uses the HTML colour code #FE2EF7 for the colour pink. You can use the names of colours  for basic colours such as ‘blue’ or ‘red’ but for other specific colours you will need to use the HTML colour code (a combination of letters and numbers after a hashtag). You don’t need to remember all the colour codes but it is good to remember  #000000 for black and #FFFFFF for white. You can see all the colour codes here.