Web Design and Graphics

CSS Styles are a simple and fast way of making your site look good. In this tutorial you will learn how to make cool text rollovers.

The trick is to use the a:hover style! If you work with Dreamweaver the steps to follow are given below:

1. In your style sheet choose New
2. Next choose Use CSS selector
3. In the drop down menu choose a:hover
4. Finally, Define your style. You can choose your font, color, bold, underline etc.
5. You’re done it! It’s easy and fast and really cool!

Text Rollover Effect throughout the site

Copy this code between the head tags

Text Rollover Effect in a particular place of your site

Step 1: Paste this code between the head tags

Step 2: Select the link style for the link. An example of the code is given below:

Instead of designing graphic intensive web sites that take ages to load, you can use HTML tables creatively to get a professional looking web page that loads super fast. This article discusses many useful table tips and tricks on designing a great web page. Live examples and cut ‘n’ paste code are also provided for you to try out some great designs.

Tips on using Tables

• Always give the width for each of the cells in a table. Make sure that the total of the cells in a row adds up to the table width. This will avoid many complications.
• Try not to merge or break apart cells within a table. This again causes all kinds of problems.
• When using widths or heights that are less than 10 pixels insert a shim or a transparent gif (1x 1 pixel). If you use Fireworks you will find a shim in your Fireworks file, or you can just export a 1x 1 transparent image and call it a shim. This trick is mainly for a table to work in a Netscape browser.
• Netscape cannot understand height in percentages, so if you ever need to give a height for your tables, make sure it is in terms of pixels.

Let’s try out some cool designs using only tables