CSS Tutorials

The way you can fix the difference of the browsers is using CSS Hacks, but many people can’t understand what it is or how to use it… However, i think it’s not to hard to understand it and using it though Web Standards Project doesn’t advise to use it ^^

This tutorial tells you everything you need to achieve one of the most popular CSS layouts - a fixed width, 100% height layout with a footer.

We’re going to create a horizontal row of boxes containing link text. When we move the mouse over one of these boxes, it’s going to get taller and the text larger and bold. I’ll link to a finished example at the end of the tutorial.

Hanging Punctuation refers to the technique of positioning certain typographical elements, such as bullets, quotation marks on pull quotes, etc. into the margin of a document, so that the main text that the glyph highlights remains flush with the rest of the body copy around it. Often seen in print, rarely used on the web, hanging punctuations can help keep the flow of your document and make the text easier to read.

When designing a web site, it’s generally a good idea to keep your sites navigational elements text-based. This has several advantages, like being search engine friendly and easily accessible to screen readers and hand-held devices. Let’s face it, though, sometimes that’s not always practical and what the site design really calls for is a nice menu comprised of graphics in which the actual menu text is stylized. So, here’s a little trick that will give you the best of both worlds.

Using an unordered list, a couple of images, and a little CSS, we can create an accessible “image map” with pop-up tool tips that provide our readers more information on the links the map contains. There are several techniques out there for doing this, but, unlike some, the one outlined here has the advantage of working in older versions of Internet Explorer.

Here’s a neat effect that will allow you to display a thumbnail image for a link on hover (similar to the technique used at www.digitalart.org - except ours will be pure CSS).

With some simple CSS applied to an unordered list, we can quickly and easily make a nicely formatted calender that’s easily lightweight and updated.

Solving problem with doubling of float block in IE 5-6 while using margin-left with float:left and margin-right with float:right and problem with block which has a float block inside and it doesn’t set it’s height to the one defined in CSS file.

You will learn how to create cool looking rounded boxes in two ways: using CSS with images and using JavaScript.