CSS also known as cascading style sheets can be used for entire website layouts. But why would you use them rather than the tables that have been used for ages?

CSS is not only good for making your text look pretty. You can position elements of your website with it. The reason most modern web designers push for tableless designs can be confusing for those not familiar with search engine optimization and standards based design. The use of style sheets cuts down on the code which not only helps web page loading time, but also assists search engines in indexing your website.

Tables are bulky because they require multiple tags such as:

<table>

     <tr>

          <td></td>

     </tr>

</table>

That is your basic table requirement. And every time you want to add newly positioned content you have to add nested tables. With CSS you can simply use <div></div> to accomplish the same thing above.

The next time you start a design, use DIVs to make it happen and you will be pleasantly surprised about how much more efficient it is.

To answer a question, inserting rollover text into a web page using dreamweaver cs3 is easy. It is a matter of some simple css work. Unless of course you are using graphics then you are probably working with rollover images even though it looks like text.

When using dreamweaver you will notice on the right side panel an area for css. You right click on that area and create a new class, or a new stylesheet if none has been added yet. You then set the properties for the text. IF it is a link then you want to set the standard, visited, and hover properties or you will end up with one of those ugly purple links after it is clicked on. The visited attribute tells the browser to reset that style to the standard setting so it looks the same after it has been visited. The hover attribute lets you show underlined text or a different color text. There are other goodies but I am not getting into all of that right now.

If you are working with rollover images then you need to insert image elements, then select rollover image. You would select the standard image and the hover image along with the alt text and a name for the image being called in the javascript. Simple as that.

Good Luck!

CSS (cascading style sheets) is a language used to style web pages. With css you can position elements, change font sizes and colors, and create dropdown menus without messy javascript cluttering up your code.

This post will cover rollover text links. In your stylesheet you will have a class that you created for the navigation text. For this example let’s call it .NavText from now on.

You will notice that if you add a link to that text, your text will no longer have the style you created for it. This is because you created the style for the NavText but you did not create it for a linked item. To create these styles you would insert the following style code.

.NavText a {      //This is for linked items. It shows the same as original style.
samestylesasNavText;
}

.NavText a:visited {    // This shows original style after the link was clicked.
samestylesasNavText;
}

.NavText a:hover {   // Here I added an underline for when you mouseover the link.
samestylesasNavText;
text-decoration: underline; }

Notice that I added the ‘hover’ style underneath the others. If you were to place that style in between or before then it would not show the desired result. This is because the style on the bottom overrides the ones above it. That is why it is called CASCADING style sheets.

I have been active in various forums and blog dicussions about web design and marketing. A common issue that seems to come up with inexperienced designers is how do you align your page container using nothing more than css.

With tables it is very easy. You would simply use a <table align=”center”>. With css it can be very simple as well. You would still float your DIV left, but in the body class you would set the body-margin left to between 200-250. This will make your main container appear in the middle of the browser. The value would depend on the width of the main container. This obviously is a non-issue with a fluid design that uses a width of 100%.

If any experienced designers would like to add on this with a separate solution, feel free to leave a comment below.