Cascading Style Sheets: HTML and CSS

In many ways, the Cascading Style Sheets (CSS) specification represents a unique development in the history of the World Wide Web. In its inherent ability to allow richly styled structural documents, CSS is both a step forward and a step backward--but it's a good step backward, and a needed one. To see what is meant by this, it is first necessary to understand how the Web got to the point of desperately needing something like CSS, and how CSS makes the web a better place for both page authors and web surfers.

Meyer, Eric. O'Reilly and Associates (2001). Design>Web Design>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.

Jackson, Ken and Sonya E. Keene. STC Proceedings (1999). Design>Web Design>CSS

Cascading Style Sheets Tutorial

A brief introduction to CSS that will allow you to find out what style sheet are, and what they can do for your pages.

PageResource.com (2001). Design>Web Design>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. An introduction to CSS shows the status of the CSS standard and various browser implementations, how to generate HTML and style sheets, the use of CSS compared to PDF, and the role of style sheets in HTML Help.

Jackson, Ken and Sonya E. Keene. STC Proceedings (1998). Presentations>Web Design>CSS

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.

Jordan, Miraz. Wise-Women (2004). Design>Web Design>CSS

Cascading Stylesheets and Dynamic HTML  

Have you been frustrated by the limitations of HTML as you have struggled to present information attractively on a Web page? Have you used common work-around methods such as setting up complex tables for text layout and creating special text effects with a graphics package? Cascading Style Sheets offers a way to produce desired layout effects through HTML. If we are programmatically inclined, we can use Dynamic HTML to increase interactivity. We will demonstrate methods for using Cascading Style Sheets and Dynamic HTML to design Web pages and point out design limitations we still need to be aware of.

Randolph, Elaine F. and Jeff Randolph. STC Proceedings (1998). Design>Web Design>CSS>DHTML

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.

Meyer, Eric. Meyerweb.com. Design>Web Design>CSS>Color

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.

Kaiser, Shirley E. Website Tips. Design>Web Design>Forms>CSS

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.

Kaiser, Shirley E. Website Tips. Design>Web Design>CSS

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.

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

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).

Bohman, Paul. WebAIM (2003). Design>Web Design>Accessibility>CSS

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.

Brill, Ryan. List Apart, A (2004). Design>Web Design>CSS

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.

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

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.

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

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.

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

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.

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

CSS and Email, Kissing in a Tree

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.

Wyner, Mark. List Apart, A (2004). Design>Web Design>CSS>Email

CSS and Round Corners: Boxes with Curves

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

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

CSS and Round Corners: Making Accessible Menu Tabs

Learn how to make accessible Amazon-style navigation tabs.

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

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.

CSS Beauty. Design>Web Design>Community Building>CSS

CSS Design: Creating Custom Corners and Borders

In this article, we’ll show how customized borders and corners can be applied to fully fluid and flexible layouts with dynamic content, using sound and semantically logical markup.

Madsen, Søren. List Apart, A (2003). Design>Web Design>CSS

CSS Design: Creating Custom Corners and Borders Part II

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.

Madsen, Søren. List Apart, A (2004). Design>Web Design>CSS