Tag Archives: css3

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>

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

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.

Styling your links

By default, links on your website will usually be blue and when the pages are linking to have been visited, the links will turn purple. However, we can customise the style of links. For example, we can change the colour or text decoration when a link has been visited, when the mouse hovers over a link, or when the mouse is clicking on a link.

The different link states that we can apply styles to are:

  • a:link (an unvisited link)
  • a:visited (a visited link)
  • a:hover (when the mouse is hovering over a link)
  • a:active (while the mouse is clicking on a link

Take a look at the animated example below. We have links which are orange and with no underline. However, when the user moves their mouse over these links they change to a dark blue colour and are underlined.

styledlinks

Watch the video below and then scroll down to see the sample HTML & CSS code and some further notes.

Here is the HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Styling links</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet10.css" type="text/css"/>
</head>
<body>
<h1>Styling links</h1>
<p>By default, links on your website will usually be blue and when the pages are linking to have been visited, the links will turn purple. However, we can customise the style of links. For example, we can change the colour or text decoration when a link has been visited, when the mouse hovers over a link, or when the mouse is clicking on a link.</p>
 
<a href="#one">One</a><br>
<a href="#two">Two</a><br>
<a href="#three">Three</a><br>
<a href="#four">Four</a><br>
<a href="#five">Five</a><br>
 
<h1> <a name="one"></a>One</h1>
<p>The quick brown fox jumped over the lazy dog.</p>
 
<h1> <a name="two"></a>Two</h1>
<p>The quick brown fox jumped over the lazy dog.</p>
 
<h1> <a name="three"></a>Three</h1>
<p>The quick brown fox jumped over the lazy dog.</p>
 
<h1> <a name="four"></a>Four</h1>
<p>The quick brown fox jumped over the lazy dog.</p>
 
<img src="resources/canada.jpg" width="300" height ="200"/><a name="five"></a>
 
 
</body>
</html>

And here is the CSS code:

a:link{
 color:#FF8000;
 text-decoration:none;
}
 
a:visited{
 color:#FF8000;
 text-decoration:none;
}
 
a:hover{
 color:#B45F04;
 text-decoration:underline;
}
 
a:active{
 color:#DF3A01;
 text-decoration:underline;
}

Just a few rules to take note of:

  • There is an order when specifying the style for several links
  • When specifying the style for several links, a:hover must come AFTER a:link and a:visited
  • a:active must always come after a:hover

Linking to the same page

We have already looked at how to link pages on a website. However, we can also link to different sections of a single web page. For example, if you have a long web page with lots of content, you can have a table of contents with links allowing the user to click on a link which will take them to a certain part of that web page.

You can link to other elements on a web page such as a heading, paragraph, div, or image. In this tutorial, we will look at how to link to different headings and images on a web page.

The example in the image below shows some links which when clicked will take the user to the corresponding headings with different sections of content. This example obviously looks a bit plain but using some CSS code we can style the links, headings and the rest of the content. You could also add some more code for a scrolling transition effect.

Screen Shot 2017-04-14 at 4.33.25 pm

Watch the video below which explains how to link to content on the same page, and then scroll down to see the sample code.

Here is the HTML code for the example shown in the video:

<!DOCTYPE html>
<html>
<head>
 <title>Linking to the same page</title>
 <meta charset="utf-8"/>
</head>
<body>
<h1>Linking to sections on the same page</h1>
<p>We have already looked at how to link pages on a website. However, we can also link to different sections of a single web page. For example, if you have a long web page with lots of content, you can have a table of contents with links allowing the user to click on a link which will take them to a certain part of that web page. You can link to other elements on a web page such as a heading, paragraph, div, or image. </p>
 
<a href="#one">One</a><br>
<a href="#two">Two</a><br>
<a href="#three">Three</a><br>
<a href="#four">Four</a><br>
<a href="#five">Five</a><br>
 
<h1> <a name="one"></a>One</h1>
<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. 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. 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. 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. 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>
 
<h1> <a name="two"></a>Two</h1>
<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. 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. 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. 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. 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>
 
<h1> <a name="three"></a>Three</h1>
<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. 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. 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. 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. 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>
 
<h1> <a name="four"></a>Four</h1>
<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. 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. 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. 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. 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>
 
<img src="resources/canada.jpg" width="300" height ="200"/><a name="five"></a>
 
 
</body>
</html>

Pseudo classes

Pseudo classes are used to specify a special state of a particular element. For example, the first letter in every paragraph could be a different size, or a link changes colour when the mouse cursor moves over it. Pseudo classes are built into CSS. You can’t just make your own pseudo classes. In this tutorial we will look at styling first letters and first sentences of paragraphs, how to style the first and last child of a parent, and also how to add content before and after the existing content in an element.

Watch the video below to see how to use pseudo classes in your CSS, then scroll down to see the sample code for the different examples.

The HTML code below is for the first example in the video (styling the first letter and styling the first sentence in paragraphs):

<!DOCTYPE html>
<html>
<head>
 <title>Pseudo classes</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet8.css" type="text/css"/>
</head>
<body>
 
<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. 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. 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. 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>
 
</body>
</html>

And here is the CSS code for the first example:

p:first-letter{
 font-size:150%;
 font-weight:bold;
 color:red;
}
 
p:first-line{
 color:blue;
}

This is the HTML code for the second example (styling first child and last child, and styling before and after):

<!DOCTYPE html>
<html>
<head>
 <title>More pseudo classes</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet9.css" type="text/css"/>
</head>
<body>
<p>This is a paragraph</p>
<div id="parent">
 <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 for the second example:

#parent p:first-child{
 color:green;
 text-decoration:underline;
 font-weight:bold;
}
 
#parent p:last-child{
 color:red;
 text-decoration:none;
 font-style:italic;
}
 
#parent p:before{
 content:"-->";
}
 
#parent p:after{
 content:"<--";
}