Power To The People: Relative Font Sizes

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.

Mihelac, Bojan. List Apart, A (2004). Design>Web Design>Typography>CSS

Practical CSS Layout Tips, Tricks, and Techniques

Think you need HTML tables to craft complex liquid layouts? Not so! In this tip-packed tutorial, Mark Newhouse shares advanced yet practical CSS techniques any working web designer can use.

Newhouse, Mark. List Apart, A (2001). Design>Web Design>CSS

Preparing your CSS for Internet Explorer 7

Internet Explorer 7 has different (and better) support for CSS than any of its predecessors - find out what implications this may have for your website.

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

Print It Your Way

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.

Featherstone, Derek. List Apart, A (2004). Design>Web Design>CSS

Print Stylesheet: The Definitive Guide

A print stylesheet will automatically make all your web pages print-friendly. Find out how to make one with this definitive guide.

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

Print to Preview

Going from the browser to the printer has always been a bit of a guessing game. In this article, Pete McVicar shows us a method for providing users with a reliable print preview.

McVicar, Pete. List Apart, A (2006). Design>Web Design>CSS>Printing

Printing a Book with CSS: Boom!

You like microformats? Weï¿ll give you some freakin' microformats. CSS luminaries Hakon Wium Lie and Bert Bos introduce the boom! microformat and show you how to make book the easy way.

Bos, Bert and Hakon Wium Lie. List Apart, A (2005). Design>Web Design>CSS>Printing

Put Your Content in My Pocket

The iPhone includes a sophisticated new Safari browser. This version is touted as 'the most advanced web browser on a portable device' and from what I've seen, it deserves this accolade. So what does this mean for you? Millions of visitors accessing your content on a small display with very high resolution. At some point in the near future, you're going to want to take a look at your current site design to make sure that it looks good and works well on this new device and its Mobile Safari browser.

Hockenberry, Craig. List Apart, A (2007). Design>Web Design>Wireless Web>CSS

Quick CSS Mockups with Photoshop

You need to make a set of web design mockups for your client. You'd like to find an easy way to show these mockups in clean XHTML and CSS code, because plain JPGs don't convey the full sense of the design, and sliced tables are evil. In fact, let's forget table slices ever existed. This article is for people who need to produce valid, standards-compliant mockups quickly, with the graphics tools they already use.

Voogt, Casper. List Apart, A (2007). Design>Web Design>Planning>CSS

Report On HTML Style Sheets  

A short report (circa 1997) on how one documentation deparment could use Cascading Style Sheets to format the HTML-based documentation it produces.

Nesbitt, Scott. ScottNesbitt.net (1997). Articles>Web Design>CSS

Retooling Slashdot with Web Standards

A look at the markup behind Slashdot.org that demonstrates how simple -- and cost-effective -- the switch to a standards-compliant Slashdot could be.

Frommelt, Daniel M. List Apart, A (2003). Design>Web Design>Standards>CSS

Retooling Slashdot with Web Standards Part II

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.

Frommelt, Daniel M. List Apart, A (2003). Design>Web Design>Standards>CSS

Rough Guide to the Document Object Model (DOM)

In two parts, this series introduces the Document Object Model, explaining its benefits, and exploring its implementation.

Icarus. SitePoint (2003). Design>Web Design>CSS>DHTML

Screen Readers and 'display:none'

When an element is hidden with display: none, the browser doesn't generate a box for the element; the element is not visible on the screen, and the layout of the page isn't effected by the element. As screen readers are supposed to read the screen, it makes sense that they do not announce content that is hidden with display: none.

Lemon, Gez. Juicy Studio (2007). Articles>Web Design>Accessibility>CSS

Seiten gestalten ohne Tabellen

Für die Positionierung der Inhalte auf Webseiten werden derzeit hauptsächlich Tabellen eingesetzt. Das entspricht zwar nicht ganz den Intentionen der Entwickler von HTML beim W3C, aber es ist unbestreitbar praktisch. Wenigstens solange man die Seiten in einem Browser betrachtet, der auch verschachtelte Tabellen einigermaßen sauber wiedergeben kann - was durchaus nicht alle können.

Charlier, Michael. Webwriting-Magazin (2004). (German) Design>Web Design>CSS

SELECT Something New, Part 1

So you've built a beautiful, standards-compliant site utilizing the latest and greatest CSS techniques. You've mastered control of styling every element, but in the back of your mind, a little voice is nagging you about how ugly your SELECTs are. Well, today we're going to explore a way to silence that little voice and truly complete our designs. With a little DOM scripting and some creative CSS, you too can make your SELECTs beautiful… and you won't have to sacrifice accessibility, usability or graceful degradation.

Gustafson, Aaron. Easy! Designs LLC (2005). Design>Web Design>CSS>DHTML

Separation: The Web Designer's Dilemma

With all the discussion about separating presentation from content (and structure), it's easy to lose track of the goal. So let's step back, define our terms, and take a look at why it matters.

Cohen, Michael. List Apart, A (2004). Design>Web Design>CSS>Theory

Size Matters: Making Font Size Keywords Work

The cascading style sheets standard includes seven font-size keywords intended to give designers a simple means of setting font sizes without creating accessibility problems. Sizes range from xx-small to xx-large and are relative to users' preferred 'medium' settings. Putting these seven sizes to work should be a no-brainer. Unfortunately there are plenty of obstacles ahead. Fortunately there is a workaround. Let's start by surveying the damage, then move on to a working solution.

Fahrner, Todd. List Apart, A (2001). Design>Web Design>CSS

Sliding Doors of CSS

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!

Bowman, Douglas. List Apart, A (2003). Design>Web Design>CSS>DHTML

Sliding Doors of CSS, Part II

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.

Bowman, Douglas. List Apart, A (2003). Design>Web Design>CSS

So You Want Cascading Style Sheets, Huh?

This tutorial is an updated version of my original style sheet tutorial. Style Sheets, A.K.A.: Cascading Style Sheets, A.K.A.: CSS, are becoming more popular now that they are cross-browser models thanks to Netscape's version 4.x including the commands. This is a general overview of Style Sheets. You'll find more specific Style Sheet elements explained in the Positioning, Class & ID, and DHTML tutorials.

Burns, Joe. HTML Goodies (1997). Design>Web Design>CSS

Streamlining with Web Standards

Save time, money, blood, sweat, and tears by rebuilding your old-school site with standards-friendly CSS and XHTML.

Penhaligon, Greg. Webmonkey (2003). Design>Web Design>CSS>XHTML

Style Master CSS Tutorial

This tutorial teaches CSS using both hand-coding and Style Master for Windows. You can also follow it using instructions for Style Master for Mac OS X. By working through the exercises you will learn all about CSS for text styling and page appearance including layout, and create a stylish looking page like this. If you want to learn CSS by hand-coding alone, simply work through all the exercises and code examples and skip all the specially styled Style Master instructions.

Western Civilization (2005). Design>Web Design>Software>CSS

Style Sheets Now!

Web style sheets have been around for a number of years, but their power and importance went largely unnoticed since few implementations existed. Web authors, anxious to add creativity to their pages by influencing the presentation, began to use Netscape's proprietary extensions rather than the more powerful style sheets. This was quite natural, since Netscape's proprietary extensions could be seen by a significant portion of Web users, while few would see style sheet enhancements.

Web Design Group, The. Design>Web Design>CSS

Style Sheets: Solid Presence, Expanding Future

With the release of Netscape 6.0 earlier this year, we finally have comprehensive support for the original Cascading Style Sheets specification (CSS1) from the two major browsers. Millions of people will continue to use older browsers, and designing for the Web may always be a complex and thorny proposition. But the gradual acceptance of CSS1, and the innovations promised by CSS2 and the still-unfinished CSS3, should motivate designers to add style sheets to their Web palettes.

Burner, Dell. EServer (2001). Design>Web Design>CSS