Cascading Style Sheets

CSS - revolutionizing the way we make websites, cascading style sheets allow developers to globally control the styles and layout of a web page.

CSS Hacks and IE7 (#)

PIE comes out with another great CSS resource, this one to help deal with the coming Internet Explorer 7. They cover what bugs are fixed, and workarounds for getting things right.

Lean XHTML and Precise CSS (#)

Mike Rundle offers up this early Christmas present outlining the way he likes to organize his CSS. He suggests using indentation, something I have done for years and find really helps to keep your document easy to scan.

He also links to a few style sheets that he has built, and they are worth a look. His use of empty selectors in this sheet is quite a good idea. If he needs to add code, he will, but otherwise it keeps things consistent. Also notice how the indenting makes it so much easier to scan. Good stuff...

In search of the One True Layout (#)

In this lengthy article, Alex Robinson dives into building what he calls "the One True Layout": Total Layout Flexibility, Equal Height Columns and Vertical placement of elements across grids/columns.

Very well documented and explained, this is recommended reading if you are using CSS for laying out your websites.

CSS list based calendar (#)

I can see this lightweight little list based calendar layout - via css - coming in handy for something (see blog post). It couldn't get much simpler in terms of markup, even more so considering it includes showing/hiding events on rollover.

I'm certain it wouldn't be too hard to put together a little PHP to spit out a given month with the right list layout (gaps for filling out non-days at beginning and end of the month).

YUI Library CSS Tools (#)

Yahoo! Developer Network offers a set of CSS Stylesheets for building websites, including a sheet for grids, fonts, and a cross broser 'normalizer'.

While fonts.css and reset.css give you some cross browser consistency for fonts and html elements, grid.css allows a person to do some serious CSS gridding magic (see Using Special Grids, for example).

Worth consideing on their own, these bits no doubt can be extended a long way with the other tools available in the Yahoo! UI Library.

SlickMap CSS (#)

Here's a cool implementation of CSS for turning hierarchical lists into easier to understand site maps.

The general idea of SlickMap CSS is to streamline the web design process by automating the illustration of sitemaps while at the same time allowing for the predevelopment of functional HTML navigation.

CSS 2.1 selectors, Part 1 (#)

The first in a series on CSS selectors, Roger aims to hammer home the basics and uncover some of the seldom used selectors that are in existence. This looks to be shaping up into a well structured series on selectors.

css Zen Garden: The Beauty in CSS Design (#)

Dave Shea's css Zen Garden started the revolution which brought CSS to the forefront and convinced many designers to dive into this 'new' method of laying out and styling their websites.

The garden contains a great many design variations on the same piece of content, hiliting the possibilities of this new technology.

Good CSS (#)

A nice little view into optimizng CSS files for use in the Mozilla UI. There are a couple of nice little tips in this article, including this one:

If you have a style rule that has an ID selector as its key selector, don't bother also adding the tag name to the rule. IDs are unique, so you're slowing down the matching for no real reason.

Guide to Cascading Style Sheets (#)

The Web Design Group provides their guide to CSS that includes a review of structure, rules, syntax, properties and a few extra links and tutorials.

mezzoblue - CSS Problem-Solving (#)

Dave Shea shares some of his CSS problem solving methods and then Mezzoblue readers pipe in with some other good ideas.

Inheritance vs Cascade (#)

A short simple overview covering the cascade and inheritance in CSS.

How To write Efficient CSS (#)

Big John digs into writing efficient CSS, touching on border properties, inheritence, and "the clock" among other things.

Annotating images with CSS (#)

CSS only flickr style image annotation. The author provides five different options, using absolute positioning and the <a> element.

The method outlined here does not work in Internet Explorer, though the article provides additional links to DHTML methods that do.

Chapter 21 - Teach Yourself CSS in 24 Hours (#)

Chapter 21 of this book covers CSS and accessibility, including and overview of accessibility, internationalization, the WCAG guidelines and some CSS features like bi-directional text and aural stylesheets.

Ten CSS tricks you may not know (#)

Ten simple little CSS tricks that can easily be missed, like shorthand font, using a second div to apply padding and avoid box model problems and border default value.

Daily CSS Fun (#)

About a year and a couple of months before the web design world converged on the Zen Garden, Chris Casciano published "place name here meets neuralust - Daily CSS Fun" in which he swapped 19 different stylesheets onto the same html document. Linked because this is the site that started me on my path to CSS.

A great example of a CSS guide for a website. (#)

A terrific example of meticulous care and organization of the CSS for a website. This CSS style guide should be a good basis for a complex yet organized set of stylesheets. Kudos to whomever is behind it!

Demonstration of CSS Popups in action (#)

A beautiful set of all-CSS flyout navigation lists from PIE. Have a hover down through the nav level and surprise yourself! Works down to IE5 and degrades gracefully. No tutorial yet, but word is it's coming!

Stylesheets for handheld devices (#)

An excellent starting point for getting up to speed with creating stylesheets for handheld devices. A brief overview of some of the issues is provided is followed up with a series of authoritative links to articles on the topic.

A CSS styled table (#)

Veerle comes up with a great little tutorial for styling tables with CSS. Can't say that I do tables much anymore but this is a nice one to fall back on when I do!

Full CSS Property Compatibility Chart (#)

As the title says, this chart contains a listing of the CSS properties and the various browsers that we use. It indicates whether a property is safe, unsafe, or partially safe to use. Information is also provided (one click away) for each CSS property indicated.

yDSF - Robust CSS Drop Shadows (#)

Looks to be another interesting method for crating drop shadows on images with CSS. The yDSF CSS is structured for Internet Explorer (<= 6), with CSS2 selectors used for the additional attributes necessary for more capable browsers.

Digital Web Magazine - Architecting CSS (#)

Garrett Dimon digs into CSS management with Architecting CSS over at Digital Web, that offers advice and links as to how to get around some of the pitfalls that result from having larger CSS files.

CSS Tabbed Arrows (#)

Fun with CSS Tabbed Arrows, a little twist away from the tabs that we see on many sites these days...

CSS Server-side Constants (#)

An interesting CSS tool from Shaun Inman that allows for the creation of constants that can be used in a CSS file. The script grabs your constants and CSS file, replacing any references to a given constant with it's value.

Check out the Resource categories for older content

The latest from my personal website,

SiteUptime Web Site Monitoring Service

Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:

The Principles Of Successful Freelancing

I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.

The Art & Science Of JavaScript

The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.

The PHP Anthology: 101 Essential Tips, Tricks & Hacks

Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..