Topics: Code: CSS
Using Cascading Style Sheets (CSS) as part of standards-based web design. Separating presentation from structure and behavior. CSS layout techniques, tips, and tricks. Crafting a print style sheet. Spruced-up site maps, CSS drop-downs, zoom layouts, cross-column pull-outs. Emulating print design, Flash, PDF, and table layouts. Style sheet switching for user customization, accessibility, and creative purposes. Pocket-sized design: taking your website to the small screen. Faux backgrounds, sliding doors, CSS sprites. CSS support; browser bugs and workarounds. Showing and hiding elements, replacing text with images. Fixed and liquid layouts. See also typography. (117 articles)
Dive into Responsive Prototyping with Foundation
by Jonathan Smiley
Issue 348April 10, 2012
There are hundreds of devices out there right now that can access the full web, as Steve Jobs once put it. They come with different capabilities and constraints, things like input style or screen size, resolution, and form. With all these devices set to overtake traditional desktop computers for web traffic next year, we need tools to help us build responsively. Jonathan Smiley shows how to dive into responsive design using Foundation, a light front-end framework that helps you rapidly build prototypes and production sites.
The Vendor Prefix Predicament: ALA’s Eric Meyer Interviews Tantek Çelik
by Eric Meyer, Tantek Çelik
Issue 344February 14, 2012
During a public meeting of the W3C CSS Working Group, Mozilla web standards lead Tantek Çelik precipitated a crisis in Web Standards Land when he complained about developers who misunderstand and abuse vendor prefixes by only supporting WebKit’s, thereby creating a browser monoculture. Tantek’s proposed solution—having Mozilla pretend to be WebKit—inflamed many in the standards community, especially when representatives from Opera and Microsoft immediately agreed about the problem and announced similar plans to Mozilla’s. To get to the bottom of the new big brouhaha, exclusively for A List Apart, our Eric Meyer interviews Tantek on Mozilla’s controversial plan to support -webkit- prefixed properties.
Every Time You Call a Proprietary Feature “CSS3,” a Kitten Dies
by Lea Verou
Issue 344February 14, 2012
Any -webkit- feature that doesn’t exist in a specification (not even an Editor’s draft) is not CSS3. Yes, they are commonly evangelized as such, but they are not part of CSS at all. This distinction is not nitpicking. It’s important because it encourages certain vendors to circumvent the standards process, implement whatever they come up with in WebKit, then evangelize it to developers as the best thing since sliced bread. In our eagerness to use the new bling, we often forget how many people fought in the past decade to enable us to write code without forks and hacks and expect it to work interoperably. Lea Verou explains why single-vendor solutions are not the same as standards and not healthy for your professional practice or the future of the web.
Building Twitter Bootstrap
by Mark Otto
Issue 342January 17, 2012
Bootstrap is an open-source front-end toolkit created to help designers and developers quickly and efficiently build great stuff online. Its goal is to provide a refined, well-documented, and extensive library of flexible design components created with HTML, CSS, and JavaScript for others to build and innovate on. Today, it has grown to include dozens of components and has become the most popular project on GitHub, with more than 13,000 watchers and 2,000 forks. Mark Otto, the co-creator of Bootstrap, sheds light on how and why Bootstrap was made, the processes used to create it, and how it has grown as a design system.
Getting Started with Sass
by David Demaree
Issue 340November 29, 2011
CSS’ simplicity has always been one of its most welcome features. But as our sites and apps get bigger and become more complex, and target a wider range of devices and screen sizes, this simplicity—so welcome as we first started to move away from font tags and table-based layouts—has become a liability. Fortunately, a few years ago developers Hampton Catlin and Nathan Weizenbaum created a new style sheet syntax with features to help make our increasingly complex CSS easier to write and manage—and then used a preprocessor to translate the new smart syntax into the old, dumb CSS that browsers understand. Learn how Sass (“syntactically awesome style sheets”) can help simplify the creation, updating, and maintenance of powerful sites and apps.
CSS3 Bling in the Real World
by Chris Mills
Issue 331July 26, 2011
It’s here, it’s queer, get used to it! CSS3 is fun and fabulous, and if we design with progressive enhancement in mind, we can add all kinds of CSS wizardry to our websites and applications without worrying about how things work (or don’t) in old browsers and outdated devices. But what happens if our audience includes folks who use non-Webkit-powered phones? And what if our clients still believe a web page is supposed to look and work the same in every device? Learn to make CSS3 yumminess as cross-browser as possible.
CSS Floats 101
by Noah Stokes
Issue 325March 8, 2011
The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. Tragically, it can also cause frustration and confusion if you don’t fully understand how it works. Test or refresh your knowledge as Noah Stokes explores float theory and behavior, and guides us through common float-related coding pitfalls.
CSS Positioning 101
by Noah Stokes
Issue 318November 16, 2010
If you’re a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. Designer slash developer Noah Stokes scrutinizes the CSS position property to show how you can use it to create standards-compliant, table-free CSS layouts. Test or refresh your knowledge of static, relative, absolute, fixed, and inherited positioning, and how they work together to create any web layout the mind can conceive.
Understanding CSS3 Transitions
by Dan Cederholm
Issue 318November 16, 2010
From advanced selectors to generated content to the triumphant return of web fonts, and from gradients, shadows, and rounded corners to full-blown animations, CSS3 is a universe of creative possibilities. No one can better guide you through these galaxies than world-renowned designer, author, and CSS superstar Dan Cederholm of SimpleBits and Dribbble fame. We are delighted to present an excerpt from his new book (and the second publication from A Book Apart), CSS3 For Web Designers.
Forward Thinking Form Validation
by Ryan Seddon
Issue 314September 21, 2010
When users complete a form to buy your product or sign up for your service, you want to reduce mistakes and guide them to success. Now, with HTML5 form input types and attributes, you can set validation constraints to check user input. With CSS3’s new UI pseudo-classes, you can style validation states to make form completion quick and effortless.
Apps vs. the Web
by Craig Hockenberry
Issue 312August 17, 2010
There's an app for that, and you're the folks who are creating it. But should you design a web-based application, or an iPhone app? Each approach has pluses and minuses—not to mention legions of religiously rabid supporters. Apple promotes both approaches (they even gave the web a year-long head start before beginning to sell apps in the store), and the iPhone's Safari browser supports HTML5 and CSS3 and brags a fast JavaScript engine. Yet many companies and individuals with deep web expertise choose to create iPhone apps instead of web apps that can do the same thing. Explore both approaches and learn just about everything you'll need to know if you choose to create an iPhone app—from the lingo, to the development process, to the tricks that can smooth the path of doing business with Apple.
Supersize that Background, Please!
by Bobby van der Sluis
Issue 309July 6, 2010
Background images that fill the screen thrill marketers but waste bandwidth in devices with small viewports, and suffer from cropping and alignment problems in high-res and widescreen monitors. Instead of using a single fixed background size, a better solution would be to scale the image to make it fit different window sizes. And with CSS3 backgrounds and CSS3 media queries, we can do just that. Bobby van der Sluis shows how.
Prefix or Posthack
by Eric Meyer
Issue 309July 6, 2010
Vendor prefixes: Threat or menace? As browser support (including in IE9) encourages more of us to dive into CSS3, vendor prefixes such as -moz-border-radius and -webkit-animation may challenge our consciences, along with our patience. But while nobody particularly enjoys writing the same thing four or five times in a row, prefixes may actually accelerate the advancement and refinement of CSS. King of CSS Eric Meyer explains why.
Taking Advantage of HTML5 and CSS3 with Modernizr
by Faruk Ateş
Issue 308June 22, 2010
Years ago, CSS browser support was patchy and buggy, and only daring web designers used CSS for layouts. Today, CSS layouts are commonplace and every browser supports them. But the same can't be said for CSS3 and HTML5. That's where Faruk Ateş’s Modernizr comes in. This open-source JavaScript library makes it easy to support different levels of experiences, based on the capabilities of each visitor’s browser. Learn how to take advantage of everything in HTML5 and CSS3 that is implemented in some browsers, without sacrificing control over the user experience in other browsers.
Stop Forking with CSS3
by Aaron Gustafson
Issue 308June 22, 2010
You may remember when JavaScript was a dark art. It earned that reputation because, in order to do anything with even the teensiest bit of cross-browser consistency, you had to fork your code for various versions of Netscape and IE. Today, thanks to web standards advocacy and diligent JavaScript library authors, our code is relatively fork-free. Alas, in our rush to use some of the features available in CSS3, we’ve fallen off the wagon. Enter Aaron Gustafson’s eCSStender, a JavaScript library that lets you use CSS3 properties and selectors while keeping your code fork- and hack-free.
Responsive Web Design
by Ethan Marcotte
Issue 306May 25, 2010
Designers have coveted print for its precision layouts, lamenting the varying user contexts on the web that compromise their designs. Ethan Marcotte advocates we shift our design thinking to appropriate these constraints: using fluid grids, flexible images, and media queries, he shows us how to embrace the “ebb and flow of things” with responsive web design.
Creating Intrinsic Ratios for Video
by Thierry Koblentz
Issue 284May 26, 2009
Have you ever wanted to resize a video on the fly, scaling it as you would an image? Using intrinsic ratios for video and some padding property magic, you can. Thierry Koblentz shows us how.
Return of the Mobile Stylesheet
by Dominique Hazaël-Massieux
Issue 275January 6, 2009
At least 10% of your visitors access your site over a mobile device. They deserve a good experience (and if you provide one, they'll keep coming back). Converting your multi-column layout to a single, linear flow is a good start. But mobile devices are not created equal, and their disparate handling of CSS is like 1998 all over again. Please your users and tame their devices with handheld style sheets, CSS media queries, and (where necessary) JavaScript or server-side techniques.
Fluid Grids
by Ethan Marcotte
Issue 279March 3, 2009
How awesome would it be if you could combine the aesthetic rigor and clarity of fixed-width, grid-based layouts with the device- and screen size independence and user-focused flexibility of fluid layouts? Completely awesome, that's how awesome. And with a little cunning and a tad of easy math, ALA's Ethan Marcotte gets it done. We smell a trend in the offing.
Progressive Enhancement with CSS
by Aaron Gustafson
Issue 270October 21, 2008
Organize multiple style sheets to simplify the creation of environmentally appropriate visual experiences. Support older browsers while keeping your CSS hack-free. Use generated content to provide visual enhancements, and seize the power of advanced selectors to create wondrous (or amusing) effects. Part two of a series.
Understanding Progressive Enhancement
by Aaron Gustafson
Issue 269October 7, 2008
Steven Champeon turned web development upside down, and created an instant best practice of standards-based design, when he introduced the notion of designing for content and experience instead of browsers. In part one of a series, ALA’s Gustafson refreshes us on the principles of progressive enhancement. Upcoming installments will translate the philosophy into sophisticated, future-focused design and code.
CSS Sprites2 - It’s JavaScript Time
by Dave Shea
Issue 266August 26, 2008
In 2004, Dave Shea took the CSS rollover where it had never gone before. Now he takes it further still—with a little help from jQuery. Say hello to hover animations that respond to a user's behavior in ways standards-based sites never could before.
Faux Absolute Positioning
by Eric Sol
Issue 261June 17, 2008
CSS layout is awesome, except when your layout calls for a header, a footer, and columns in between. Use float, and content changes can cause columns to wrap. Use absolute positioning, and your footer can crash into your columns. Add the complexity of drag-and-drop layouts, and a new technique is needed. Enter "faux absolute positioning." Align every item to a predefined position on the grid (as with absolute positioning), but objects will still affect the normal flow (as with float).
Accessible Data Visualization with Web Standards
by Wilson Miner
Issue 256April 8, 2008
When designing interfaces for browsing data-driven sites, creating navigation elements that are also visualization tools helps the user make better decisions. Wilson Miner demonstrates three techniques for incorporating data visualization into standards-based navigation patterns.
Version Targeting: Threat or Menace?
by Jeffrey Zeldman
Issue 253February 19, 2008
Version targeting shakes our browser-agnostic faith. Its default behavior runs counter to our expectations, and seems wrong. Yet to offer true DOM support without bringing JScript-authored sites to their knees, version targeting must work the way Microsoft proposes, argues Jeffrey Zeldman.
Keeping Your Elements’ Kids in Line with Offspring
by Alex Bischoff
Issue 252February 5, 2008
Alex Bischoff introduces Offspring, a JavaScript library bringing the power of advanced CSS selectors to browsers that can’t quite handle the real thing.
Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8
by Aaron Gustafson
Issue 251January 21, 2008
For seven years, the @DOCTYPE@ switch has stood designers and developers in good stead as a toggle between standards mode and quirks mode. But when IE7, with its greatly improved support for standards, "broke the web," it revealed the flaw in our toggle. The quest was on to find a more reliable ensurer of forward compatibility. Is version targeting the answer?
How to Size Text in CSS
by Richard Rutter
Issue 249November 20, 2007
It's a tug-of-war as old as web design. Designers need to control text size and the vertical grid; readers need to be able to resize text. A better best practice for sizing type and controlling line-height is needed; and in this article, Richard Rutter obligingly supplies one.
CSS @ Ten: The Next Big Thing
by Håkon Wium Lie
Issue 244August 28, 2007
Ten years ago, Håkon Wium Lie and Bert Bos gave us typographic control over web pages via CSS. But Verdana and Georgia take us only so far. Now Håkon shows us how to take web design out of the typographic ghetto, by harnessing the power of real TrueType fonts.
Conflicting Absolute Positions
by Rob Swan
Issue 241July 13, 2007
All right, class. Using CSS, produce a liquid layout that contains a fixed-width, scrolling side panel and a flexible, scrolling main panel. Okay, now do it without JavaScript. By chucking an assumption about how CSS works in browsers, Rob Swan provides the way and means.
Frameworks for Designers
by Jeff Croft
Issue 239June 12, 2007
Frameworks like Rails, Django, jQuery, and the Yahoo User Interface library have improved web developers' lives by handling routine tasks. The same idea can work for designers. Learn how to harness the power of tools, libraries, conventions, and best practices to focus creative thought and energy on what is unique about each project.
Multi-Column Layouts Climb Out of the Box
by Alan Pearce
Issue 232February 6, 2007
“Holy Grail,” “One True Layout,” “pain in the @$$”... Alan Pearce presents a cleaner approach to designing multi-column layouts.
How to Grok Web Standards
by Craig Cook
Issue 230January 9, 2007
For designers who find web standards as easy to grasp as a buttered eel, Craig Cook shows how to stop the hurting and turn on the understanding. Learn how web standards work, and why they are more than simply an alternative means of producing a visual design.
Super-Easy Blendy Backgrounds
by Matthew O'Neill
Issue 227November 13, 2006
Gradients: a nutritious part of your Web 2.0 breakfast. Wouldn't it be swell if you could get all that goodness without opening Photoshop every time you needed a little gradient bliss? Matthew O'Neill explains how you can.
12 Lessons for Those Afraid of CSS and Standards
by Ben Henick
Issue 224September 26, 2006
If you're new to CSS and web standards, you may feel as though you've fallen down a rabbit hole. Ben Henick is here to ease your pain.
Sliced and Diced Sandbags
by Rob Swan
Issue 222August 22, 2006
Wouldn't it be great if there were a way to get text to flow around an irregularly shaped image? Wouldn't it be even better if we could automate the process? Have no fear: Rob Swan is here to show us the way.
Automatic Magazine Layout
by Harvey Kane
Issue 219July 11, 2006
You can't always count on having a professional designer around to resize and position your images for you, but you'd rather your page layout didn't look like it was created by orangutans. Harvey Kane builds a script that makes your life easier.
Prettier Accessible Forms
by Nick Rigby
Issue 218June 20, 2006
Forms are a pain. You can make them pretty, make them accessible, or go a little crazy trying to achieve both. Nick Rigby offers a happy solution.
A More Accessible Map
by Seth Duffey
Issue 215April 18, 2006
Nifty web maps powered by Google and Yahoo! APIs are all the rage. And rage is what a visually impaired user may feel when trying to use them. Is there a way to make beautiful web maps accessible? In a word, yes.
In Search of the Holy Grail
by Matthew Levine
Issue 211January 30, 2006
Just in case you might want a three-column layout that doesn't require the usual sacrifices, we thought we'd share this technique. Not that you'd want that or anything.
Thinking Outside the Grid
by Molly E. Holzschlag
Issue 209December 19, 2005
CSS has broken the manacles that kept us chained to grid-based design...so why do so few sites deviate from the grid? Molly E. Holzschlag can tell us that the answer has something to do with airplanes, urban planning, and British cab drivers.
Printing a Book with CSS: Boom!
by Håkon Wium Lie, Bert Bos
Issue 208November 28, 2005
You like microformats? We'll give you some freakin' microformats. CSS luminaries Håkon Wium Lie and Bert Bos introduce the boom! microformat and show you how to make book the easy way.
CSS Swag: Multi-Column Lists
by Paul Novitski
Issue 204September 26, 2005
Multi-column lists: can't live with ’em, can't achieve perfect bliss without ’em. Paul Novitski offers a staggering six possible methods for accomplishing this commonly requested layout trick. Examine your options and choose wisely.
ALA’s New Print Styles
by Eric Meyer
Issue 203September 19, 2005
Print away, you fiends! Eric Meyer presents the ALA 4.0 print styles and discusses the challenge of translating a complex screen layout into a well-designed and useful printed page.
Introducing the CSS3 Multi-Column Module
by Cédric Savarese
Issue 204September 26, 2005
Cédric Savarese would like you to meet the CSS3 multi-column module. It may not have extensive browser support yet, but this semantically sound method of dividing content into columns may be more relevant than you think.
High-Resolution Image Printing
by Ross Howard
Issue 202September 5, 2005
Your client looks up and says, "Why does our logo look funny when we print the pages?" Do you sigh dramatically, or learn about Ross Howard's technique for printing high-resolution images via CSS? We vote for option B.
A List Apart 4.0
by Jeffrey Zeldman
Issue 201August 22, 2005
From the crown of its cranium to the tips of its Ruby-slippered toes, A List Apart 4.0 is both old and new.
Complex Dynamic Lists: Your Order Please
by Christian Heilmann
Issue 200May 24, 2005
Help your site’s visitors reach their goals quickly with a dynamic menu that takes its cue from the Mac OS X Finder.
Spruced-Up Site Maps
by Kim Siever
Issue 197March 30, 2005
The clean-n-simple site map gets a nice haircut and and a shoe-shine as Kim Siever shows us how to hook custom bullet styles to troublesome nested lists.
Hybrid CSS Dropdowns
by Eric Shepherd
Issue 197March 30, 2005
Yup. It’s yet another CSS dropdown article — but one that resolves many problems associated with common dropdown methods and degrades beautifully. Hybrid CSS dropdowns allow access to all pages, keep the user aware of where she is within the site, and are clean and light to boot. It’s a tasty little vitamin pill, so quit sighing and try it.
Bulleted Lists: Multi-Layered Fudge
by Nandini Doreswamy
Issue 195February 16, 2005
A passion for web standards can become a broken heart when effects that are easy to achieve with table layouts seem to defy the earnest CSS- and markup-conscious designer. Fortunately, new ALA author Nandini Doreswamy loves a challenge. Here she shows how to create two columns of bulleted lists in the flow of text.
The Way It’s Supposed to Work
by Erin Kissane
Issue 192January 18, 2005
Groundbreaking accessibility information. Project management and information architecture theory from old-school experts. Plug-and-play solutions to universal design and development problems. Experimental CSS/DOM hacks that use non-semantic elements to do funky design tricks. One of these things is not like the others...which is why we’re introducing a tiny new feature to the magazine.
Cross-Column Pull-Out Part Two: Custom Silhouettes
by Daniel M. Frommelt
Issue 191January 11, 2005
The cross-column pull-out gave us a new technique for marking up a layout with a pull-out positioned between columns. Now we examine a variation of the technique for wrapping around the edges of a non-rectangular image positioned between columns.
Big, Stark & Chunky
by Joe Clark
Issue 191January 11, 2005
You’ve designed for the screen and made provision for blind, handheld, and PDA browser users. But what about low-vision people? Powered by CSS, “zoom” layouts convert wide, multicolumn web pages into low-vision-friendly, single column designs. Accessibility maven Joe Clark explores the rationale and methods behind zoom layouts. Board the zoom train now!
Cross-Column Pull-Outs
by Daniel M. Frommelt
Issue 190December 21, 2004
Print designers like to wrap text around images that sit between columns. Now you can, too. Daniel Frommelt takes us where no web layout has gone before.
Invasion of the Body Switchers
by Andy Clarke, James Edwards
Issue 189November 19, 2004
Wouldn’t it be great if we could update the classic ALA style switcher to accommodate multiple users and devices, including some that aren’t even traditional browsers, all from a single JavaScript and CSS file? Well, now we can! Enter the Body Switcher.
Pocket-Sized Design: Taking Your Website to the Small Screen
by Elika Etemad, Jorunn D. Newth
Issue 187August 31, 2004
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. This article presents a set of general suggestions for creating a handheld-friendly style sheet that works well even on handheld screens no wider than 120px.
Drop-Down Menus, Horizontal Style
by Nick Rigby
Issue 184June 29, 2004
Multi-tiered drop-down menus can be a hassle to build and maintain — especially when they rely on big, honking chunks of JavaScript. Nick Rigby presents a way to handle this common navigation element with a cleanly structured XHTML list, straightforward CSS, and only a few concessions to browser quirks.
Creating Liquid Layouts with Negative Margins
by Ryan Brill
Issue 183June 15, 2004
Two- and three-column, liquid page designs with header and footer are easy to dash off using old-school HTML table layout methods. Designing them in CSS is trickier, and can sometimes even require you to structure your page’s content elements in a specific (and undesirable) order. Negative margins to the rescue! Ryan Brill whips up two quick CSS layouts to demonstrate the power of negative thinking.
Dynamically Conjuring Drop-Down Navigation
by Christian Heilmann
Issue 183June 15, 2004
Got content? Got pages and pages of content? Wouldn’t it be nice if you could offer your readers a drop-down menu providing instant access to any page, without having to sit down and program the darned thing? By marrying a seemingly forgotten XHTML element to simple, drop-in JavaScript, Christian Heilmann shows how to do just that. There’s even a PHP backup for those whose browsers lack access to JavaScript. Turn on, tune in, drop-down.
Dynamic Text Replacement
by Stewart Rosenberger
Issue 183June 15, 2004
Let your server do the walking! Whether you’re replacing one headline or a thousand, Stewart Rosenberger’s Dynamic Text Replacement automatically swaps XHTML text with an image of that text, consistently displayed in any font you own. The markup is clean, semantic, and accessible. No CSS hacks are required, and you needn’t open Photoshop or any other image editor. Read about it today; use it on personal and commercial web projects tomorrow.
Print It Your Way
by Derek Featherstone
Issue 182May 21, 2004
Because ALA’s readers are web users as well as designers and developers, we offer this tidbit from Derek Featherstone on creating user stylesheets to print articles to your own specifications.
Onion Skinned Drop Shadows
by Brian Williams
Issue 182May 21, 2004
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.
Separation: The Web Designer’s Dilemma
by Michael Cohen
Issue 181May 14, 2004
Presentation separated from structure. Structure separated from content. The foot bone connected to the ... what were we talking about? Michael Cohen steps in to examine our assumptions and relieve our separation anxiety.
Mountaintop Corners
by Dan Cederholm
Issue 179April 30, 2004
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.
CSS Drop Shadows II: Fuzzy Shadows
by Sergio Villarreal
Issue 178April 23, 2004
Picking up where Part I left off, in Part II designer Sergio Villarreal takes his standards-compliant drop-shadow to the next level by producing warm and fuzzy shadows.
Power To The People: Relative Font Sizes
by Bojan Mihelac
Issue 176April 9, 2004
Relative font sizes may make websites more accessible — but they’re not much help unless the person using the site can find a way to actually change text size. Return control to your audience using this simple, drop-in solution.
CSS and Email, Kissing in a Tree
by Mark Wyner
Issue 175March 26, 2004
Despite prevailing wisdom to the contrary, you can safely deploy HTML emails styled with good old-fashioned CSS. If you’re not content to roll over and use font tags in your HTML emails, read on.
The Table Ruler
by Christian Heilmann
Issue 175March 26, 2004
Make your site easier to use by giving your visitors a virtual “ruler” to guide and track their progress down long data tables. With a pinch of JavaScript and a dash of the DOM, your table rows will light up as your visitors hover over them.
Zebra Tables
by David F. Miller
Issue 173March 5, 2004
While misused tables are becoming increasingly rare, the table retains a legitimate role in data formatting. A little CSS and JavaScript magic can make tables better at what they do best: displaying tabular data.
CSS Sprites: Image Slicing’s Kiss of Death
by Dave Shea
Issue 173March 5, 2004
Say goodbye to old-school slicing and dicing when creating image maps, buttons, and navigation menus. Instead, say hello to a deceptively simple yet powerful sprite-based CSS solution.
CSS Design: Creating Custom Corners & Borders Part II
by Søren Madsen
Issue 172February 27, 2004
Part I showed how to create fluid, dynamic CSS layouts with customized borders and corners. Part II advances to the next level, extending the technique to work with more complicated backgrounds such as gradients and patterns.
CSS Drop Shadows
by Sergio Villarreal
Issue 172February 27, 2004
Much used, oft maligned but always popular, drop shadows are a staple of graphic design. Although easy to accomplish with image-editing software, they’re not of much use in the fast-changing world of web design … until now.
Designing for Context with CSS
by Joshua Porter
Issue 171February 20, 2004
The medium is the message: Imagine providing unique information exclusively for people who read your site via a web-enabled cell phone — then crafting a different message for those who are reading a printout instead of the screen. Let your context guide your content. All it takes is some user-centric marketing savvy and a dash of CSS.
Exploring Footers
by Bobby van der Sluis
Issue 170February 6, 2004
With old-school table layout methods, vertical positioning is a piece of cake. With CSS layout, it’s a piece of something else. New ALA contributing writer Bobby van der Sluis shows how to regain control of footers and other vertically positioned layout elements via CSS, JavaScript, and the DOM.
CSS Design: Custom Underlines
by Stuart Robertson
Issue 169February 2, 2004
While web designers generally have a great deal of control over how a document should be presented, basic CSS doesn’t provide many options for the style of underlines below the links on a page. But with a few nips and tucks, you can take back creative control of the way your links look. Frequent ALA contributor Stuart Robertson shows how.
Improving Link Display for Print
by Aaron Gustafson
Issue 203September 19, 2005
Some time ago, Eric Meyer showed you how to add URIs to the printed version of your pages using print styles. Sometimes, though, too many inline URIs can make pages hard to read. Aaron Gustafson comes to the rescue with a JavaScript add-on that'll have you loving your linkage again.
Elastic Design
by Patrick Griffiths
Issue 167January 9, 2004
Not quite liquid, yet not fixed-width either, Elastic Design combines the strengths of both. Done well, it can enhance accessibility, exploit neglected monitor and browser capabilities, and freshen your creative juices as a designer. Patrick Griffiths shows how to start.
Faux Columns
by Dan Cederholm
Issue 167January 9, 2004
It’s a beginning CSS designer’s nightmare and a frequently asked question at ALA: Multi-column CSS layouts can run into trouble when one of the columns stops short of its intended length. Here’s a simple solution.
Night of the Image Map
by Stuart Robertson
Issue 166December 12, 2003
CSS design from beyond the grave: all the secret ingredients you’ll need to resurrect the image map using CSS and structurally sensible XHTML.
Retooling Slashdot with Web Standards Part II
by Daniel M. Frommelt
Issue 165December 4, 2003
In Part I, we showed how Slashdot could save money and reduce bandwidth requirements by converting to semantic XHTML markup and CSS layout. In Part II, we explore how standards-compliant markup and deft use of CSS could make Slashdot and your sites play nicely in print and on handheld devices.
JavaScript Image Replacement
by Christian Heilmann
Issue 164November 21, 2003
Perhaps it’s time to consider the ups and downs of a JavaScript-based alternative to the Fahrner Image Replacement technique. This version uses plain vanilla XHTML with no special IDs or CSS tricks.
Retooling Slashdot with Web Standards
by Daniel M. Frommelt
Issue 164November 21, 2003
A look at the markup behind Slashdot.org demonstrates how simple and cost-effective the switch to a standards-compliant Slashdot could be. (Part I of a two-part series.)
Suckerfish Dropdowns
by Patrick Griffiths, Dan Webb
Issue 162November 7, 2003
Teach your smart little menus to do the DHTML dropdown dance without sacrificing semantics, accessibility, or standards compliance or writing clunky code.
Sliding Doors of CSS, Part II
by Douglas Bowman
Issue 161October 30, 2003
In Sliding Doors of CSS Part I, Douglas Bowman introduced a new technique for creating visually stunning interface elements with simple, text-based, semantic markup. In Part II, he pushes the technique even further with rollovers, a fix for IE/Win’s CSS bugs, and lots more.
Sliding Doors of CSS
by Douglas Bowman
Issue 160October 20, 2003
Image-driven, visually compelling user interfaces. Text-based, semantic markup. Now you can have both! Douglas Bowman’s sliding doors method of CSS design offers sophisticated graphics that squash and stretch while delivering meaningful XHTML text. Have your cake and eat it, too!
Facts and Opinion About Fahrner Image Replacement
by Joe Clark
Issue 160October 20, 2003
Fahrner Image Replacement and its analogues aim to combine the benefits of high design with the requirements of accessibility. But how well do these methods really work? Accessibility expert Joe Clark digs up much-needed empirical data on how FIR works (and doesn’t) in leading screen readers.
Using XHTML/CSS for an Effective SEO Campaign
by Brandon Olejniczak
Issue 159September 1, 2003
Improve your search engine ranking by harnessing the benefits of well-authored XHTML and using CSS to boost your code-to-content ratio.
Accesskeys: Unlocking Hidden Navigation
by Stuart Robertson
Issue 158June 16, 2003
Your favorite applications have shortcut keys. So can your site, thanks to the XHTML accesskey attribute. Accesskeys make sites more accessible for people who cannot use a mouse. Unfortunately, almost no designer uses accesskeys, because, unless they View Source, most visitors can’t tell that you’ve put these nifty navigational shortcuts to work on your site. In this issue, Stuart Robertson unlocks the secret of providing visible accesskey shortcuts.
Flexible Layouts with CSS Positioning
by Dug Falby
Issue 155November 15, 2002
Want to spend less time on CSS hacking and more time on design? Need your site to look as good on a 160x160 PDA screen as it does on a 1024x768 PC monitor? In Flexible Layouts with CSS Positioning, designer Dug Falby shares two techniques for practical grid-building.
Build a PHP Switcher
by Chris Clark
Issue 152October 13, 2002
ALA’s open source style sheet switchers are swell as long as your visitors use compliant browsers and have JavaScript turned on. But what if they don’t? Perhaps, this: Chris Clark tells how to build a cross-browser, backward-compatible, forward-compatible, standards-compliant style sheet switcher in just five lines of code.
CSS Design: Taming Lists
by Mark Newhouse
Issue 151September 27, 2002
Do you crave the disciplined order of proper (X)HTML lists but long for control over their presentation? You can put a stop to their wild ways and bad behavior. Mark Newhouse shows you how to tame those lists by making them submit to your CSS while maintaining logical HTML structure.
Manage Your Content With PHP
by Christopher Robbins
Issue 148August 9, 2002
XHTML for structured markup. CSS for presentation. What more could you ask? How about an easy way to manage your site, using free, open-source tools? Christopher Robbins shows how to use PHP to build an intro-level, template-driven system that handles site maintenance chores and remembers your visitors’ preferences.
CSS Design: Going to Print
by Eric Meyer
Issue 144May 10, 2002
Say no to “printer-friendly” versions and yes to printer-specific style sheets. CSS expert Eric Meyer shows how to conceive and design print style sheets that automatically format web content for off-screen delivery. Includes tips on hiding inappropriate content, styling text for the printer, and displaying the URL of every link on the page.
Fix Your Site With the Right DOCTYPE!
by Jeffrey Zeldman
Issue 142April 12, 2002
You’ve done everything right, but your site is breaking in the latest browsers. A faulty DOCTYPE is likely to blame. This essential ALA article will provide you with DOCTYPEs that work, enabling you to fix your site with just one tag.
CSS Design: Mo’ Betta Rollovers
by Tim Murtaugh
Issue 140March 8, 2002
Design smarter, faster, better rollovers with CSS.
Better Living Through XHTML
by Jeffrey Zeldman
Issue 137February 15, 2002
Everything you wanted to know about converting from HTML to XHTML, including why you’d want to, tools that help, changes in the way browsers display XHTML pages, shortcuts, bugs, workarounds, and other tips you won’t find elsewhere.
A Backward Compatible Style Switcher
by Daniel Ludwin
Issue 136February 8, 2002
You asked for it, you’ve got it: an Open Source alternate style sheet switcher that actually works in Netscape 4. No, really. Daniel Ludwin shows how it’s done.
Why Don’t You Code for Netscape?
by Jeffrey Zeldman
Issue 129December 7, 2001
Long considered the Holy Grail of web design, “backward compatibility” has its place; but at this point in web development history, shouldn’t we be more concerned about forward compatibility? ALA makes the case for authoring to web standards instead of browser quirks.
Alternative Style: Working With Alternate Style Sheets
by Paul Sowden
Issue 126November 2, 2001
Build a standards-compliant Style switcher: After explaining the basics of alternate style sheets, Sowden shows how to make them work in IE, Mozilla, and other modern browsers with just a few lines of JavaScript. Use style switchers to make your site more accessible, to facilitate user customization, or to develop creative effects.
*Can’t find what you’re looking for? View all topics and subtopics »
9(unknown*no*no*0)&guid=ON){kind=small}
