CSS

Zebra Striping: Does it Really Help?

The user of a table would be looking for one or more data points. Therefore, if we set a task that uses a table, and zebra striping does make things easier, then we would expect to see improvements in accuracy and speed.

Planning Your Stylesheet: The Definitive Guide

Don't let your stylesheet files get out of control - follow these guidelines right from the start and you'll easily be able to manage and update your CSS files.

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.

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.

Year Zero

I am as frustrated as any other web developer at the glacial pace of the CSS Working Group and the lack of progress with CSS3. I just don't think we need to dump the baby out with the bathwater. Change is needed. It looks like change is coming. It may even be a regime change. But let's not start drawing up new calendar systems just yet. The clock of CSS is running slow. We need to wind it up. That doesn't mean we need to smash it.

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.

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.

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.

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.

How to Grok Web Standards

Many web designers, myself included, come to the web with a background in the graphic arts. We think in pictures, not in code. When we first begin designing for the web, we'll use HTML and CSS crudely, as a means to an end--a method of arranging pretty boxes in space--without grasping the true nature of the box itself or what it contains. Altering that strictly visual mentality is the highest hurdle to overcome when a graphic designer first dives into semantics and web standards. For the visual designer, really understanding web standards means you'll have to change the way you think about design.

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.

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.

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.

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.

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.

Switchy McLayout: An Adaptive Layout Technique

The introduction of new mobile and computing devices challenges us to look beyond the liquid layout. Marc van den Dobbelsteen offers a way to bring appropriate layouts to a wider range of screens and devices.

Block vs. Inline Elements

HTML elements can be displayed either in block or inline style. The difference between these is one of the most basic things you need to know in order to use CSS effectively.

How HTML, CSS and JavaScript Work Together in Web Pages

The three main technologies used to create modern web pages (HTML, CSS and JavaScript) each do different jobs. HTML should be used only for structuring content. Cascading Style Sheets should be used for applying all visual styles. JavaScript should be used for (almost) all interactive functionality, and should always be referenced in separate files, never written into HTML.

Inheritance and Cascading in CSS

This is a guide to help people learning CSS to understand how a browser works out what styles to apply to a particular element. As we saw in the introduction to CSS, there are lots of ways you can apply styles to a particular element. When more than one of these methods applies, how do you know which styles will be applied? Fortunately, these rules are quite simple, once you know them. This article tries to explain all. Of course, the best way really to learn this stuff is to try stuff out and see what happens.

Introduction to CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) is a smart way to add styling information to web pages. While it's possible to add styling to HTML (e.g. using the tag) HTML should only be used to structure your content, CSS is the only way you should apply styling.

Layout Gala

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

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.

Avoid Edge Cases by Designing Up Front

Better planning and a beefed-up style guide may be exactly what you need to avoid markup derangement or, worse, a dysfunctional product.

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.

Twelve Lessons for Those Afraid of CSS and Standards

if you're starting to work with CSS, everything you've learned to this point probably feels useless, or worse than useless.

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.

Automatic Magazine Layout

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.

Background Positioning vs. Centered Elements

When the browser is told to center a background image within that container, it has to decide where the actual center lies. In the case of an odd total pixel width, the browser must select one side or the other of the central odd pixel as the "center" of the container.

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.

Position is Everything

A site to explain some obtuse CSS bugs in modern browsers, provide demo examples of interesting CSS behaviors, and show how to 'make it work' without using tables for layout purposes.

Wither the Star-HTML Hack?

Recently the Microsoft blog told us that some of our CSS hacks will stop working in IE7, a fact we detailed in our first IE7 article. While this is generally good news, it is a bit disturbing that the Holly hack in particular will cease to function while many of the layout problems it is meant to fix will still be there, and will still need fixing.

Behavioral Separation

Breaking up is hard to do. But in web design, separation can be a good thing. Content, style, and behavior all deserve their own space. One of the greatest advantages to designing with Cascading Style Sheets is the potential for separation of style and content.

Stylesheets Tutorial

CSS (Cascading Style Sheets) is a great new technology which is taking the web by storm. The strange thing is, very few people have actually heard of it. You have probably seen Stylesheets in action on many websites. Anywhere you see a text link change color when you move your mouse over it probably uses stylesheets.

Don't CSS your XML

CSS should not be used to present homemade XML as web pages. You end up with nothing but style. Neither man nor machine can understand the structure of your document. CSS should only be used for widely supported XML applications like XHTML.

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.

Use Inverted Colors to Highlight Active Link

It is often difficult to find the cursor when a web site is navigated using the keyboard. Where is the active link? With CSS the author of a web page can adjust how the active link is visualized. Inverted colors are the best way to highlight the active link.

Alter Table Row Background Colors Using JavaScript

Many sites that present tabular data use alternating background colors to increase the readability of that data. And as I developed a site, I realised I wanted to do that, too. The problem? In my case the table was not generated by a server side application or script of which you can find numerous examples on the Web.

The Banality of the Radical

As more Web designers begin transforming their sites from the tables-fonttags-single-pixel-gifs concoctions to stripped-down CSS chic, more observers are asking the questions: if the promise of CSS and standards was liberation from the tyranny of warring browser lords, why do all the CSS designs look the same? If this is the radical shift that will allow the Web to realize its potential, why does it appear so dull? Implicit in these questions is an increasing consensus that, in the words of Chris Casciano, 'Your CSS Bores Me'.

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.

Your CSS Bores Me

The state of the use of Cascading Style Sheet on the web is really beginning to get boring. Why haven't designers begun exploiting its benefits yet?

CSS Beauty

CSS Beauty is a project focused on providing its audience with a database of well designed CSS based websites from around the world. Its purpose is to showcase designers' work and to act as a small portal to the CSS design community.

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.

Coloring Your Scrollbars with CSS

You really can color your scrollbars and have a change of scenery from the basic gray or other browser default. It just takes a few snippets of CSS markup, which you'll learn how to do in this tutorial.

Converting Existing Content to CSS

Thinking about converting an existing Web page or an entire Web site from FONT tags to using CSS (cascading style sheets)? This first tutorial of a new series will guide you through the very basics to help get you started.

Cross Browser Animation

Dynamic HTML (DHTML) provides a new range of ways to animate a page. DHTML can animate both text and images and animations can move throughout the browser window, instead of being anchored in one spot. Unfortunately, DHTML can be tricky because of differences between browsers. This article will cover the basics of cross-browser animation. You’ll learn how to animate text and images. Plus you’ll see how to move HTML elements around the screen. After you’ve finished reading this article, you should be able to add cross-browser compatible DHTML animations to your web pages.

Fonts

The ability to customize fonts— in Mac OS, in word processing documents, in Web pages— is really nothing new. However, when it comes to changing fonts on Web pages, the mechanism is decidedly less intuitive and certainly less than easy. Having to litter a Web page with FONT FACE tags makes for larger files, and larger headaches as you weed through these tags to find that one misspelled word. CSS makes the process of selecting a font easy, and even better, it provides a fallback mechanism for those times when users don'’t have the fonts you wanted to appear.

Horizontal Sizing in CSS

This article covers horizontal sizing and shows how to determine the width of elements with CSS. Once you’ve mastered both height and width, you should be well on your way to effectively using CSS.

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.

Vertical Sizing in CSS

This article covers vertical sizing and shows how to determine the height of elements with CSS. Once you’ve mastered both height and width, you should be well on your way to effectively using CSS.

XML Transformations with CSS and DOM

Mozilla permits XML to be rendered in the browser with CSS, and manipulated with the DOM. This is a real boon to those of us eager to experiment with XML transformations (both visual and structural) without having to delve into unfamiliar technologies such as XPath, the verbose traversal language of XSLT. If you’re already familiar with CSS and DOM, you’re more than halfway to achieving XML transformations in Mozilla.

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.

Internet Explorer and CSS Issues

Internet Explorer has a number of CSS issues. Find out what these issues are and how to get around them, so your website looks the same in all browsers.

In Search of the Holy Grail

Many articles have been written on the grail, and several good templates exist. However, all the existing solutions involve sacrifices: proper source order, full-width footers, and lean markup are the usual compromises made in pursuit of this elusive layout.

Thinking Outside the Grid

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!

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.

CSS Swag: Multi-Column Lists

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

Improving Link Display for Print

It seemed my zeal for linkage had come into conflict with my desire to improve print usability.

Introducing the CSS3 Multi-Column Module

This module’s intent is to allow content to flow into multiple columns inside an element. It offers new CSS properties that let the designers specify in how many columns an element should be rendered. The browser takes care of formatting the text so that the columns are balanced.

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.

High-Resolution Image Printing

You probably already know how to use media-specific CSS to provide a suitable layout for the printed page. But how great would it be to be able to go further and provide a better print alternative through the use of specific high-resolution images specifically for print? Awesome? Here’s how.

Cascading Style Sheets

Web authors gain unprecedented control over the look of documents with Cascading Style Sheets (CSS). This section contains a list of articles that are available for CSS in Microsoft Internet Explorer.

Color Blender

Supply two color values in either hex, short hex, RGB percentages, or RGB decimals and get as many as ten colors shades between the two you supplied. Great for finding a color halfway between two shades you like, or mixing two colors together in various proportions.

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.

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.

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.

Div Mania

More and more web documents are appearing that consist of nothing more than a collection of div elements. In most cases, better use of CSS selectors could be used to avoid overusing the div element.

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.

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.

Exploring Footers

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.

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.

Zebra Tables

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.

Designing for Context with CSS

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.

From Table Hacks to CSS Layout: A Web Designer's Journey

Redesigning A List Apart using CSS 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 journey of discovery.

Accessible Pop-up Links

Sometimes we have to use pop-ups — so we might as well do them right. This article will show you how to make them more accessible and reliable while simplifying their implementation.

Drop-Down Menus, Horizontal Style

Anyone who has created drop-down menus will be familiar with the large quantities of scripting such menus typically require. But, using structured HTML and simple CSS, it is possible to create visually appealing drop-downs that are easy to edit and update, and that work across a multitude of browsers, including Internet Explorer. Better still, for code-wary designers, no JavaScript is required!

Hybrid CSS Dropdowns

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.

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.

Cascading Style Sheets: Using Element Display For Layouts, Links and Lists

Introduces the concepts of block-level and inline elements and mentions padding, borders and margins along the way. You'll learn simple techniques using CSS to create accessible layouts, lists, links and navigation bars.

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.

The Early Bird Catches the CSS: Planning Structural HTML

Do you struggle to make the switch to Cascading Style Sheets? Are you using some CSS but can't quite complete the transition to all CSS? Your problem may be that you are not thinking about Cascading Style Sheets early enough in the process of making a web page.

CSS and Round Corners: Boxes with Curves

Discover how to make boxes with round corners, all through the power of CSS.

Bulleted Lists: Multi-Layered Fudge

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.

Cross-Column Pull-Outs

Print designers have long relied on the ability to wrap text around anything, most commonly around a picture centered between two columns. This design option has not been available for web designers ... until now.

De Cascade Style Sheet

CSS oder Cascading Stylesheets zeigt auf, was alles möglich ist im Bereich dieser Formatierung. Es werden Befehle für CSS 1 und CSS 2 behandelt und mit Beispielen erklärt.

Creating a Two-Column Layout

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

Creating Your First Design Without Tables

You will design a fixed-width page that allows the contents to flow. You will use an unordered list to create a horizontal navigation system. You will also design a banner image in Fireworks MX 2004 and use it on the page.

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.

Defining Style Properties and Working with Floats

Discusses floating elements and investigates the height property. Also covers inheritance and specificity.

Understanding CSS Design Concepts

This article is the first in a series of tutorials about Cascading Style Sheets (CSS). The aim in Part 1 is to familiarize you with some of the basics of 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.

Cross-Column Pull-Out Part Two: Custom Silhouettes

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. But first we need to update the original technique.

Cascading Style Sheets (CSS)

Discusses the history, purpose, and limitations of Cascading Style Sheets.

CSS Hacks and Browser Detection

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

CSS shorthand properties

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

Invasion of the Body Switchers

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

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.

Ten CSS Tricks You May Not Know

With so many different ways of using CSS some important tricks and techniques may have passed you by. See how many of the ten you already know and maybe learn something new!

Why a CSS Website Layout Will Make You Money

Many of us know about the benefits of using CSS over tables for layout. But did you know doing so could also make you money? Sounds strange but this article explains why and how.

Zen Garden: The Beauty of CSS Design

An amazing site, with a simple XHTML structure which can be 'poured' into hundreds of volunteer-generated CSS style sheets, in order to demonstrate the power of CSS.

Cascading Style Sheets Tutorial

The Cascading Style Sheets standard returns some control of style to web authors. HTML describes only the structure of information. CSS, though incompletely implemented as yet, adds a style sheet where an author can specify fonts, colors, margins, alignments, indentations, and other elements for any HTML tag or class of tag. Our presentation demonstrates CSS, describes the CSS language, and surveys browser support for CSS to introduce this already-useful addition to HTML.

High Accessibility, High Design: CSS to the Rescue

Anyone with good graphic-design skills can use Web standards to produce attractive Web sites that function adequately for nearly all viewers and very well for most viewers – including people with disabilities. This article will explore a few details concerning the interplay of accessibility and Web design.

CSS Design: the Basics

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

CSS Navigation Menu

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

Accessibility and Cascading Style Sheets

An essay from an accessibility class, on the use of CSS to increase access to a page.

CSS Properties Table

A quick reference table for the css properties!

User-Defined Style Sheets and Accessibility

How you can set your own stylesheet for greater accessibility; another lecture/essay.

Creating Liquid Layouts with Negative Margins

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.

Dynamic Text Replacement

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.

Applying CSS to Forms

Learn how to lay out and format your forms with the power of CSS.

CSS Rollover Buttons

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

Creating Accessible Cascading Style Sheets

For years, the only way to format HTML in a visually appealing way was to use tables, even though tables were originally created to display tabular data. As the Web evolved and became more sophisticated, designers wanted to do more than just display text, they wanted to emulate printed documents. They wanted to make an artistic statement. There's nothing wrong with that. In fact, tables can be used for layout without ruining the accessibility of a Web site. Yes, it's ok to use tables for layout. Still, you can take your Web design to a higher level by eliminating tables entirely. The way to do this is through CSS (Cascading Style Sheets).

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.

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.

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.

CSS Drop Shadows II: Fuzzy Shadows

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

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.

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.

CSS and Round Corners: Making Accessible Menu Tabs

Learn how to make accessible Amazon-style navigation tabs.

CSS Trick: Same Link Text - Different Colours

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

Stylesheets: The Next Generation

So, you've mastered Cascading Style Sheets, right? You've memorized the spec, read up on all the tips and tricks, and even understand the theoretical benefits of separating presentation from structure in your Web pages. Your Web sites are filled with gorgeously rendered text and sport fine control of point size, leading, margins, and backgrounds. You change dozens of pages by editing one simple text file. You've done all that, haven't you? Yeah, me neither.

CSSを使って画像にフィルターをかけよう

日本語版編集部注：この記事にはCSSタグが埋め込まれていますが、Macintosh版NetScape4.7,InternetExplorer5.0以前のブラウザでは正確に表示されません。

Eric Meyer on CSS: Mastering the Language of Web Design

When I first looked at this book, I was very much impressed with its layout. There are lots of beautiful and clear examples, along with well laid-out pages. Chapters consist of various CSS projects, such as creating an events calendar. You can download companion files for each chapter in zipped form from a Web site the author has set up. So the book is in fact an instructional one, one that you can use to learn as you go or just read straight through, depending on your preference.

旧人類でも解るスタイルシート

ある日、私はどうしてもやらなければならない事情があって、以前に私が使っていたペンネームのひとつをグーグルで検索してたの。そうよ、田舎に引っ越したおかげで、時間がたっぷりできたからね。そして見つけたのは私が初めて『ユーズネット』(USENET)に投稿した文章で、日付をみると1994年7月頃のこと。10年前の自分が大げさにわめいているのを読むと、ほんとに、ほんとーに！自分が年とったって実感しちゃうのよね。

Cascading Style Sheets (CSS) Tutorial

Cascading Style Sheets (CSS) were introduced by the World Wide Web Consortium to help determine the layout of an HTML document. Removing the formatting from the HTML document allows you to quickly apply a style to a whole site, rather than going through each document and changing the tags that represent the style. It also means that the content of the HTML document isn't bloated by extra information about how data is to be presented. The current specification for using style sheets, Cascading Style Sheets, level 2, may be found at the World Wide Web Consortium's site. Cascading Style Sheets, level 3 is currently available in its draft version.

CSSを使った文字サイズのコントロール

この惑星上では、毎日、ウェブ・デザイナーやHTMLのコードを書く人のうち、少なくともひとりは落胆の声をあげている。

Mulderのスタイルシート・チュートリアル - 第1日

HTMLを使ってウェブ・ページを作るのは、ちょうどペイント・ローラーを使って絵画を描こうとするようなもんだ。本当にやり遂げようとする決心と集中力がある人間じゃなきゃ思い通りのものなんてできやしない。とにかく精度と柔軟性に適したツールじゃないんだ。

CSSフィルターとその将来

それが持つ重要な意味を示しながら、HotWiredの悪名高いデザイン・エンジニア Taylor が、ウェブにおけるグラフィック・アートの未来を見せてくれた。CSS のフィルターのことだ。

ウェブ標準でウェブページをダイエット

ウェブが生まれてしばらくの間、僕たちは、ただただ小手先の技を凝らすしか手はなかった。クライアントの希望通りにウェブページをレイアウトするには、テキストをいろいろな技法で強調したり折り返したり、テーブルのセルをさまざまな色で飾り、行ではなく列と列の間を空けたりして、その上細々したテクニックを重ねていくしかなかったんだ。そうして出来上がったコードは、ある意味感動するくらい長大だ。3重の入れ子になった巨大なテーブルは、ページ全体に広がり解読不能。どのテーブルにも、ボーダーやパディングやスペーシングやアライメントを指定してあって、セルの中にはフォントタグがぎっしり。でも、僕たちに何ができたっていうんだ、仕方ないじゃないか。