CSS Design: Custom Underlines

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.

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

CSS Design: Taming Lists

As early as July of 1999 I was pontificating on email lists about the virtues of style sheets. Some things never change. What has changed is how I think about CSS, and the underlying structure of (X)HTML to which it is applied. For example, I find that most pages on the web contain a menu of links in a navigation area. These are often marked up as a string of links, often in separate DIVs or paragraphs. Structurally, however, they are a list of links, and should be marked up as such. Of course the reason that we don’t mark them up in that way is that we don’t want a bullet in front of every link in our navigation area. In a previous article I outlined several techniques for using CSS to layout a web page. One of those techniques involved manipulating a list to display horizontally rather than vertically. In this article, I'll demonstrate how to use CSS to bring unwieldy lists under control. It’s time for you to tell lists how to behave, instead of letting them run wild on your web page.

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

CSS Design: the Basics

Learn the all-important basics of CSS design in this article that explains positioning and colour formatting effects.

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

CSS Drop Shadows

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.

Villarreal, Sergio. List Apart, A (2004). Design>Web Design>CSS

CSS Drop Shadows II: Fuzzy Shadows

Takes standards-compliant drop-shadows to the next level by producing warm and fuzzy shadows.

Villarreal, Sergio. List Apart, A (2004). Design>Web Design>CSS

A CSS Framework

If you've been creating sites with CSS for a while you may be getting frustrated with having to recreate and retest basic layouts on a regular basis. In this article I'm trying to illustrate a simple way of skipping the tedious startup on your average project, letting you get to the interesting stuff as quickly and efficiently as possible.

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

CSS Hacks and Browser Detection

Learn how to use CSS hacks to send different commands to different browsers.

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

CSS in Action: A Hybrid Layout  

In this chapter, we'll complete our production task by using CSS to achieve design effects that support the brand and make the site more attractive without relying on GIF text, JavaScript rollovers, spacer pixel GIF images, deeply nested table cell constructions, or other staples of old-school web design.

Zeldman, Jeffrey. PeachPit Press (2005). Design>Web Design>CSS

CSS is Worthless

CSS does not make a site accessible. CSS does not make your site rank higher in search engines. Good CSS does not make you an elite web programmer. I don't code CSS. CSS is misunderstood.

Stenhouse, Mike. Content With Style (2007). Design>Web Design>CSS

CSS Made Simple

Use GoLive’s all-in-one CSS Editor to create cascading style sheets that enable you to easily maintain consistency in typography and formatting throughout a Web site.

Adobe (2003). Design>Web Design>CSS>Adobe GoLive

CSS Navigation Menu

Use the immense power of CSS to make navigation buttons with pure HTML - not an tag in sight!

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

CSS Properties Table

A quick reference table for the css properties!

PageResource.com (2003). Reference>Web Design>Standards>CSS

A CSS Redesign in Five Easy Pages

Building a standards-compliant redesign of ALA should have been easy. It wasn’t. The first problem was understanding how CSS actually works. The second was getting it to work in standards-compliant browsers. A journal of discovery.

Zeldman, Jeffrey. List Apart, A (2001). Design>Web Design>CSS

CSS Rollover Buttons

There are many different button-rollover tutorials available on the web, some JavaScript and some CSS, but none of the ones I have seen yet match that of the Trifecta button. Let's start with what makes the CSS rollover Trifecta button different from the many other rollovers you may have already seen.

Angeletti, Mark. Search-This (2004). Design>Web Design>DHTML>CSS

CSS Rollover Buttons

Learn how to make rollover buttons with CSS - no JavaScript in sight!

Angeletti, Mark. Webcredible (2004). Design>Web Design>CSS

CSS shorthand properties

Master these CSS shorthand properties and shave kilobytes off your CSS documents!

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

CSS Sprites: Image Slicing's Kiss of Death

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.

Shea, Dave. List Apart, A (2004). Design>Web Design>CSS

CSS Swag: Multi-Column Lists

If you want to present a list in multiple columns you’ll need to compromise. Choose your poison…

Novitski, Paul. List Apart, A (2005). Design>Web Design>CSS

CSS Talking Points

Selling your clients on standards-compliant design doesn't have to hurt. Kise's four-point CSS Selling Plan helps the medicine go down.

Kise, Greg. List Apart, A (2000). Design>Web Design>CSS

CSS @ Ten: The Next Big Thing

CSS is ten years old this year. Such an anniversary is an opportunity to revisit the past and chart the future. CSS has fundamentally changed web design by separating style from structure. It has provided designers with a set of properties that can be tweaked to make marked-up pages look rightand CSS3 proposes additional properties requested by designers.

Lie, Hakon. List Apart, A (2007). Design>Web Design>CSS>History

CSS Trick: Same Link Text - Different Colours

Learn how to make multi-coloured link text - all within the same link!

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

CSS-Design

Vor fast anderthalb Jahren haben wir CSS-Design online gestellt. Seitdem haben wir viel über CSS dazugelernt - genug jedenfalls, um zu sehen, daß ein gründliches Redesign dieser Seiten notwendig wurde. Unsere Besucher sehen davon wenig - die Optik der alten Layouts ist fast ohne Änderung erhalten geblieben, und auch die Texte haben wir nicht umgeschrieben. Umso größer sind die Veränderungen unter der Oberfläche.

Klinger, Claudia and Michael Charlier. Webwriting-Magazin. (German) Design>Web Design>CSS

CSS-Design Mailingliste

Vor fast anderthalb Jahren haben wir CSS-Design online gestellt. Seitdem haben wir viel über CSS dazugelernt - genug jedenfalls, um zu sehen, daß ein gründliches Redesign dieser Seiten notwendig wurde. Unsere Besucher sehen davon wenig - die Optik der alten Layouts ist fast ohne Änderung erhalten geblieben, und auch die Texte haben wir nicht umgeschrieben. Umso größer sind die Veränderungen unter der Oberfläche.

Klinger, Claudia and Michael Charlier. Webwriting-Magazin. (German) Resources>Mailing Lists>CSS

CSSCheck

Enter the URL of a Cascading Style Sheet, or enter your style sheet directly. CSSCheck is primarily a CSS1 checker.

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

Defining Columns and Vertical List Navigation

This series reviews how you can use Macromedia Dreamweaver MX 2004 to move towards using CSS as a positioning technique when developing web pages.

Senior, Adrian. Adobe (2004). Design>Web Design>CSS>Dreamweaver