Interactive Tracker Boxes #2 - CSS

Introduction:

This is the second part of my interactive tracker boxes in HTML, CSS, and jQuery. This part will be covering styling the classes of our elements using CSS3.

Box:

The box class will be the holder of the points/trackers where the user is able to hover their mouse over in order to get responsive information about appropriate content. For this, I am going to do a simple small box with white background, and black border...

Boxes:

The boxes class will be the container of our 'box' classes (the trackers container). This just need to be a width and height of where you want your trackers to appear... The above width & height means my tracker points/boxes will be able to appear anywhere within the top 500 pixels of my page. Width 100% allows them to go anywhere on the X axis.

Information:

Finally, the information class will contain the information that we are going to be dynamically changing once one of the trackers are hovered over with the user's mouse. So this will be mostly font styling. First we want to set the area where the text can go, with the width and height properties... Then we want to set a default background colour and font colour so that they don't contrast in various browsers... Finally we are going to style the text with Verdana font as it is a web-safe font meaning that no additional font files or includes are required to use it, 18 pixels size, and a normal weight (boldness)...

Linking:

As I am using my CSS in an external file away from the HTML file, I need to link the HTML file to the CSS in order to include the styling, if you need to also do this (if you're not using inline styling), you can add the following line to your 'head' tags of your HTML file... This line creates a link to the 'tracker.css' CSS file.

Finished!

Here is the full CSS source code...