Invasion of the Body Switchers

How style-sheet switching could be extended to give users even more choices or accessibility enhancements.

Clarke, Andy and James Edwards. List Apart, A (2004). Design>Web Design>CSS

Keeping Your Elements' Kids in Line with Offspring

CSS selectors are handy things. They make coding CSS easier, sure, but they can also help keep your markup clean.

Bischoff, Alex. List Apart, A (2008). Articles>Web Design>Standards>CSS

Layout Gala

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

Layout Gala (2005). Design>Web Design>CSS

Linking Style Sheets to HTML

There are many ways to link style sheets to HTML, each carrying its own advantages and disadvantages. New HTML elements and attributes have been introduced to allow easy incorporation of style sheets into HTML documents.

Web Design Group, The (2000). Design>Web Design>CSS

Making Compact Forms More Accessible

Space constraints can put the squeeze on accessibility and usability. Mike Brittain shares his method for making itty-bitty forms more accessible and easier to use.

Brittain, Mike. List Apart, A (2006). Design>Web Design>CSS>Forms

MAX-WIDTH and Flexible Layout with Short Lines

It is now possible to make flexible layout with user-friendly short lines that adapt to screen resolution, to width of browser window, and to font-size chosen by the user. This could be a new beginning for more accessible and usable web pages.

Tverskov, Jesper. Smack the Mouse (2003). Design>Web Design>User Interface>CSS

Mo' Betta Rollovers

For years we’ve been preloading our on–state images to assist the browser in its rollover presentation. Preloading increases the weight of the initial download, but adds to usability by decreasing the wait time for an on–state image to appear. Decreases, but may not eliminate. Even when preloaded, some browsers present momentary pauses prior to rendering the image. Besides being annoying, this momentary pause can cause problems when a visitor mouses over an element in passing or too rapidly. If the mouse movement is too fast, the browser does not have time to render the image and, worst–case scenario, can present you with a broken image icon.

Murtaugh, Tim. List Apart, A (2002). Design>Web Design>CSS>DHTML

Modifying Styles

With the release of W3 compliant browsers however, we now have the ability to change styles on the fly from JavaScript, using the W3C DOM. Unfortunately, due to a distinction between the way that embedded and remote stylesheet properties are exposed as opposed to the way that inline STYLE properties are exposed, this can be tricky.

Apple Inc. (2006). Design>Web Design>CSS>DHTML

Modular CSS

This isn't a new idea but looking at people's code it doesn't seem to be a particularly widely used practice: modular CSS. That's a poncy name for the very simple idea of grouping related styles into separate stylesheets. The same set of tasks turn up on project after project and a little careful thought can save hours of foundation work, allowing you to get on with the serious business of turning a flat design into a web page far more quickly.

Stenhouse, Mike. Content with Style (2005). Design>Web Design>CSS

A More Accessible Map

Is there a way to display text-based data on a map, keeping it accessible, useful and visually attractive? Yes: using an accessible CSS-based map in which the underlying map data is separated from the visual layout.

Duffey, Seth. List Apart, A (2006). Design>Web Design>Accessibility>CSS

Mountaintop Corners

Most of us have experience creating 'rounded' corners by erasing pixels. It’s a rudimentary web design technique — or so we always thought. But in the hands of Dan Cederholm, author of Web Standards Solutions, this seemingly simple technique paves the way for boxes and borders that can change sizes and colors at your whim.

Cederholm, Dan. List Apart, A (2004). Design>Web Design>CSS

Multi-Column Layouts Climb Out of the Box

A project I recently worked on required an elastic layout with two columns of equal height, each with a different background color. As usual, there was no way to tell which column would be taller. I immediately thought of Dan Cederholm's Faux Columns, but I needed an elastic layout. I also looked at the One True Layout, but this seemed buggy and required too much extra markup and too many hacks for my taste.

Pearce, Alan. List Apart, A (2007). Design>Web Design>Document Design>CSS

New CSS Commands for Internet Explorer 7

Internet Explorer 7 now supports a number of new CSS commands - find out what these are and how to use them.

Moss, Trenton. Webcredible (2007). Design>Web Design>CSS

Night of the Image Map

CSS design from beyond the grave: all the secret ingredients you’ll need to resurrect the image map using CSS and structurally sensible XHTML.

Robertson, Stuart. List Apart, A (2003). Design>Web Design>Interactive>CSS

Old Dog Learns Stylesheets

Heidi shares the stylesheet wisdom you need to drag your site into the CSS century.

Pollock, Heidi. Webmonkey (2003). Design>Web Design>CSS

Onion Skinned Drop Shadows

Animators use onion skinning to render a snapshot of motion across time. Now, web designers can use this technique to create the truly extensible CSS-based drop shadow.

Williams, Brian. List Apart, A (2004). Design>Web Design>CSS

Pay Attention to the CSS @media Rule: When to Define the Screen Media Type

The CSS @media rule is a useful way to target an HTML or XML document to an intended output device. Use of the print media is now fairly widespread, and provides a much cleaner means of creating printer-friendly pages than does a separate 'printable version.' The use of the screen media has been somewhat underused, perhaps because of an overly general assumption that screen is merely the 'default rendering.' However, in regard to positioning--especially absolute positioning--the screen media type has an important meaning that is not covered by media-free stylesheet rules.

Mertz, David. IBM (2007). Design>Web Design>CSS

Playing Nice with the Other CSS Kids

Over the years I've had the privilege of working on some very large web standards projects in small teams of other CSS/XHTML developers, but I've also spent a lot of time building little sites on my own for smaller clients. Maintenance on a small project involves being able to understand your own code when you come back to it months later. On larger projects it means your team mates being able to understand and edit your code as quickly and efficiently as possible at any point in the future. It's a far more complicated objective.

Stenhouse, Mike. Content with Style (2006). Design>Web Design>CSS

PNG Drop Shadows

This article will describe a modification to existing drop shadow methods, employing semi-transparent .png's. Therefore the method is meant for use in in IE7 and the other modern browsers, but not in IE6 and below, which do not correctly display such .png's.

Bergevin, Holly and John Gallant. Position is Everything (2006). Design>Web Design>CSS

Pocket-Sized Design: Taking Your Website to the Small Screen

Among the many websites that are out there, few are standards-compliant. Among those few, only a handful sport style sheets adjusted to the needs of handheld devices. Of those which do offer styling for handhelds, not all will fit the smallest, lowest-resolution screens without presenting the user with the ultimate handheld horror: namely, horizontal scrolling.

Etemad, Elika and Jorunn D. Newth. List Apart, A (2004). Design>Web Design>CSS>PDA