We have already posted an article with few of CSS – Techniques, but now we want to update our existing list and article for those who are not very patient with the time. If some techniques are missing please, find time and complete the list.

High CSS Techniques

CSS Dock Menu

CSS Server – side Pre-processor

Advanced CSS Menu Trick

CSS really opens the doors to a lot of powerful and rich opportunities. It is funny how such minor things can create a whole new look, feel, and effect of a site.

Advanced CSS Menu

CSS hover effect

Iconize Textlinks with CSS

Links are fun, but sometimes we don’t know where they take us. With this little CSS technique a user can identify a link by its icon.

Ask The CSS

Sangeeta wrote about a matrix she’d like to create that would give an indication of relationships among the information provided..

Vista style toolbar

Drop Shadow CSS

Digital Web Magazine

The PNG image has been widely overlooked by the web design community—and mostly for good reason. Until recently, it hasn’t been possible to take full advantage of the format and have it work reliably in all browsers.

Styling File Inputs with CSS

The file input is given a class of file and wrapped in an element with a class of cabinet. (The type of wrapper element and actual class names are not set in stone and can be changed via properties of the SI.Files object to avoid conflicts as necessary.)

Silverback.app

CSS: Menu Description

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.

CSS: Double lists

How to make sexy buttons with CSS

CSS- Recipe for Succes

List Expander

CSS SiteMAp

A Savvy Approach to Copyright

As a photographer, I’m outraged when people grab photos off the web and use them without consideration of copyright. I’ve been fighting this “It’s on the internet, so it must be free!” ignorance for more than a decade.

Creating a table with dynamically highlighted columns

Particletree

A CSS styled table version

CSSplay

Mike’s Experience

CSS Pull Quotes

How to Style an A to Z Index with CSS

CSS Speech Bubbles

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

Simple Round CSS Links

A Stripe of List

CSS Step Menu

The site’s focal point is a blog (Web log) in which I reflect on Web development, Web standards, CSS, XHTML, CMS’s, site optimization, PHP, MySQL, Macromedia Flash, accessibility, information architecture, visual design, interaction design, and information design.

Digg- like navigation bar using CSS

This tutorial explains how to design a digg-like navigation bar using a liquid design with rounded corners for links.

Rediscovering the 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.

Menu circular en CSS

Better Ordered Lists

If you set up a loop, or are already within an existing loop (think WordPress comments), the possibility for cool numbered lists presents itself. Just set up an integer variable in PHP that increments itself while the loop is running..

Dynamic CSS

Rails provides many built-in mime types that you can generate in your application. Unfortunately, CSS was forgotten!

Scrollovers – A New Way of Linking

Scrollovers are a way to quickly and easily add flair to your web pages, giving your users an experience they weren’t expecting.

How to create a “Table of Contents”

A recent post on ScriptyGoddess prompted me to upload the download & tutorial post straight away which is what you find here:

Awesome JavaScript CSS Menu

More Techniques

CSS Tools: Reset CSS

Time Sensitive CSS Switcher

CSS Switcher that changes styles in a day..

Create Resizable Images With CSS

CSS Transparency Settings

The following article is presenting you CSS ideas, tricks, methods, tips and coding solution. For developing projects we add few basic techniques, but which can be very useful when you are in rush. The result of the article is a sum up that might help you in your CSS coding.

1. Workflow: Debugging

It is important to check for closed elements when debugging “If you ever get frustrated because it seemed like you changed one minor thing, only to have your beautiful holy-grail layout break, it might be because of an unclosed elements.” [Scott.org]

To identify containers add border.” “Use plenty of test styles like extra borders or background colors when building your documents or debugging layout issues. div { border:1px red dashed; } works like a charm. There are also [bookmarklets that apply borders] and do other things for you.”You can also use * div{ border: 1px solid #ff0000; }. [Chric Casciano]. To specific elements you can add a border, that might help to identify overlap and extra white space that might not otherwise be obvious. [CSS Crib Sheet].

1.1 Workflow: Resources

Tips and Tricks. For having a great success in your developing work, start and have time to learn from other’s experience. An HTML site’s source are easy to be seen. You can see how specialists have made hard work to their and then apply to your site. [20 pro tips]

Start and experiment in CSS.“Play. Play with background images. Play with floats.” [Play with positive and negative margins]. Cascading and inheritance rules. [Casciano ]

1.2 Workflow: Star the Work

It is important to have close a CSS classes library. It can be sometimes very helpful for debugging, but can be avoid in release version. Multiple class names can be use ( <p class = “floatLeft alignLeft width75″>…</p>), and try use this to debug your markup. [Richard K. Miller]

When you have made your design, you can start a blank page of content.”Under this rule, there are a number of subrules: if there isn’t a point to adding a CSS property, don’t add it; if you’re not sure why you’re adding a CSS property, don’t add; and if you feel like you’ve added the same property in lots of places, figure out how to add it in only one place (ie. this happens for font, color, background-color, font-size, and width properties all the time.” [CSSing]

Master Styleshee.“One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser…” [CSS Techniques ], [10CSS Tips]

Very Important is to Reset the CSS-style first.” The simple technique of resetting all margins and padding that I mentioned almost a fortnight ago has recently created far more discussion than any previous journal entry. After reading some differing opinions via the original post’s comments, email and the WSG list I think it would be appropriate to take a closer look and cover these points in some detail.” [Global White Space]

1.3 Keep the CSS clean

Flags for your CSS-style. “Working with CSS on my own site’s redesign, freelance work, and my job made me start thinking about the best way to standardize and organize the way I write my CSS. So, I proposed the question to my 9rules friends to collect the best tips from the best designers.” [5 Tips for Organizing Your CSS]

Try and have a table with content to organize your CSS. Cristal as day light, make at the top of your CSS document a table of contents. Outline different aspects that the CSS document is styling. And a section break to separate the areas would be indicated. [5 Steps to CSS Heaven]

Master style sheet to have an organized CSS-style. The CSS can be modeled with the help of the site. Have in mind a master style sheet to start. And the next step is to import in the style sheet your reset.css, flash.css, global.css and obvious structure.css .

Have the style sheet in separate blocks.” I break down my style sheet into three separate blocks. The first is straight element declarations. Change the body, some links styles, some header styles, reset margins and padding on forms, and so on. This is usually a small block as I only like to redefine what I need to. No global margin and padding reset for me. I clear the body and form and maybe adjust paragraph if the design really needs it…don’t have any rules..” [Top CSS Tips]

Move the codes into blocks.“This might be common sense to some of you but sometimes I look at CSS and it’s not broken down into “sections.” It’s easy to do an it makes working with code weeks, months, or years later much easier. You’ll have an easier time finding classes and elements that you need to change..” [CSS tips and tricks]

Have the properties alphabetically, in your CSS-styles. “I don’t know where I got the idea, but I have been alphabetizing my CSS properties for months now, and believe it or not, it makes specific properties much easier to find.”[CSS techniques I use all the time]

1.4 Workflow: Selectors, Classes, IDs,Properties to Handle with

Conatiners to minimum. “Save your document from structural bloat. New developers will use many div’s similar to table cells to achieve layout. Take advantage of the many structural elements to achieve layout. Do not add more div’s. Consider all options before adding additional wrappers (div’s) to achieve an effect when using a little nifty CSS can get you that same desired effect. ” [Pop Art]

Level to properties to minimum.“Under this rule, there are a number of subrules: if there isn’t a point to adding a CSS property, don’t add it; if you’re not sure why you’re adding a CSS property, don’t add; and if you feel like you’ve added the same property in lots of places, figure out how to add it in only one place (ie. this happens for font, color, background-color, font-size, and width properties all the time).” [10CSS tips]

Selectors to minim. “Just specify the minimum number of selectors necessary for the style. If you find yourself doing ul li {...} or table tr td {...} then you’re being more verbose than you need. LI’s will inevitably be in UL’s (okay, I suppose they could find themselves in OL’s, in which case, be more specific for those styles) and a TD will inevitably be in a TR and a TABLE.” [Top CSS Tips ]

Separate single properties that are reuse a lot. ” If you find yourself using a single property a lot, isolate it to save yourself repeating it over and over again and also enabling you to change the display of all parts of the site that use it.” [5 Steps to CSS]

ID’s should be named to their semantics.“So, now that we’re keeping our hooks to a minimum, it’s time for our next step in quality over quantity: naming. We want to avoid names that imply presentational aspects. Otherwise, if we name something right-col, it’s entirely possible that the CSS would change and our “right-col” would end up actually being displayed on the left side of our page. ..” [Digital Web Magazine ]

Apply to utility tags: <small>, <strong>. “After reading “5 Steps To CSS Heaven” over at pingmag.jp, and disagreeing with some of what was said I thought that writing this would be appropriate. I’ve been writing CSS professionally now for about 2.5 years so here are 5 quick tips that help me out in my day to day work. […] [Business ]

Multiple selectors with CSS declaration.“Not using descendant selectors is one of the most common examples of inefficient CSS I see from novice CSS authors. Descendant selectors can help you eliminate many class attributes from your markup and make your CSS selectors much more efficient.” [Roger Johanson]

Usual naming for the system. “Having a naming system for id’s and classes saves you a lot of time when looking for bugs, or updating your document. Especially in large CSS documents, things can get a big confusing quickly if your names are all different. I recommend using a parent_child pattern. The parent would be the containing element.” [Christopher Scott]
For developmen use CSS Constants. “While CSS constants are a real help to developers, they can also be used to add new functionality to your applications. As with the email address example that I used at the beginning of this article, using a combination of CSS and server-side scripting you could enable a site administrator to select the colours for a new theme to be used on a page of a content managed site. By using constants you need only give them the option to change certain parts of the CSS and not upload a whole different CSS file, which could lead to some interesting results!” [24ways ]

1.5 Workflow: Short notation

Padding or border, element’s margin must be define in TrouBled-order: Bottom, Left, Top, Right. “When starting out with CSS, it’s common to make the mistake of using unnecessary XHTML elements, superfluous classes, and extra <div> elements. This doesn’t necessarily mean that the code will be invalid, but it counteracts one of the reasons of separating structure from presentation; to get simpler, cleaner markup. ” [Developing With Web Standards ]

Have a small hexadecimal notation.“When CSS is used with XHTML, element names in selectors are case sensitive. To avoid getting caught by this I recommend always using lowercase for element names in CSS selectors.” [Tips and tricks]

Name your pseudo classes for urls in Love/Hate order:“While it’s always possible that you have a stupid browser– that’s not really for me to say– it is more often the case that the styles have simply been written in the wrong order. To ensure that you see your various link styles, you’re best off putting your styles in the order “link-visited-hover-active”, or “LVHA” for short. ”

Use shorthand properties. “Using shorthand for these properties can save a lot of space.”[Efficient CSS]

1.6 Workflow: Set the Typography

The html element set it up to 100.01%.” In Listing 16 we have added a default font-size of 100.01%. Once we have set this base size it is easy to make adjustments by scaling off it for each of our individual elements. We might declare a p element to have a font size of 80%, this would be 80% of the value declared on the body element. Similarly we may declare a font size of 135% for an h1 element, this would again scale off the default setting on the body..” [GettingbInto Good Coding]

For line height use 1.4em-1.6em.“I have stuck to some basic but highly important initial settings for text; “line-height:1.4” for readable lines, reasonable line-lengths that avoid lines much longer than 10 words, and colors that provide contrast without being too far apart. For example, pure black on pure white is often too strong for bright CRT displays, so I try to go with an off-white (#fafafa is a good one) and a dark gray (#333333, another good one). ” [CSS Techniques ]

Set font-size on body-tag with 62.5%, so you will work with Em’s as with px’s.“Sacrilege, I know. There are perfectly good ways to get consistent font sizing and I really should use them but Internet Explorer is the only browser that I can think of that doesn’t resize text. If the majority of your audience uses IE, then be nice to them and don’t use pixels. Otherwise, I figure with IE7 supporting it, pixels are the new ems.” [Top CSS Tips ]

Have your text in small-caps automatically. Font-variant is being used to display in a small – caps font, so the lower case letters are converted to upprecase letters.

Define generic font-families.“When we declare a specific font to be used within our design, we are doing so in the hope that the user will have that font installed on their system. If they don’t have the font on their system, then they won’t see it, simple as that. What we need to do is reference fonts that the user will likely have on their machine, such as the ones in the font-family property below. It is important that we finish the list with a generic font type. ” [CSS:Getting into Good Coding]

Modify the capitalisation with CSS.“If you need something written in capitals, such as a headline, rather than rewriting the copy, let CSS do the donkey work. The following code will transform all text with an h1 attribute into all capitals, regardless of format. h1 { text-transform: uppercase; }” [20 pro tips]

For encoding use universal Characters.“..The answer is to use a single universal character set that’s able to cover most eventualities. Luckily one exists: UTF-8, which is based on Unicode. Unicode is an industry standard that’s designed to enable text and symbols from all languages to be consistently represented and manipulated by computers. UTF- 8 is rapidly becoming the charset definition of choice, and should be included in your web page’s..” [20 pro tips ]

2. Technical Informations : IDs, Classes

For a given element is possible to assign multiple class names. “You can assign multiple class names to an element. This allows you to write several rules that define different properties, and only apply them as needed. Let’s assume you’re marking up an image gallery that contains some images that are royalty free and some that are not.” [CSS tips and tricks]

Names selectors – case sensitive. “When CSS is used with XHTML, element names in selectors are case sensitive. To avoid getting caught by this I recommend always using lowercase for element names in CSS selectors…”[Roger Johansson]

Many classes per page.““Check your IDs: Only one element in a document can have a certain value for the id attribute, while any number of elements can share the same class name. [..] Class and id names can only consist of the characters [A-Za-z0-9] and hyphen (-), and they cannot start with a hyphen or a digit (see CSS2 syntax and basic data types).” [Developing with Web standards]

2.1 Technical Info: The power of selectors

Selector matches all, elements which has all attribute :

When there are more selectors they can be used in the same selector. So, several different attributes can be match for the same element.

All div elements are being match by the selector that has a class attribute withe the error value :

There are allows adjacent sibling selectors. “A descendant selector is made up of two or more simple selectors separated by whitespace. It matches elements that are descendants of an element that matches the first simple selector.” [CSS 2.1 selectors]

Child selectors are allow.“A child selector targets an immediate child of a certain element. A child selector consists of two or more selectors separated by a greater than sign, “>”. The parent goes to the left of the “>”, and whitespace is allowed around the combinator. ” [CSS 2.1 selectors]

USE Attribute selectors. These are matching elements based on value or presence of attributes. There are more ways to match attribute selector:

2.2 Technical Info: CSS-Technicals

Align vertically with CSS. “Vertically aligning with tables was a doddle. To make cell content line up in the middle of a cell you would use vertical-align: middle. This doesn’t really work with a CSS layout. Say you have a navigation menu item whose height is assigned 2em and you insert this vertical align command into the CSS rule. It basically won’t make a difference and the text will be pushed to the top of the box…” [Ten CSS tricks ]

For a dynamically content use pseudo-elements and classes. “Pseudo-classes and pseudo-elements can be used to format elements based on information that is not available in the document tree. For example, there is no element that refers to the first line of a paragraph or the first letter of an element’s text content. ” [Pseudo-classes]

Have columns with equal heights with CSS.” Because equal height columns are a perfectly reasonable design goal. And the even more astute disciple will be nodding sagely, ruminating over the problems that flow from faux columns.” [Equal Height Columns]

For separating post nice set <hr>. “Restyling the horizontal rule (<hr>) with an image can be a beautiful addition to a web page .” [CSS Best Practice]

For centering horizontally the layout, use margin : 0 auto.

To padding set width OR margin.“My rule of thumb is, if I set a width, I don’t set margin or padding. Likewise, if I’m setting a margin or padding, I don’t set a width. Dealing with the box model can be such a pain, especially if you’re dealing with percentages. Therefore, I set the width on the containers and then set margin and padding on the elements within them. Everything usually turns out swimmingly. ” [Padding set width]

Do not apply padding/borders and fixed width to an element. “IE5 gets the box model wrong, which really makes a mess of things. There are ways around this, but it’s best to side-step the issue by applying the padding to the parent element instead of the child that gets a fixed-width. ” [Not apply padding ]

Print style. Add print stylesheet in the same way you add regular to your page.

For every page – use the same navigation (X)HTML.” Most Websites highlight the navigation item relating to each user’s location within the Website, to help users orientate themselves. This is a fundamental requirement for basic usability, but it can be a pain: we need to tweak the HTML code behind the navigation for each and every page. Can we have the best of both worlds? Is it possible to have the navigation highlighted on every page, without having to tweak the HTML code on every page?..” [My Top Ten CSS]

Insert an id into the <body> tag..

From older browsers hide your CSS. “As I stated in my recent article on CSS shorthand properties, I get a lot of questions about CSS from people who haven’t spent quite as much time working with CSS as I have. ” [CSS tips and tricks]

CSS-styling to RSS-feeds adds. “You can do a lot more with an XSL stylesheet (turn links into clickable links, etc), but CSS can make your feed look much less scary for the non-technical crowd. And the good news is you probably already know CSS, so setting one up is trivial…” [Adding a CSS Styling ]

2.3 Technical Info: IE

min-width and max-width can be define in IE.

Transparance to PNGs trough IE. “However, with GIF files this only worked on a background of a static color, because you have to decide beforehand into which color you want to blend those pixels. In theory, PNG files do support varied levels of transparency; however, an Internet Explorer 6 bug prevents this from working cross-browser ..”
[CSS Tips ]

ReSources

Handy CSS – Lachy’s

CSS Crib Sheet – Dave Shea

10 Quick Tips for an Easier CSS Life - Paul OB

CSS Organization -  Douglas Bowman

15 CSS Properties You Probably never use -  SeoMoz

Top CSS Tips – Snook

Web Design References - Laura.b

Ten CSS Tricks – Tantek.C

CSS Forms

The Form Garden

A CSS Stylesheets collection..

Form Layout

Resource blog..by Richard Rutter..

Table – less Forms

CSS Forms Editor..

Styling controls

Styling form controls..

CSS Layouts

Three Column Layouts

Css-discuss..

CSS Template

More CSS Templates..

Open Web Design

Free web design..

Flexi Floats

CSS layouts..Header, Footer, Fluid Center..

Open Source Web design

Is a site to download free web design templates and share yours with others. We help make the internet a prettier place..

Layouta Gala

CSS layouts using techniques like negative margins, any order columns and in some case opposite floats. .

Zen Garden

More layouts..

Multicolumn Layout

Poly layout..

CSS Layouts

CSS Layout Techniques..

Look Ma No Tables

Techniques for CSS..

Sample CSS Page Layouts

Here are a range of CSS page layouts, including 2 column and 3 column layouts – free to use and abuse as needed..

CSS Tables

Zebra Tables

In large tables it’s often hard to focus on one row, making it hard to extract data from the table.

Pure CSS Scrollable

Using CSS to allow scrolling within a single HTML table

CSS Table Gallery

Tables and Cascading Style Sheets..

CSS Diagrams, Bar Graphs, Star Rater

CSS Star Rating

CSS Star Rating ..

CSS For Bar Graphs

Having a working knowledge of XHTML and CSS when developing applications is a big help in knowing what can be done client-side and what should be generated server-side…

CSS Ratings Selector

Create a star rater..

Super Simple CSS bars

CSS codes..by Tobias Lütke..

CSS Diagrams

Things to do with CSS when you are bored at work..

Dynamic Pie Chart with CSS

” This is an example of creating a semi-dynamic pie chart without the use of server-side imaging libraries”..

Lightboxes

Lightbox 2

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers..

Leightbox

More cSS boxes..

ThickBox

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library..

Suckerfish Hoverlightbox

“From time to time I come across some truly impressive techniques that are a great blend of CSS, XHTML, and sometimes JavaScript.”

Lighbox Gone Wild

More Lighbox for users..

Cool Online

Useful script to display an image on the page..

Tutorials

CSS TUTORIAL

CSS is an excellent addition to plain HTML..

CSS Advanced Tutorial

The CSS Advanced Tutorial is for those who want to push CSS to the extreme, highlighting methods that might not be immediately obvious to the intermediate developer..

Listutorial : Step by step CSS list tutorial

Listutorial takes you through the basics of building background image lists, rollover lists, nested lists and horizontal lists..

Making Complex CSS Simple

Making simple work from CSS..

Advanced CSS Layouts

By Rogelio Vizcaino Lizaola and Andy King..

Selectutorial

Selectors are one of the most important aspects of CSS as they are used to “select” elements on an HTML page so that they can be styled..

CSS Menu Tutorial

CSS Design, Style and Fun..

CSS Basic

Cascading Style Sheets Easy for everybody..

Css Tutorial

CSS for controlling the style and layout..

CSS Intermediate Tutorial

Like the HTML Intermediate Tutorial, this CSS Intermediate Guide should not be that difficult, but rather build on the basics of the CSS Beginner Tutorial..

Learn CSS Positioning in Ten Steps

This tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float..

CSS Beginner Tutorial

The CSS Beginner Tutorial assumes that you know as much about CSS..

Online Tutorials

The House of Style has several cascading style sheets tutorials, with explanations, excercises and worked examples to get you up and running with style sheets as quickly as possible..

CSS and HTML examples

“This is a growing collection of CSS and HTML examples I’ve written. Feel free to use the source described in these pages.”

Style Master CSS Tutorial

This tutorial teaches CSS using both hand-coding..

Stylesheets

Cascading Style Sheets are now the standard way to define the presentation of your HTML pages..

CSS Tooltips

Sweet Titles Finalized

JavaScript Tooltips

Bubble Tooltips

Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page..

qTip

You can specify any HTML tag as your preferred element..

CSS Lists, Navigation, Menus,

Free CSS Navigation Menu

These eleven CSS navigation menus are created using the Sliding Doors technique, and will even work in everyone’s favorite browser Internet Explorer..

FreeStyle Menus

This is an XHTML compliant, CSS-formatted menu script, designed to work with the current generation of standards-based websites..

CSS Based Navigation

CSS menus..

Mini Slide Navigation

Stephen Clark.

Free Vertical CSS Menus

14 Free Vertical CSS Menu..

Turning Lists into Trees

Multi-level unordered list in the form..

CSS Menu Generator

CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based..

Suckerfish Dropdowns

CSS generator..

Max Design

Ready example showing how to make a folder analalogy..

Free Menu Designs

Free Menu Designs..

Alsacreation

Here is a gallery of CSS web menus created with CSS style sheets and without tables..

Tabs

CSS to build a tabbed display..

More free CSS Navigation

CSS Navigation Menu Designs at ExplodingBoy ..

Fast Roolovers

When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results)..

CSS Tab Designer

CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required..

Accessible Image

Accessible Image-Tab Rollovers..

Flexible navigation Example

The navigation bar shown here is achieved via 3 images, a bit of CSS and some JavaScript..

CSSplay

CSSplay..

Articles

Exploring Footers

One of the nice things about old-school table layout methods is that they enable you to create liquid page designs very easily..

CSS standards

Cascading Style Sheets (CSS) are there to define the look and feel of one or several (x)HTML documents..

Liquid Faux Columns

One of the most frequent layout issues that new CSS developers want to tackle is equal height columns..

Make better Web pages

Understand CSS model..

CSS Hacks and IE7

A discussion of the theory of CSS floating..

In search of the One True Layout

Pure CSS-based layouts have come a long way but they still have shortcomings..

Div Mania

More and more web documents are appearing that consist of nothing more than a collection of div elements..

Vertical Centering in CSS

Though there is a CSS property vertical-align, it doesn’t work like attribute valign in HTML tables..

CSS Frames

Create the visual effect of HTML frames with CSS and make the scrolling area stretch to 100 % height regardless of the amount of content..

CodeProject

Ten CSS tricks you may not know

Effective Style

The most important thing being delivered from any Web site is the content..

Common CSS Markup

The Elementary Group Standards..

Miscellaneous

CSSplay

Cascading Style Sheets..

Architecting CSS

CSS is to devise a plan for organizing files..

Stylish

Stylish allows easy management of user styles..

Dynamic Drive CSS Library

Here you’ll find original, practical CSS codes and examples such as CSS menus to give your site a visual boast..

CSS Advanced Tutorial

The CSS Advanced Tutorial is for those who want to push CSS to the extreme..

 CSS tests and experiments

Floats, Containers, margins..any many others..

CSS Organization

CSS Tips..

X-Ray

The X-Ray extension let’s you see the tags on a page without viewing the sourcecode..

CSS Panic Guide

This is not a complete resource, this is a fast resource. .

Dr. Web Weblog

CSS and Design Showcases..

Beginner’s guide from a seasoned CSS

Authentic CSS..

CSS Galleries

Web Creme

Design Inspiration..

Screenfluent

Big collection of screendesigns..

CSS Reboot

CSS Reboot..

Webdesignbook.net

Webdesign reference book..

Well Designed Weblogs

Well-Designed Weblogs series ..

CSS Liquid

No Resolution is the only site dedicated to fluid and elastic design with CSS..

Tips & Tricks

Image Preloader

Click this..

CSS Browser Selector

Trick to help you with your CSS hacks..

Liquid Round Corners

Multifunctional flexible css-concept with transparency for creating dynamically changing not rectangular borders..

Pure CSS Popups

E. Mayer..

CSS Drop Shadow

Drop shadows. Love ‘em or hate ‘em, we can’t get away from them..

A List Apart

A more accessible map..

CSS Filters

CSS hacks..

CSS – Schieberegler

A Slider with CSS..