The colgroup and col structure is like a directive that specifies table formatting outside of the normal flow. Notice that the col tags do not get closed in HTML5, and the cascade is irregular. Normally the cascade applies to children, but the rows and cells in the table are not children or grandchildren of the col or colgroup. The relationship is more like stepchildren. Because of the irregular relationship, the CSS specificity appears to be quirky. Its not really, but it is not always as expected. To insure the the correct application of both the colgroup rules and the other rules being applied to the tr and td tags the colgroup rules should be applied in line, or be the final rule in the style entries.

Create a subtle "recessed" looking divider line. The example restyles the tag but it can applied to anything.

Reference a custom font file for use within a stylesheet

One of the limits of using lists (ordered and unordered) is that they have no provision for a heading. You can do something like:

This is a Title
• etc... but it is invalid because the list containers can only contain List Items. One way commonly used to put a heading on a list is to put a paragraph or div ahead of the list. It is messy and ugly, but it validates.

  The problem with that solution is that the elements are not bound to each other and therefore it can break unless you make it even uglier by putting a common wrapper around both elements, and then you have extra linefeeds to deal with.

Changes shape back and forth from a round element to a square element.

Making CSS transition effects work in all browsers, except IE 6-9

Multiple backgrounds

Forces padding to not be added to overall box dimensions but instead subtracted - good for frameworks. For example, a container 960px with a 20px border and a 20px padding added still remains 960px allowing me to enjoy my life free of pesky maths.

Old skool goodness!

Demo Image http://i.imgur.com/f7o3Flr.png

When I got the font from SymbolSet I was really excited to drop it into my interface but found many of the classes did not work. It looked like an encoding issue (since using the in line versions worked). Upon replacing all 400+ UTF-8 characters with their unicode values ever single one of the characters worked with their classes!

It's a great font - you should get it if you haven't already. For those of you wishing the included css file worked better in your web-app feel free to lift the code below.

I cannot imagine why developers spend all kinds of time trying to get some lame jquery menu working and don't have 15 minutes to spend enhancing the content with a few shadows instead of bloating the page with images that include a shadow.

The bare bones HTML code for a Google form, so you can add custom CSS styles to it.

designing a simple horizontal tab menu by using ul and il elements with css.