65 Must-Know CSS Strategies and Tutorials

Often times we only learn the CSS strategies we need to as we go through new projects. However, we should study new strategies in our spare time as well. This way, we can discover new and more efficient methods of getting things done for the future.

Adding details and advanced CSS techniques to projects when unasked can increase the value of yourself as a designer, so learning new things is practical as both a personal and business move. I encourage everyone to try out at least a few of these techniques you are unaware of. Even if it’s hard to imagine a practical use for them right now, it can be incredibly useful in future projects, or you may come up with a revolutionary idea based on these strategies.

Either way — try them out. Put them into practice, and brainstorm ways to include them in your current design process. It can do any designer or developer a lot of good. Constantly learning new techniques is the key to becoming a successful designer or developer.

“With all the hype over new and upcoming browser support for advanced CSS features, developers can be confused about the CSS they can include in web projects today. Many of the more advanced features aren’t widely supported by the dominant browsers, but some very useful ones are — including newer features from CSS3.”

“CSS is a well-known, widely used language to style websites. With version three in the works, many time-saving features will be implemented. Although only the most modern browsers currently support these effects, it’s still fun to see what’s around the corner! In this tutorial I’ll show you five techniques.”

“Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property.”

“I would like to share some insight on a piece of CSS I’ve used for the homepage for a website a while ago that I’ve built together with Roger Johansson. I’m talking about the hover effect on the 4 tabbed boxes shown on this page.”

“I like Crazy Egg‘s pricing table on their Pricing & Signup page. When you click on “Sign Up” for an option, that plan’s column highlights, the other plans vanish, and a signup form takes their place. There is a number of impressive things happening within this small area. I wanted to try and recreate the behavior step by step, and share the power of combining CSS, JavaScript, and images in clever ways.

If you just clicked over to look at Crazy Egg’s site, then clicked back, consider visiting there again when you’re finished reading this tutorial. If you’re as impressed with the way their site is put together as I am, you, or someone you know/work with, could probably benefit from Crazy Egg’s amazing click tracking visualization tools. Their prices sure make it easy to get started, so give it a consideration while you’re giving them traffic.”

“When most web designers think about css-styled link lists, the mental images that come to mind are of the trusty old horizontal and vertical navigation menus we’ve all become accustomed to building into our sites. That’s because the CSS styled unordered list has rightfully become the standard markup for site navigation. There are enough beautifully styled top, left, and right navigation blocks out there that attest to the unlimited styling potential of the unordered link list, but are we really letting them achieve their potential?”

“Creating a consistent interface for your users is a constant struggle for every application designer. Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different and almost arbitrary in what can and cannot be done. No where does this become more apparent than when you’re dealing withform elements and the biggest loser of them all in the battle for a standardized look is the infamous Submit button.”

“I recently worked on a web application that required a step menu (AKAwizard menu). This menu has a varying amount of steps, dependent upon the type of user accessing the application. Because of that requirement, I needed to write a CSS menu that could easily be changed from 5 steps to 4, 3, or 2 steps. Since the web is full of CSS menus, I thought one of this sort would be rather easy to find. I was wrong. I never really found a good example of one. So, for those of you who have looked and come up short, here’s an example.”

“This is a cool effect where the bottom of the page seems to fade out. The technique makes use of an fixed position div (bottom: 0px;) with a transparent PNG image and a high z-index value. There is also a fix in place for IE 6. Download Example“

“Quite a number of months back I released the Foliage Mod WordPress theme which included a Table of Contents (TOC) styled navigation block in the header. A recent post on ScriptyGoddess prompted me to upload the download & tutorial post straight away which is what you find here.

In as little as 8 lines of HTML, and 5 lines of CSS, the TOC Navigation block can be duplicated on your own site ready for even more styling.”

“This method is pretty simple, by just defining three over-lapping boxes, with different background colors. The elements refered from the blur and shadow classes will be appplied with greyish background colors to act as shadows.”

Tested in all major browsers:

“One minute I’m editing a web page, copying and pasting some code elements, next thing you know I have this happy accident creating a perspective effect on a body of text. I realized why it happened and decided to fool around with it here, using span elements instead.

“This is a CSS technique that could be useful if you want to give users accessible added content such as tool-tips, notifications, or alerts, without adding unnecessary clutter to your page. And since it doesn’t rely of JavaScript, it should be useful to everyone, even disabled users.

“There are several ways to make a footer stick to the bottom of a page using CSS. But until now, they’ve used long and messy hacks or a lot of extra HTML markup; this method uses only 15 lines of CSS and hardly any HTML markup. Even better, it’s completely valid CSS, and it works in all major browsers. Internet Explorer 5 and up, Firefox, Safari, Opera and more.”

“Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS. The data of tables can be boring so all the more reason that we need to attract attention to it and make it as pleasant to read as possible. Presentation and design with some basic accessibility rules in mind is the way to go.”

“Image text wrap with sandbag divs! Have you ever heard the criticisms that claim all CSS layouts look the same? Often blocky and bland, many CSS layouts do appear more than a bit uninspired. Well I say don’t blame the design tools, blame the designer. CSS offers countless presentation and page design possibilities, from simple style enhancements to complex, graphic intensive layouts. The trouble is, too many Web developers attempting their first CSS design, are still thinking with a table layout frame of mind. Unfortunately, some never leave it behind…”

“Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how.”

“Many web designers really like the idea of being able to place two or more containers, or boxes, side by side and make them be of equal height, regardless of how much content is in each box. Many designers also like to vertically center or bottom-align the contents of a container.”

“A sample image map that’s built entirely using CSS and XHTML. While I’ve added support for Javascript (item titles are simply displayed beneath the image), I’ve disabled it in this example – I’ve run into a bit of a problem when JS is enabled and CSS is disabled (more details below).

The initial idea for this came from a blog posting I read over at Gina Trappini’s blog, Scribbling.net. Her example was well done, but I wanted to attempt the same (or similar) using only CSS.

I then found a link to The Daily Kryogenix site (via Gina’s post) that led to an image map that made use of ligher DHTML, and made use of the <title> tag to display notes about a hotspot. Still, somewhat dependant on Javascript/DHTML.”

“I was recently confronted with the task of creating a two-column liquid layout with a header and footer in which the content needed to come before the sidebar in the source code. I took opportunity to demonstrate an under-used aspect of CSS: negative margins. Negative margins allow us to push the content area away from the sides of the browser, leaving room for the sidebar.”

“A few days ago I was implementing breadcrumbs in a website I’m working on. Not that I sincerely believe every site needs this, but on some occasions and to some users breadcrumbs are practical. Anyhow, it gave me the idea to write an article about it because it’s been a while since I last wrote about anything CSS-related. The one I’ll share with you is a very simple one. It uses only one simple graphic. The rest is basic CSS styling with an unordered list as HTML code.”

“Hopefully it’s fairly obvious that each date doesn’t have it’s own unique graphic. The dates are pieced together from a single graphic (css sprites!), where different smaller parts of the graphic are shown in the three different regions: day, month, and year. Perhaps you’ll recognize this from a similar technique Joost de Valk posted about nearly a year ago.”

“One of the things you run into when your blog becomes bigger, is that you need to cram more info into less space, to make it possible to display all the information you want to show. One of the things I did to do that is add an icon for the date, and then a bubble over that with the number of comments in it.”

“If CSS properties attended high school, you would never expect to see the border property sitting at the cool kids’ table. Sure, it’s a useful property and all — as long as you’re looking accentuate the boxiness of a design, right?”

Having custom styles for blockquotes is quite common among web designs, and they can add a certain appeal. Attention to this type of detail is almost necessary as a designer. This tutorial will show you how to make the popular style of blockquotes shown above.

“I know many people have wondered how to center their content both horizontally and vertically but never managed to find a solution on how to do this using CSS. I have seen people use tables to accomplish this, in this tutorial I will show you how it can be done.”

“Since I posted the huge collection of Large Background Websites, I received several email requests on how to make a large background site with CSS. So, I thought it would be a good idea to share my techniques on designing large background websites. In this tutorial, I will provide various CSS examples on how you can create a large background site using either a single or double images.”

Share It!

Kayla Knight is a 20 year old college student, part-time web developer, freelancer, and blogger. Webitect is where she spends too much of her freetime, sharing interesting finds and valuable resources. Be sure to check out her portfolio.

This is a great list. I thought you should know that some of the links on the headings are broken. I can still get to the website if I click the image.

Great list

Thank you.

Terri Lockerridge

April 13th, 2010 at 12:50 am

I keep getting this error on this page..
Error: $(“.dd_content_wrap”).offset() is null
Source File: http://webitect.net/wp-content/plugins/digg-digg/js/diggdigg.js
Line: 6
A script has stopped running and I have to turn it off to continue.. freezes up the entire computer.
Your links are broken too. I hate to complain.. but the information on the page is wonderful. But the maintenance is not.

What is Webitect?

Hi, and welcome! Webitect is a blog devoted, very simply, to producing fresh, high-quality content for web designers and developers. We do our very best to give you the tools, resources, inspiration and tutorials that you're looking for.