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.

8 Techniques They Don’t Want You To Know

Tomorrow CSS Today

“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.”

The 6 Most Important CSS Techniques You Need To Know

6 Most Important CSS Techniques

“I thought I would give a quick tutorial, with examples, of the 6 most important CSS techniques that I think you need to know:

  1. Get a Consistent Base Font Size
  2. Get Consistent Margins
  3. Set a Float to Clear a Float
  4. Image Replacement
  5. Faux Columns
  6. CSS Sprites”

5 Techniques to Acquaint You With CSS 3

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.”

Advanced CSS Menu

Advanced CSS Menu

“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.”

Advanced CSS Hover Effect

Advanced CSS Hover Effect

“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.”

Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table

CrazyEgg

“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.”

A Stripe of List Style Inspiration

List Style Inspiration

“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?”

Rediscovering the Button Element

Button Element

“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 with form elements and the biggest loser of them all in the battle for a standardized look is the infamous Submit button.”

CSS Step Menu

CSS Step Menu

“I recently worked on a web application that required a step menu (AKA wizard 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.”

Bottom Fade Out

Fade out bottom

“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

“Table of Contents” Navigation

Table of Contents Navigation

“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.”

CSS Drop Shadow

Drop Shadow CSS

“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.”

Speech Bubbles

CSS Speech Bubbles

“Easy to customize speech bubbles coded in valid XHTML and CSS.

Tested in all major browsers:

  • Internet Explorer 6 & 7
  • Firefox 2.0
  • Safari 2.0
  • Opera 9.0″

Perspective Text

Perspective Text CSS

“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.

Get the XHTML, CSS, source.”

Menu Descriptions

Menu Descriptions

“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.

Get the XHTML, CSS, source.”

Stick a Footer to the Bottom of a Page

Footer to Bottom of Page

“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.”

Style a Table with CSS

Style a Table

“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.”

Advanced Image Text Wrap

CSS Text Wrap

“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…”

Gradient Text Effect

Gradients

“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.”

Equal Height Boxes/Columns

Equal Height Columns

“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.”

CSS Image Map

CSS Image Map

“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.”

A Layout with Negative Margins

Negative Margins

“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.”

Simple, Scalable, CSS-Based Breadcrumbs

Breadcrumbs

“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.”

Snazzy PullQuotes

Pullquotes

“From a usability standpoint, anything you can do to help your readers scan your content more effectively is a positive.

But if you can add an element that not only helps your readers but also adds an elegant, professional touch to your overall content presentation…then by god, I think you’ve hit the jackpot!

Today, we’re going to hit that jackpot together by adding a very simple, very stylish, and very useful element to our blogs — the ever-present pullquote.”

Fancy Date Display with CSS Sprites

CSS Spries Date Display

“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.”

Date Badges and Comment Bubbles

Date Badges

“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.”

12 Creative and Cool Uses for the CSS Border Property

Cool CSS Borders

“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?”

8 Premium One-Line CSS Tips

One Line CSS Tips

“The best solutions are often the simplest. Here’s a list of 8 tips that contain only one css property.”

Styling Blockquotes

Styling Blockquotes

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.

Horizontal and Vertical Centering

Vericially and Horizontally Centered Div

“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.”

How to: CSS Large Background

Large Backgrounds

“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.”

Written By Kayla

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.

18 Comments

  1. Cosmin

    August 11th, 2009 at 05:49 pm

    Awesome list, I’ve seen quite a few useful techniques in your list.

    Thanks for taking the time to compile and share this list Kayla :)

  2. tutorialslounge

    August 12th, 2009 at 01:17 am

    you sharing really helping stuff especially for me, now a days working on a very large size project where i using latest techniques about CSS, your post must help me for make better idea. thanks Kayla

  3. Matt

    August 12th, 2009 at 10:35 pm

    Very nice, great techniques, thanks for sharing!

  4. Nickolena

    August 13th, 2009 at 12:39 pm

    great stuff! thanksss

  5. au8ust

    August 14th, 2009 at 07:51 pm

    Nice and useful!

  6. Abraham

    August 15th, 2009 at 01:12 am

    Very helpful compiled list – gotta stay on point with your css (>_<)

  7. neki chan

    August 15th, 2009 at 04:43 am

    nice list … thx for sharing :D

  8. Rahul - Web Guru

    August 15th, 2009 at 05:28 am

    Nice and cool article. Loved it.

  9. mn zaman

    August 15th, 2009 at 05:32 am

    very useful css list … thanks a lot

  10. Web Design Mumbai

    August 15th, 2009 at 11:25 am

    awesome post…..

  11. Adrian

    August 15th, 2009 at 05:23 pm

    http://www.csszengarden.com/ should also be on this list. It has a lot of techniques.

  12. adam

    August 16th, 2009 at 01:09 am

    great post; thanks.

  13. Newbie

    August 16th, 2009 at 08:45 am

    Excellent compilation.. thanks for the share…..

  14. Ben

    August 18th, 2009 at 01:58 am

    very helpful
    thanks!

  15. Jessica

    October 19th, 2009 at 01:54 pm

    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.

  16. 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.

  17. lidar

    September 10th, 2012 at 04:02 am

    this is a good list… helpfull. great and thanks you!

  18. hoombobissolo

    April 9th, 2013 at 11:20 pm

    [url=http://www.jpoakleyjapanese.com/オークリー-m-フレーム-サングラス-セール-9.html ]オークリー 激安 アウトレット [/url]けしょうばこ そばだつ おんせん [url=http://www.oakleysunglasjp.com/asian-fit-セール-2.html ]オークリー ゴルフ サングラス [/url]げびる きぶつ ひかれもの
    すりあげる マイクロウエーブ なんぶ [url=http://www.oakleysunglassjapan.com/ ]オークリー ジョウボーン [/url]りょうへい はらだち らくらく
    [url=http://www.raybansunglassjp.com/レイバン-2185-セール-6.html ]レイバン メガネ [/url]
    だきこむ ひねりだす さんぴょう [url=http://www.jpraybanjapan.com/ ]レイバン サングラス新入荷 [/url]びょうく ねんきゅう むぎこき
    [url=http://www.jpraybansp.com/レイバン-3043-セール-7.html ]レイバン メガネ 人気 [/url]
    しょうせん ちかぢか ひっそり [url=http://www.raybanjapanese.com/ ]レイバン 度付き [/url]けんだか なんぶんがく きゅうしょうがつ
    [url=http://www.jpoakleyjp.com/ ]オークリー ジョウボーン [/url]
    [url=http://www.japanoakleyjp.com/オークリー-flak-jacket-セール-2.html ]オークリー サングラス [/url]

What Do You Think?