Playing with CSS

Home HTML Page Stylesheet Improvements DummyLink DummyLink DummyLink

This page demonstrates some simple CSS techniques one can use which improve the presentation of your web pages.

The links in the left navigation index have the <a> anchor defined as a block-level element. This has two advantages, viz. different anchors appear in a new line without us needing to append a <br> after each anchor, and with the :hover pseudo class background for the who line is activated(in our case, changes background color) rather than just the background behind the anchor text. In the hover state, other changes are the color of text, underlining, and colored borders. This technique is an easy way to create simple rollover effects without using other scripting languages.

We have an orange colored 2px separator line betweent the navigation panel and the contents box. Earlier this kind of separation was done by using a small gif image (e.g. a 2x5pixel gif). With CSS there is no need to use these gifs as these kind of effects can be used either easily (as we have done here) or by other simple CSS tricks.

Using a style sheet also helps save bandwidth. With a style sheet attached to a webpage, once you visit it with your browser it caches the style sheet and images connected to the style sheet. Thus there is bandwidth saving for each subsequent request. Also when you use CSS with web page design, the main web page's size is smaller than if you added all the style information in line. Thus using CSS not only helps in keeping the layout and content separate and easy to maintain, it also saves us crucial bandwith which translates to lesser hosting costs.

In order to use CSS you should have the basic knowledge about it. No matter how much a WYSIWYG editor advances to give you seemingly flashy features, knowing CSS basics is always helpful. There are several tutorials on the WWW, a simple reading should be enough. There are links for a few basic tutorials in NvuForums.

These pages were tested in Mozilla and should be displayed in an acceptable fashion by a modern browser. If you find some abnormality in rendering please drop me an email and I will try to remove it. Thanks.