CSS Head

The best way to explain it is to start with an example of where specificity gets confusing and perhaps doesn’t behave like you would expect. Then we’ll take a closer look at how to calculate the actual specificity value to determine which selector takes precedence…

One of the most frustrating things about working with newer CSS attributes is that while most modern browsers will support them in their latest versions, IE almost never keeps up. Such is the case with the RGBA color declaration which enables developers to specify an alpha transparency along with a color. This works great in the latest versions of all major browsers except IE. If the alpha transparency is 50% or greater IE will revert to the solid rgb color specified, otherwise it will revert to full transparency. I recently came across a little trick that uses the IE proprietary gradient filter which supports alpha channel colors. If you simply set both shades of the gradient to the same color you can achieve the same effect as the CSS RGBA attribute…

You might be familiar with the plugin jQuery Dock which allows developers to create a menu like Apple Dock. Today, you will create a similar menu with bubble effect by using CSS only. Although it doesn’t have as smooth of an effect as jQuery Dock, it’s helpful for those that just want to make a cool menu by using pure CSS. This tutorial includes two methods: CSS sprites basic and the image swapping advanced…

Use this tool to find CSS selectors that aren't used by any of your HTML files and may be redundant…

Lately there are more and more CSS frameworks popping out of ground. My issue with most of them is that they mainly focus on the grid. All the other options are added in later. This framework has it's main focus on typography. Vertical rhythm is one of the most important things in design, so why not start your perspective from that angle?To make my life easier as a developer I added grid support in the Atatonic CSS Framework. Its works like any other grid system, but with only about 10 lines of css…

Buttons, whatever their purpose, are important design elements. They could be the end point of a Web form or a call to action. Designers have many reasons to style buttons, including to make them more attractive and to enhance usability. One of the most important reasons, though, is that standard buttons can easily be missed by users because they often look similar to elements in their operating system. Here, we present you several techniques and tutorials to help you learn how to style buttons using CSS. We’ll also address usability…

Borders used to be those ugly gray things that surrounded elements such as tables and frames, but now with CSS they are a very powerful tool for designers…

We’ll prepare typefaces for use on the web, go through @font-face CSS line-by-line, and get the experts take on browser support…

When out having a meal with a few guys from work once we got talking about the menu, and how it would be intereting to work on a restaurant website in terms of using semantics and CSS to build menus properly. When I got in that night I had a spare few minutes and came up with the following lightweight and semantic xHTML with a sprinkle of CSS…

Many times I see people of all skill levels making poor use of the first “C” in CSS; cascading. Furthermore, a constant underuse of specificity is apparent in a lot of developers’ work.

While this isn’t wrong per se, it doesn’t make best use of CSS’s primary attribute/purpose, and can cause unecessary workload and coding for the developer. It also makes projects harder to maintain over a long enough time frame — an ever growing list of class names used to target what could have been caught by the cascade and specificty automatically…