CSSBEAUTY is a project focused on providing its audience with a database of well designed CSS based websites from around the world.
Its purpose is to showcase designers’ work and to act as a small portal to the CSS design community.
If you are “in need of inspiration”, you have come to the right place.
Direct link: CSS Beauty
Unmatched Style is not just another CSS design gallery. We want to foster constructive design criticism as well as provide inspiration to our readers.
Unmatched Style always strives to bring inspiration to web designers across the web, from providing quality content in the form of informative articles, interviews and discussion.
Direct link: Unmatched Style
Before CSS, images were always put into Web pages with image tags. We gave them alternate alt text so they still made sense when images were turned off – it was the only way. Today, we have Cascading Style Sheets. Using CSS to add images to Web pages has been called a "vital cornerstone of all future Web design". It gives us new power to control the presentation not just of basic styles like borders, but all the images across a whole site. Fahrner Image Replacement FIR was the first widespread method of doing this, and remains the most well known. But it isn't perfect. Today I'll show you two methods that overcome its problems.
Direct link: Accessible Header Images With CSS And XHTML
This site is useful for me as a designer and I hope that it is useful for you whether you are a designer, developer, programmer, manager, or just a CSS advocate.
Direct link: CSS Vault
Ok. Let’s set the record straight. There is no official guide for each and every CSS shorthand property value. So let’s work together and put one together. Anytime I’ve ran into a specification (besides the confusing mess at the W3C), it turns into showing off a couple of examples and you’re supposed to be set on your way. Over the years, I’ve found quite some interesting unknown quirky facts about these shorthands… hence this Guide was born…
Direct link: CSS Shorthand Guide
This tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float…
Direct link: Learn CSS Positioning in Ten Steps: position static relative absolute float
Email newsletters are more popular than ever, and everyone loves to design a rich website-like newsletter for their subscribers. Unfortunately, email isn’t the web. Your beautiful design work might look great in one email client, but chances are when you look at the same work a different email client the results will not be the same.
Why? In a nutshell, some email clients are moving away from full CSS support. CSS (Cascading Style Sheets) is the technology that allows for modern, powerful, flexible website designs. Here are some guidelines for creating successful email newsletters that will look good even in the worst email clients. We don’t mention much about design, just coding practices that will succeed in all environments…
Direct link: Guidelines For Using CSS In HTML Email Newsletters
The best way to explain CSS specificity is to start with some examples. CSS specificity can get confusing. Here’s a closer look at how to calculate the actual specificity value to determine which selector takes precedence…
Direct link: Specifics on CSS Specificity
One of the differences between Internet Explorer and standards compliant Web browsers that cause a lot of trouble for CSS beginners is the CSS box model. Since the box model is what browsers use to calculate an element’s total width and height, it is quite understandable that different browsers producing different results can be both confusing and frustrating…
Direct link: Internet Explorer and the CSS box model
When they start designing with CSS instead of tables, many web designers fall into the same trap. Instead of putting tables around everything on a page, they use divs instead. The underlying design practices remain largely unchanged. This article will explain the problems with these habits and propose some practical solutions…
Direct link: Divitis: What it is and How to Avoid it