Currently Browsing: CSS Tutorials

A while ago I was asked by a follow co-worker if I think it was possible to build an entire site using only two CSS selectors. So after better defining, then adopting the challenge, I felt it was time to share. With this challenge, you push your thinking in a more minimalistic frame of mind with little impact and/or no learning curve.

Sprites are compiled versions of different creative parts of a website that typically has no need for repeating axises. Sprites are recommended to be used when ever possible to help cut down on HTTP requests to the server, and ultimately help speed up the performance of your web site.

Today we are going to talk about how to un-collapse them parent elements of floating children. How many times have you had an element collapse or rather disappear from sight when its children element are using a CSS float styles?

Today we are going to cover how to build a pure CSS menu with infinite sub menus; an area of CSS that is seldom talked about, poorly written or misconceived. This pure CSS menu with infinite sub menus technique makes use of CSS2 selectors so it will not work in IE6 and below without help from JavaScript. With that said, this pure CSS menu with infinite sub menus technique will work in:IE7,...

Here I am going to show you how to build "Lava Lam"p menu tabs. We will be using CSS / jQuery and a single image to maintain a 100% stretchy rounded corners menu tab or lava bubble if you will. This version of the Lava Lamp menu tabs works in IE6+ and all other browsers!

Did you know that IE6 has an bug when it comes time to use the CSS z-index sorting style? Here I will show you how to over come this classic IE6 z-index sorting issue.

Today we are going to build the second most common menu navigation, the vertical navigation menu. Here we are going to be using only pure CSS and un-ordered lists to create our menu with three sub-levels. This version of the vertical navigation menu will work in IE5 / IE6 (with CSS pseudo hover fix), IE7, IE8, IE9, as well as FF, Safari and Chrome.

Many developers have dedicated their time and efforts such as me to try to move developers over to the proper standards of web code and away from older or non w3c approaches to site designs. One of these long used but improper approaches to site designs is the dreaded table use for your sites layout. Tables were never meant to be a websites layout backbone as IE and Microsoft FrontPage have been advocating...

Sometimes we must isolate out specific versions of IE that give us grief as developers. There have been many discovered avenues in isolating certain versions of IE out of our style scheme to give specific instructions to, but none are as subtle as the !important. That’s right the !important use is for IE related issues ONLY! Aside from the ridicules fact that we have a procedure to make this one browser...

Today I want to talk about how to create that rounded corner look you see popping up all over the internet.

VIEW WORKING EXAMPLE OF OUR PURE CSS LIGHT BOX NOW A light box is web slang for a way to divide and present such things to your viewers as pictures in a gallery or special site notices. Today I wanted to quickly show you how to create a pure CSS light box. Lets start with our light box structure. Create a new document and add the following:<div class="onLight"> On <div...

This is a follow-up to my Three Column Layout in less than 10 lines of CSS tutorial but in this one we are going to be using, no background images no JavaScript and 100% pure CSS. This method only uses 14 CSS rules making it very light weight, easy to maintain, SEO and cross browser friendly. If for what ever reason you feel you might want to use this method but don’t want to follow the tutorial I...