Tag Archives: css

Automatic image slideshow

If you would like to display several images on a webpage, rather than making the user scroll down the page to see a lot of separate images, you can add an effective image slideshow which cycles through several images without making your user leave their position on the page.

Take a look at the example below which cycles through three images and then repeats the slideshow.

slides

If you would like to add an image slideshow to your page then you can use the code below. You can modify the code if you’d like to add transition effects (eg. fade) or navigation buttons (eg. pause, back, forward).

<!DOCTYPE html>
<html>
<head>
  <title>Slideshow</title>
  <style>
    .slides{
      display:none;
    }
  </style>
</head>
<body>
  <div class="slideshow_div" style="max-width:500px">
    <img class="slides" src="image1.jpg" style="width:100%">
    <img class="slides" src="image2.jpg" style="width:100%">
    <img class="slides" src="image3.jpg" style="width:100%">
  </div>
  <script type="text/javascript">
    var myIndex = 0;
    slideshow();

    function slideshow(){
      var item;
      var slides = document.getElementsByClassName("slides");
      for(item=0; item<slides.length; item++){
        slides[item].style.display = "none";
      }
      myIndex++;
      if(myIndex > slides.length){
        myIndex = 1;
      }
      slides[myIndex-1].style.display = "block";
      setTimeout(slideshow,4000);
    }
  </script>
</body>
</html>

This code is free for you to use and modify as you wish.

Drop-down menus in HTML and CSS

This tutorial explains how to create a drop-down menu on your website using HTML and CSS code. The drop-down menu will look like the example, but you can personalise it as you like.

dropdown

To create a drop-down menu using the method in this tutorial, you will need to create a div that contains a button as well as another div which contains the drop-down menu. The drop-down menu will be hidden until the mouse cursor hovers over the main button.

Step 1 – HTML code

Create a new HTML file and copy the code below. Each drop-down menu button will be contained inside a div with a class name of ‘dropdown_div‘. The button will have a class name of ‘dropdown_button‘ and the actual drop-down menu will be inside a div called ‘dropdown_content‘.

Change the text on the button as well as the links and link text inside the drop-down menu to match the links on your site. You can change the links by replacing the # hashtags with your own links eg. about.html or products.html. There are three drop-down menus below. You can add more or remove some if you wish. Once you have set up the links, save the HTML file.

Note that this HTML file is linked to an external CSS stylesheet called ‘theme.css‘ which will contain the CSS code for the menu.

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Drop-down menu</title>
  <link rel="stylesheet" href="theme.css" type="text/css"/>
</head>
<body>

<h2>Dropdown menu example</h2>
<p>This is an example of a drop-down menu. Hover your mouse cursor over the button to reveal the dropdown menu. You can add more buttons and drop-down menus by modifying the HTML and CSS code. Replace the link text and the # hashtags with the actual links.</p>

<div class="dropdown_div">
  <button class="dropdown_button">Dropdown button</button>
  <div class="dropdown_content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>


<div class="dropdown_div">
  <button class="dropdown_button">Dropdown button 2</button>
  <div class="dropdown_content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>


<div class="dropdown_div">
  <button class="dropdown_button">Dropdown button 3</button>
  <div class="dropdown_content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

Step 2 – CSS code

Create a new CSS file called ‘theme.css‘ and save it in the same folder as the HTML file. Copy the code below and change the colours, font size and family properties, and other properties as you wish. Save your work.

CSS Code:

.dropdown_div {
    position: relative;
    display: inline-block;
}

.dropdown_button {
    background-color: #5961D4; /* button background colour */
    color: #ffffff;
    padding: 14px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown_content {
    display: none; /* remove this to show all links before hovering */
    position: absolute;
    background-color: #f9f9f9; /* dropdown items - background colour */
    width: 100%; /* can remove this if you want to make the menu wider/narrower  */
    /* min-width: 180px; can add this if you need to change the minimu width of menu */
    box-shadow: 0px 6px 14px 0px rgba(0,0,0,0.3);
}

.dropdown_content a {
    font-family:Arial;
    color: #000000;
    padding: 12px 18px;
    text-decoration: none;
    display: block;
}

.dropdown_content a:hover {
    background-color: #9594A1; /* dropdown items hover - change background colour */
}

.dropdown_div:hover .dropdown_content {
    display: block;
}

.dropdown_div:hover .dropdown_button {
    background-color: #492FA1; /* button hover - change background colour */
}

p{
    font-family:Arial;
}

h2{
    font-family:Arial;
}

Make sure you have saved both files and then open the HTML file in your web browser. That’s it! You should have a nice drop-down menu on your page :-)

 

Parallax scrolling effect with HTML5, CSS and JavaScript

This tutorial explains how to add a parallax scrolling effect using some simple HTML5, CSS and JavaScript code. If you want to know more about the origins of the parallax effect, click here to see how Disney used the parallax effect in their early cartoon animation.

Click on the image below to see a working demo of the parallax effect created in this tutorial.

Parallax scrolling effect demo.
Parallax scrolling effect demo.

Watch the video below and then scroll down to see the sample code and sample image files you can use.

Sample code and images

Click on the image thumbnails below to download the sample background image and two parallax layer div background images.

background
background.png
parallax
parallax.png
parallax2
parallax2.png

All of the HTML, CSS and JavaScript code for this demo is included in one HTML file. You can copy the code from below – please note that I have included several of the same paragraphs in the code so that there is plenty of text content on the page to allow the user to scroll in order for the parallax effect to be visible.

<html>
<head>
  <title>Parallax effect</title>

  <style type="text/css">
    body{
      margin:0px;
      background:url(background.png) fixed;
    }
    #parallax_layer1{
      position:fixed;
      background:url(parallax.png) no-repeat 0px 300px;
      width:100%;
      height:800px;
    }
    #parallax_layer2{
      position:fixed;
      background:url(parallax2.png) no-repeat 0px 500px;
      width:100%;
      height:1000px;
    }
    #content_layer{
      color:#F9A7B0;
      background-color:black;
      opacity:0.5;
      font-family:Arial;
      position:absolute;
      padding:10px 10px 10px 30px;
      width:40%;
      right:0px;
    }
  </style>

  <script>
  // Create the parallax function.
  function parallax(){
    var parallax_layer1 = document.getElementById('parallax_layer1');
    var parallax_layer2 = document.getElementById('parallax_layer2');
    // Dividing the pageYOffset by a positive number will slow down the parallax effect.
    // Adding a '-' before (window.pageYOffset) makes the parallax
    // layer move up instead of down when scrolling.
    parallax_layer1.style.top = -(window.pageYOffset/2)+'px';
    parallax_layer2.style.top = -(window.pageYOffset/6)+'px';
  }
  // Add an event listener which will detect scrolling and run
  // the parallax function.
  window.addEventListener("scroll",parallax);

  </script>

</head>
<body>
  <div id="parallax_layer1"></div>
  <div id="parallax_layer2"></div>
  <div id="content_layer">
    <h1>Parallax effect</h1>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>

    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>

  </div>	
</body>
</html>

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

Aligning images to left, right and center

In this tutorial, we will look at how to align images using HTML5 and CSS. There is an align attribute for the img tag, however this is not compatible with HTML5 so we will look at aligning images using CSS instead.

Aligning to left or right

If you want to align an image to the left or right, then use the float property (explained in another tutorial here). If you want to align an image to the middle of a page, then read on…

Aligning to middle

If you want to align an image to the middle of a page, then you can use the CSS vertical-align property. You could use it in inline CSS code or in a stylesheet. To align an image to the middle of the page, you give the vertical-align property a value of middle.

If you use the vertical-align property using inline CSS, then it might look like this:

<img src="myimage.png" vertical-align="middle">

If you use the vertical-align property in a stylesheet, then  you might apply the vertical-align property to the img tag or you could give the image a class or ID and then apply the vertical-align property to that class/ID. In a stylesheet, your code might look like this:

img{
   vertical-align: middle;
}

 

Horizontal lists

This tutorial explains how to create horizontal lists and use list items as links in order to create a horizontal navigation bar. The result will look like the image below. You could then go and add some CSS styling to turn this into a nicely themed navigation bar.

Horizontal list with links.
Horizontal list with links.

Watch the video below (or click here to watch it on YouTube) and then scroll down to see the code.

Here is the sample HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Horizontal lists</title>
 <link rel="stylesheet" href="resources/stylesheet19.css"/>
</head>
 
<body>
 <div id"nav">
 <ul id="navlist">
 <li><a href="#">Link one</a></li>
 <li><a href="#">Link two</a></li>
 <li><a href="#">Link three</a></li>
 <li><a href="#">Link four</a></li>
 <li><a href="#">Link five</a></li>
 </ul>
 </div>
</body>
</html>

And here is the sample CSS code:

#navlist li{
 display: inline;
 list-style-type: none;
 padding-right: 20px;
}

Tables – Part 2 (Colspan and rowspan)

This tutorial explains how to use the colspan and rowspan properties in a table. These properties allow you to spread a cell over multiple columns or rows. The images below show how the rowspan and colspan properties can be used.

Using the rowspan property
Using the rowspan property
Using the colspan property
Using the colspan property

The colspan and rowspan properties basically allow you to customise the layout and arrangement of data in a table. Along with some CSS code to create a theme for your table, these properties can be used to make a boring meaningless table into an effective table that conveys the information it stores in an effective manner.

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

Here is the sample HTML code using the rowspan property:

<!DOCTYPE html>
<html>
<head>
 <title>Tables - Part 2 (colspan and rowspan)</title>
 <link rel="stylesheet" href="resources/stylesheet18.css"/>
</head>
 
<body>
 <table border="1px">
 <tr>
 <td rowspan="6">Top Selling Games on Steam</td>
 <th>Rank</th>
 <th>Title</th>
 <th>Developer</th>
 </tr>
 <tr>
 <td>1</td>
 <td>ARK: Survival Evolved</td>
 <td>Studio Wildcard</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Fallout 4</td>
 <td>Bethesda Game Studios</td>
 </tr>
 <tr>
 <td>3</td>
 <td>Grand Theft Auto 5</td>
 <td>Rockstar</td>
 </tr>
 <tr>
 <td>4</td>
 <td>LEGO Worlds</td>
 <td>TT Games</td>
 </tr>
 <tr>
 <td>5</td>
 <td>The Witcher 3: Wild Hunt</td>
 <td>CD Projekt Red</td>
 </tr>
 
 </table>
</body>
</html>

Here is the sample HTML code using the colspan property:

<!DOCTYPE html>
<html>
<head>
 <title>Tables - Part 2 (colspan and rowspan)</title>
 <link rel="stylesheet" href="resources/stylesheet18.css"/>
</head>
 
<body>
 <table border="1px">
 <tr>
 <td colspan="3">Top Selling Games on Steam</td>
 </tr>
 <tr>
 <th>Rank</th>
 <th>Title</th>
 <th>Developer</th>
 </tr>
 <tr>
 <td>1</td>
 <td>ARK: Survival Evolved</td>
 <td>Studio Wildcard</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Fallout 4</td>
 <td>Bethesda Game Studios</td>
 </tr>
 <tr>
 <td>3</td>
 <td>Grand Theft Auto 5</td>
 <td>Rockstar</td>
 </tr>
 <tr>
 <td>4</td>
 <td>LEGO Worlds</td>
 <td>TT Games</td>
 </tr>
 <tr>
 <td>5</td>
 <td>The Witcher 3: Wild Hunt</td>
 <td>CD Projekt Red</td>
 </tr>
 
 </table>
</body>
</html>

Tables

This tutorial explains how to create a table in HTML and populate the table rows and columns with data. Tables can be used to organise and display a range of information but should not be used for creating a web page layout – you should use divs or other tags for web page layouts.

The example table created in the video will look like the one below. We will look at how to apply styles to a table later on but in this tutorial we will focus on creating the headings and adding rows of data.

GamesList

Tables can be used for a range of purposes such as displaying scores for teams on a sports website. They can also be used to display results from a database query. Make sure that when adding a table, you apply some CSS code to give it an effective theme which fits in with the rest of the webpage as the default table style is pretty plain and boring. You might even like to completely remove the border or just use a very light border or background colours on different rows or columns.

The main HTML tags used to create a table are:

  • table – this actually holds the whole table. Your rows and table data should be inside the table tags.
  • caption – this is optional and is used to add a caption to a table
  • th – this creates a heading for a column
  • tr – this creates a row in the table
  • td – this adds a cell of data to a table row

The number of td tags used in a row should generally match the number of headings in the table so that you don’t have any columns out of place.

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

Here is the HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Tables</title>
 <link rel="stylesheet" href="resources/stylesheet18.css"/>
</head>
 
<body>
 <table border="1px">
 <caption>Top Selling Games on Steam</caption>
 <tr>
 <th>Rank</th>
 <th>Title</th>
 <th>Developer</th>
 </tr>
 <tr>
 <td>1</td>
 <td>ARK: Survival Evolved</td>
 <td>Studio Wildcard</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Fallout 4</td>
 <td>Bethesda Game Studios</td>
 </tr>
 <tr>
 <td>3</td>
 <td>Grand Theft Auto 5</td>
 <td>Rockstar</td>
 </tr>
 <tr>
 <td>4</td>
 <td>LEGO Worlds</td>
 <td>TT Games</td>
 </tr>
 <tr>
 <td>5</td>
 <td>The Witcher 3: Wild Hunt</td>
 <td>CD Projekt Red</td>
 </tr>
 
 </table>
</body>
</html>

There is no CSS code for this tutorial as not styling has been applied yet – this will be in the next tutorial!

Float and clear property

In this tutorial we will use the float and clear CSS properties to arrange images and text on a web page.:

    • float property – with the float property, an element can be pushed to the left or right letting other elements on the web page wrap around it. It is often used to arrange images and for div layouts.
    • clear property – with the clear property, we can specify which side or sides of an element that are floating elements aren’t allowed to be. The float property can be set to none, left, right, both, or inherit (inherit from the parent element). Setting the clear property to ‘both’ for a div means that no other floating divs can be to the left or the right of this div.

In this tutorial, we will float an image and clear a paragraph. We can float an image to the left or right and clear other content around it.

Here is an example of an image floating to the left without clearing the text.

Screen Shot 2015-05-15 at 9.03.35 am

Here is an example of an image floating to the right without clearing the text.

Screen Shot 2015-05-15 at 9.10.24 am

And here is an example of the image floating to the left and the clear property for the paragraph of text set to clear left.

Screen Shot 2015-05-15 at 9.12.44 am

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

Here is the sample HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Float and clear</title>
 <link rel="stylesheet" href="resources/stylesheet15.css"/>
</head>
 
<body>
 <img src="resources/canada.jpg" class="pic"/>
 <p class="paragraph">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
 
 <p class="paragraph">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
</body>
</html>

Here is the sample CSS code:

.pic{
 float:left; /* Float can be left or right */
 padding:5px;
}
.paragraph{
 clear:none; /* clear can be none, left, right, or both */
}

Linear gradients

In this tutorial you will learn how to add a linear gradient background to a div. A linear gradient is where one colour gradually changes into another colour.

A linear gradient can change colours gradually from left to right, right to left, top to bottom, or the bottom to top of a div. A gradient involves at least two different colours but can include multiple colours. Below is an example of a linear gradient that involves three colours (dark green, yellow, light green).

Screen Shot 2015-05-14 at 8.25.45 pm

The example above is obviously a dramatic example. Make sure you use colours that work well together and that work well with the rest of the theme on your website. Using different shades of a colour for a gradient can be used to give a div a little depth or a nice shadow effect if used effectively.

Watch the video below to see how to create linear gradients and then scroll down to see the sample HTML and CSS code.

Here is the sample HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Linear gradients</title>
 <link rel="stylesheet" href="resources/stylesheet14.css"/>
</head>
 
<body>
 <div class="round_box">
 <p>This box has rounded corners and a linear gradient.</p>
 </div>
</body>
</html>

Here is the sample CSS code:

.round_box{
 background-color:#31D457;
 width:250px;
 text-align:center;
 padding: 30px 20px;
 border-radius:20px;
 background-image:linear-gradient(to bottom, #175E0C, #DBF022, #37DE1C);
}

Rounded corners on a div

This tutorial explains how to add rounded corners to divs on a web page. The image below shows an example of a div with rounded corners.

Screen Shot 2015-05-14 at 7.26.54 pm

You may like to add rounded corners to images, buttons, divs or other elements on your page. They don’t just have to be added to divs.

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

Here is the HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Rounded corners</title>
 <link rel="stylesheet" href="resources/stylesheet13.css"/>
</head>
 
<body>
 <div class="round_box">
 <p>This box has rounded corners</p>
 </div>
</body>
</html>

Here is the CSS code:

.round_box{
 background-color:#31D457;
 width:250px;
 text-align:center;
 padding: 30px 20px;
 border-radius:20px;
}

Here is the CSS code that shows how to specify the border radius for each individual corner:

.round_box{
 background-color:#31D457;
 width:250px;
 text-align:center;
 padding: 30px 20px;
 border-top-left-radius:20px;
 border-top-right-radius:20px;
 border-bottom-left-radius:20px;
 border-bottom-right-radius:20px;
}

Styling lines on the canvas

In the previous tutorial we looked at how to draw lines on the canvas. In this tutorial we will style lines on the canvas by changing the following properties:

  • colour
  • width
  • line cap (shape on the ends of a line) for a line on the canvas

The line that we will create will look like this:

Screen Shot 2015-05-08 at 6.58.05 pm

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

Here is the sample code:

<!DOCTYPE html>
<html>
 <title>Styling lines on the canvas</title>
 <style>
 #myCanvas{
 background-color:#FFFFFF;
 border: 1px solid #000000;
 }
 </style>
</head>
 
<body>
 <script>
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 ctx.lineWidth=20; // specify the width of the line
 ctx.lineCap="round"; // lineCap options are square, round, butt
 ctx.moveTo(50,50); // x,y positions - where the line begins
 ctx.lineTo(250,250); // x,y positions - where the line ends
 ctx.strokeStyle="#0000FF"; // specify the colour of the line
 ctx.stroke(); // draw the line
 }
 window.onload=draw; // run the draw function when the page loads
 </script>
 <canvas id="myCanvas" width="300" height="300">
</body>
</html>

Next tutorial: Joining lines on the canvas

Using colour gradients and patterns

The code below shows how to use linear and radial gradients to fill rectangle shapes.

The three shapes will look like this (linear gradient on top left, radial gradient on top right, image pattern on bottom left side):

Screen Shot 2015-05-08 at 6.53.39 pm

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

Here is the code:

<!DOCTYPE html>
<html>
<head>
 <title>Gradients and patterns</title>
 <style>
 #myCanvas{
 background-color: white;
 border: 1px solid black;
 }
 </style>
 
 <script>
 var patternImage = new Image();
 patternImage.src = "pattern.png";
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 var gradient = ctx.createLinearGradient(0,0,150,0); // x1, y1, x2, y2 
 gradient.addColorStop(0, "red");
 gradient.addColorStop(0.5, "yellow");
 gradient.addColorStop(1, "green");
 ctx.fillStyle = gradient;
 ctx.strokeStyle = "blue";
 ctx.fillRect(0,0,150,75);
 ctx.strokeRect(0,0,150,75);
 
 var gradient2 = ctx.createRadialGradient(350,100,0,350,100,200);
 // ctx.createRadialGradient parameters are x1, y1, r1, x2, y2, r2
 gradient2.addColorStop(0, "yellow");
 gradient2.addColorStop(1, "blue");
 ctx.fillStyle = gradient2;
 ctx.strokeStyle = "blue";
 ctx.fillRect(250,0,200,200);
 ctx.strokeRect(250,0,200,200);
 
 var pattern = ctx.createPattern(patternImage, "repeat");
 ctx.fillStyle = pattern;
 ctx.strokeStyle = gradient;
 ctx.lineWidth = 20;
 ctx.fillRect(20,150,200,200);
 ctx.strokeRect(20,150,200,200);
 }
 window.onload=draw;
 </script>
</head>
<body>
 <canvas id="myCanvas" width="500" height="400">
</body>
</html>

Next tutorial: Simple animations using JavaScript

Styling lists

In one of the earlier tutorials we looked at how to create lists in a HTML web page. In this tutorial we will look at how to style both ordered and unordered lists using CSS code. We can style lists by changing circles to other shapes such as squares or arrows, or we can make lists ordered by letter instead of number, as an example.

Take a look at the example below where the order list has been styled to use letters instead of numbers, and the unordered list has been styled to use squares instead of circles.

Screen Shot 2017-04-14 at 4.41.21 pm

By adding the code display:inline; for the li element in your CSS code you can also show list items horizontally instead of vertically, as seen below.

Screen Shot 2017-04-14 at 4.43.34 pm

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

Here is the sample HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Styling lists</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet12.css" type="text/css"/>
</head>
<body>
 <h2>Cities</h2>
 <ol class="cities">
 <li>Sydney</li>
 <li>Melbourne</li>
 <li>Brisbane</li>
 <li>Perth</li>
 </ol>

 <h2>Countries</h2>
 <ul class="countries">
 <li>Australia</li>
 <li>France</li>
 <li>Canada</li>
 <li>New Zealand</li>
 </ul>
</body>
</html>

And here is the sample CSS code:

ol{
 list-style-type:lower-alpha;
 color:blue;
}

ul{
 list-style-type:square;
 color:green;
}

You can also add the following to your CSS code if you want list items to display horizontally:

li{
display: inline;
}

CSS nth-child selector

In a couple of the previous tutorials we looked at child selectors and pseudo classes. In this tutorial, we will move on to the nth-child selector. The nth-child selector is used to select every element that is the nth child of a parent. For example, you could apply a style to every 2nd paragraph (every 2nd child) in a div. When using the nth-child selector, ‘n’ can be a number, a keyword or a formula.

In the example below we can change the colour of every 5th paragraph inside a div called ‘mydiv’. Because ‘n’ is 5, every 5th element will be selected.

#mydiv p:nth-child(5){
 color:red;
}

Here is an example of a keyword being used to apply a background-color style to odd paragraphs inside a div:

#mydiv p:nth-child(odd){
 background-color:green;
}

Watch the video below to see some of the different numbers, keywords, and formulas that can be used with the CSS nth-child selector. Then scroll down to see the sample code.

Here is the HTML sample code:

<!DOCTYPE html>
<html>
<head>
 <title>CSS nth-child() selector</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet11.css" type="text/css"/>
</head>
<body>
 <div id="mydiv">
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 </div>
</body>
</html>

And here is the CSS code showing just the ‘even’ selection example from the video:

#mydiv p:nth-child(even){
 background-color:black;
 color:white;
}

Make sure you watch the video to see more examples of the numbers, keywords and formulas you can use with the nth-child selector. This video is also available here on my YouTube channel.