CSS Rollovers- Part 1- Buttons with Images

Dated: May 2005
Author: Jason Gonzalez

In this, my very first tutorial, we will learn how to create Cascading Style Sheet rollovers just like the ones found within the Portfolio site here. This tutorial is geared toward CSS and HTML beginners, so feel free to skip ahead if you already know the basic material.

Also, of special note is to mention that this tutorial is an adaptation of Uberlink CSS Rollovers 2004, to be found at the Project Seven website. Just look for CSS Lab in their Tutorial section.

The first step for the purposes of this first tutorial will be to create a basic blank html page
1. Go to basic.html
2. From your web browser there should be an option to "View Page Source" (usually found in the View menu)
3. Copy & paste the entire html text into a text editor (here, I'm using Notepad that comes with Windows)
4. Internet Explorer might block the viewing of source code (while testing the basic.html page, I clicked View, Source and nothing happened). In that case, copy and paste the text below into your text editor and save as "basic.html":
5. 1. ```
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"/
  <html>
  <head>
  <title></title>
  </head>
  
  <body>
  
  </body>
  
  </html>
       
```

This text represents a basic web page with a DOCTYPE identifier (which identifies the page to a browser), head and body tags.

Create our folder structure
1. Create a new folder within the directory of your choice with a descriptive title such as "css_exercise1"
2. Create a new folder inside "css_exercise1" and name it "buttons"
3. Save the basic page as "rollovers01.html" in "css_exercise1", each without the quotes

Get our images
3. Right-click the above images and choose "Save Image As" from your browser. Internet Explorer might not preserve the original titles and file format. If that is the case then save the top button as button_pf_uf.gif and the bottom button as button_pf_over.gif
4. Save these images in the "buttons" folder

The next step is to create a separate style sheet file
1. Open a new window in your text editor (for Notepad, open the program a second time by double-clicking it's icon)
2. From within "rollovers01.html", type this just below the <title> tag:
  <link rel="stylesheet" href="navbar.css">
  This creates a link to a style sheet we have not yet created
3. Create a new file and save as "navbar.css" in "css_exercise1" without the quotes. This will be the css file that we will format our links list from

Link One
Link Two
Link Three
Link Four
Link Five
Link Six

Now we can create our list in the html page as shown above
1. In "rollovers01.html", type an unordered list just like this one
2. The html for this looks like this:
  1. ```
  <ul>
   <li>Link One</li>
   <li>Link Two</li>
   <li>Link Three</li>
   <li>Link Four</li>
   <li>Link Five</li>
   <li>Link Six</li>
  </ul>
        
```
3. Save the file "rollovers01.html"

Home Next Page

JGPWS's Tutorials can be found at the following locations:

JGPWS Tutorials uses ads on some pages. For more information, see our Privacy Policy page.

[List of marks used, with 'Adobe' first, if used, followed by other Adobe marks used, in alphabetical order] are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Back to: JGPWS index page