236 HTML & CSS tips, tutorials, techniques & resources
The CSS-Only Accordion Effect
"The Accordion Effect is fast becoming one of the most commonly used (and perhaps abused?) effects of the Web 2.0 world. So what makes this accordion effect special? It doesn’t require a single line of JavaScript."
Efficient CSS with shorthand properties
"One of the reasons for using CSS to layout websites is to reduce the amount of HTML sent to site visitors. To avoid just moving the bloat from HTML to CSS, you should try to keep the size of your CSS files down as well, and I thought I’d explain my favourite CSS efficiency trick: shorthand properties. Most people know about and use some shorthand, but many don’t make full use of these space saving properties."
How to structure large CSS files
"Many methods exist to structure your CSS. This article tries to describe the method I use. I call it the “Tree method”, since it structures the CSS like… that’s right, a tree structure. I want to stress that it isn’t my invention; I just describe and give reasons for its rules."
The 6 Most Important CSS Techniques You Need To Know
"I thought I would give a quick tutorial, with examples, of the 6 most important CSS techniques that I think you need to know."
Pure CSS Animated Progress Bar
"Here's a simple demonstration of how you can create animated progress bar using pure css. The trick is very simple. We need 3 elements, one container and 2 nested elements."
Designing the Digg Header: How To & Download
"The design of Digg is full of smart ideas. The site identity is strong but doesn’t take up too much valuable vertical space. Navigation is compacted with the use of simple drop-down menus. Important things like subscribing, searching and account information are right up top where you would expect them to be. It’s fluid width, but it doesn’t shrink too far or grow too big."
Debugging CSS the Fast Way
"If you’ve been working with CSS for long at all, you’ve probably spent a fair bit of time debugging seemingly intractable problems that turn out to have a very simple solution. The question: What can we do to debug our CSS faster?"
Accessible Data Visualization with Web Standards
"I’m going to cover three basic techniques for incorporating some simple data visualization into standards-based navigation patterns. All of them start with the building block of HTML navigation: an unordered list of links."
Sort out your drawers
"Craig Grannell provides you with a quick, easy and modular solution for creating website drawers, using a lean little script that’s just hundreds of bytes in size"
Cater for screen resolutions
"Does your site look great on all monitors, from the small to the ridiculously big? Craig Grannell shows you how to create a layout for multiple screen resolutions"
CSS Drop Column Layout
"When I created this site I wanted to have 4 columns which are all fixed width. The idea was that if you resized the window then the columns would drop down when there wasn’t enough room. To achieve the desired effect I am using floats."
CSS Message Box collection
"Message boxes are useful elements to display status messages after or during a specific user request. I want to share with you a collection of some simple CSS styles you can apply to your message boxes (clean, solid, iconized, alternated rounded borders, tooltip)."
Top-Down approach to simplify your CSS code
"I think the best way to design a CSS file is using a top-down approach, in other words first defining the main sections of your layout (in general a high-level design is composed from 4-6 main sections) and after that defining all single elements which compose these sections. You can proceed to write your code in a more structured way, avoiding unnecessary code."
Nice Drop caps with CSS
"There are a lot of websites using a extra -tag for the drop cap. But using the :first-letter pseudo-element, you can easily create nice drop caps with CSS. This pseudo element is included in CSS 1, so the browser support is very good. Let’s design some nice drop caps with CSS."
Content Overlay with CSS
"Here's the problem: you have a container with some content in it like an image along with some initial descriptive text. Then, when users hover their mouse over the container, a hidden container is revealed to present additional information over top of the current information but in a way that retains content from the original container."
CSS SiteMap
"Recently I needed to crank out a visual sitemap (or is it a directory tree?) from a rather large site and had a devil of a time finding decent tools to help. Everything I found in my search was either too costly, too complicated, or too unattractive for my purposes. Why not roll my own sitemap diagram in HTML and CSS?"
Using CSS and Mootools to simulate Flash horizontal navigation effect
"In particular using Flash I loved this kind of layout/effect: follow mouse sliding content. Yesterday I asked myself how could obtain the same effect using CSS and HTML... This tutorial explains how to use Mootools and pure CSS / HTML code to simulate a Flash (follow mouse) horizontal navigation effect."
Links with background images - three simple fixes for IE
"Applying a small background image to a link, indicating that the user will be taken to an external site is an option that enhances usability and accessibility."
Creating a fading header
"Since I’ve gotten lots of emails asking me how I created the fading header graphic for Bits and Pixels I’m going to write a tutorial explaining how created the effect. I’ll be creating the effect using some basic XHTML and CSS and some unobtrusive Javascript, using the jQuery library, for the effect itself."
10 CSS Navigation Menus
"Creating navigation with CSS is one of the most crucial elements of website design. Get the navigation right, and people will feel welcomed and at home. Get it wrong, and it can spell trouble for your website. This is a great collection of 10 CSS navigation examples and tutorials to get you in the creative mood."
Nine Techniques for CSS Image Replacement
"Reader Dave Madden had pointed out Dave Shea’s 2003 article Revised Image Replacement where he shows the many different image replacement techniques. That article, combined with a few other things I read and my own ideas, totaled nine different techniques! So I made up a proper testing page with all nine techniques and put them to the test."
A Killer Collection of Global CSS Reset Styles
"Using a well-crafted set of global CSS reset styles enables designers to make assumptions about the defualt behavior of browsers. These presentational assumptions greatly simplify the process of creating a “universally” consistent CSS design using only one set of CSS rules. Such process simplification results in great savings of time and money. Many of the industry’s top designers have been using CSS reset styles for years, reaping the rewards and sharing the results."
Printing the web
"The screen is just one of the media types for which we have to design for. Another media type, which I feel is often neglected as part of the design process for a web site, is print. There are times when a web designer has to know about print design. Not just the values and aesthetics of designing for print, but the terminology, measurements and production values that are important in print design—including typesetting."
Cutting and sewing grid-based design: Part 1, working with other people's comps
"Visual designers have written about grid-based web design already. Few people, however, seem to have talked about their actual process of getting a comp, cutting up its graphics and using it to produce actual CSS. As you may know, this blog is all about exposing my processes. So I thought there might be some value in writing about it."
Tutorials Round-Up: Ajax, CSS, PHP and More
"You don’t have to re-invent the wheel all the time - you can use existing solutions, modify and improve them and publish them as well - just the way other people did it for you. In this post we’ve covered over 200 Ajax, CSS, Flash, JavaScript, PHP, MySQL, RSS, XML as well as ASP, C++, Perl, Python and Java tutorials."
Powerful CSS-Techniques For Effective Coding
"In this post we present 50 new CSS-techniques, ideas and ready-to-use solutions for effective coding. You definitely know some of them, but definitely not all of them. Some technique is missing? Let us know in the comments to this post."
CSS-Based Navigation Menus: Modern Solutions
"How do designers cope with a challenging task to create an attractive and usable menu? Which results can be achieved? OK, that’s a tough one. Let’s take a look around. Below you’ll find 53 beautiful and user-friendly Navigation Menus and solutions web-designers came up with using basic CSS styling."
Printing the Web: Solutions and Techniques
"Good news: web-developers can control the way web-site looks on the paper.To make sure that no data will lost and the legibility of content remains optimal after the printing, you can, of course, use CSS. There are many options and techniques you can use developing print layouts. Here is a quick overview of some interesting solutions you can use to generate print layouts “on the fly”."
CSS-Based Footers: Modern Solutions
"The smallest things can make a big difference - one of those smallest things are footers, used to visually close the content of a page; however, as you’ll see below, sometimes they also have some more functions."
CSS-Based Tables: Modern Solutions
"Tables can present data quite efficiently, particularly if you can use some sorting or filtering functions in order to improve the legibility of the text stored in the table. Let’s take a look around: over 30 modern css-based techniques in a brief overview."
CSS-Based Forms: Modern Solutions
"In Web 2.0 registration and feedback forms can be found everywhere. Every start-up tries to attract visitors’ attention, so web-forms are becoming more and more important for the success of any company. In the end, exactly those web-forms are responsible for the first contact with potential customers. Let’s take a look, which modern solutions a web-developer can use, designing his/her next css-based form."
CSS: Techniques, Tutorials, Layouts
"Since web-development is a quite dynamic field nowadays, new techniques are being developed and updated all the time. A primary example are CSS-related techniques, which emerge almost every day and offer more possibilities for fellows web-developers. We keep an eye on the recent developments and collect new ideas and methods for our readers. A “fresh” round-up of the “fresh” CSS techniques, tutorials and layouts."
Microformats: What They Are and How To Use Them
"This post is supposed to give you an idea, what Microformats actually mean, which advantages they have and how you can use them to enrich your content and make it more visible and understandable for search engines."
Push my button
"If there’s one element I think doesn’t get enough respect, it’s gotta be button. It’s played second fiddle to input in tutorials and form examples for as long as I can remember. The few times it actually did get some attention, the lowly button was used and abused by the DHTML crowd—forced to accept obtrusive inline event handlers and other such nefarious crimes against semantic markup."
Markup as a Craft
"The quality of your markup will affect the quality of related code, and even the cost of implementing or maintaining that code. Your markup might be good now, but following the guidelines in this article will help bring it to the next level."
Coding for Content
"Strongly inspired by the work of Edward Tufte, I recently reworked the design of my personal site to focus on content and ideas rather than on decoration or visual effects. I’ve already discussed my approach to the visual design of the site, but now I’d like to share what’s going on behind the scenes."
CSS 102
"Block-level elements display their borders and backgrounds in quite a different way than inline elements do. Having an understanding of these distinctions will help you decide how to use them in your design. In fact, we can add borders and/or backgrounds to elements to help us see whether they are block-level or inline elements."
Generating Dynamic CSS with PHP
"I will design a mock up of a basic site layout using CSS. It will include a masthead, menu and content area. I will then assign three color schemes using PHP for the background and foreground colors of each element in the layout and show you how you can easily switch between each one or add new schemes—all from one script. I’ll conclude the article by suggesting ways you can extend or improve on these ideas for your own site."
Integrating CSS with Content Management Systems
"Building CSS editing features into our content management systems allows us to make style changes as easily as we make content changes. In the future, managing the design of a Web site at the tactical level will be as easy and efficient as managing content."
Why and How: Styling Text Links
"Text link styling is a design issue impacted by all of the very same issues that affect the overall site design. Poorly styled text links can detract from or ruin an otherwise well-designed page, while appropriately styled text links can add significant support to the brand and enhance the user experience. Since text links are a significant feature of the online experience, it’s an element of design worth getting right."
Make your site cross browser compatible in 5 steps
"Making your site cross browser compatible is not easy, but with this tutorial you can make your site cross browser compatible in 5 simple steps."
CSS Adjacent-Sibling Selector
"An adjacent sibling selector will select the sibling immediately following an element, with the same parent. In this example, I will show you how to use the adjacent-sibling selector to style this list."
Auto-Cropping Rounded Corners
"This solution offers something new to the world of rounded corners. What it does is this: it crops the content below it, so that anything with a background color or image (headers, paragraphs, even images) automatically get the rounded corner treatment with no extra work."
10 CSS Form Examples
"Forms can be greatly enhanced with a touch of CSS, making them more usable and far more visually attractive. Follow some of the examples below and you'll be creating stunning CSS forms in no time at all."
Create a Tabbed Box with YUI Tabs
"Tabbed boxes are all the rage these days. I think it's for a good reason. It allows you to add more content to a page with less clutter while engaging visitors to interact with the site. Plus it's just kinda fun. Using the Yahoo! UI Tab View, creating a tabbed box is really pretty easy."
Clean Tab Bar Digg-like using CSS
"This tutorial explains how to design a clean Tab Bar (Digg-like) with rounded tabs (liquid width) using CSS and just one background image to manage all status for each tab (standard, active, hover)."
Extensible CSS Interface III: Adding Ajax Interactivity
"This third article documents the underlying components of Ajax, examines a few examples of Ajax in the demo, and wraps up with a shout-out to resolution dependence."
CSS Positioning
"There are many ways to position your elements in CSS. Relative positioning, absolute positioning or a combination of both. I’ll explain those ways with some clear examples."
CSS Attribute Selectors Explained
"Currently, you really have to do some digging to figure out exactly how to use them, but I hope this article explains them all better. Basically, attribute selectors allow you to target elements based on their attributes (i.e. alt, href, title, etc.). In the table below, you can see all the different options for attribute selectors."
Improved Navigation Image Replacement
"So my co-worker at work today was slicing a design, and the designer said that the navigation had to be images. Being the good little accessibility people that we were, we were trying to figure out a way to use images, but have text also show up when images are disabled."
Centering Absolutely Positioned Items
"A client wrote to us before we were ready to launch and said that they noticed a large white margin on the right hand side. We had to explain to them that since the design was left aligned and the picture can’t go on forever, there has to be an end to the design. We decided to center the design in order to make it look better."
Calculating Font Sizes
"There are a lot of articles out there about typography on the web. I wanted to explain my method of controlling font sizes and margins in CSS."
Creating multicolumn lists
"Until browsers support CSS 3 specifications, Web builders will need to rely on other techniques for creating multicolumn lists. Here's a look at some of the techniques that work with today's browsers."
Extensible CSS Interface I: The Foundation
"When drafting markup, the factors I consider most important are that it be as 1) meaningful and as 2) lightweight as possible."
CSS Selectors & jQuery
"This article provides an opportunity to dive deeper into markup and even a little scripting with the intent of educating the less experienced designer/coder, while furthering the knowledge of more experienced readers in the audience."
3 Simple Steps in Coding a Rounded Corners Layout
"Various rounded corners techniques often include several additional elements that are purely presentational. Let me show you my approach to coding just that, fixed width, rounded corners layout in 3 simple steps."
Perfect pagination style using CSS
"I decided to publish a very simple post which explains how to design a perfect pagination style using some lines of HTML and CSS code."
Styling BUTTONS, and achieving sliding doors with them
"Why style buttons? There just are some designs where it would look better, as well as give the end user a better experience if the buttons match the rest of the web site. I have full respect for native looking buttons overall, but in some scenarios they just don’t cut it."
Mediatyping
"Just prior to jetting off to Austin last week, I started playing around with a mobile version of this site. While a personal blog is hardly a site that really needs one (unlike, say, an app with a proven mobile user-base like Twitter), I wanted to see what would be involved in re-factoring this design into something more fitting for a mobile environment."
Guide to a Print Friendly Website
"After a week of finding articles and not being able to get a decent print, I aimed to fix it for our site, and then write about how others could do the same. If you're a designer and you're getting a lot of traffic, it stands to reason that someone may at some point print out your article for later reading."
Most used CSS tricks
"Earlier before I have written an article about current best CSS hacks which you can see here And now here’s the list of today’s most used CSS tricks – tips. I have added image examples for most of them because of critics on CSS hacks article."
How to design a sexy header for your site using CSS
"I decided to publish a post with the "process" I use in general to design graphical sections for my web sites."
My Development and Design Process
"My first step is an attempt to envision the overall structure of the document. I’ll first pick out the overall structural elements that need to be put in place. From there I’ll pick out such things as divisions, lists, paragraphs, headings, and definition lists, as those are the most common elements I end up working with. This process of envisioning the document structure doesn’t take long, but proves to be extremely valuable."
Improving Your Process: CSS Techniques Part 1
"This first group of tips revolves around some CSS techniques I find myself using constantly. I’m sure you’ve heard of some, if not all, but hopefully something comes across as new and possibly helpful. This list consists of just a few ideas I keep in mind while developing, and there are more to come in future articles."
Smoothing out the Creases in Web Fonts
"Designers often choose one of the core Web fonts for body text because they are widely available, but like all typefaces, they render differently on different operating systems."
Aligning Images The Right Way Using CSS
"Images are great for blog posts and chunks of text in general. Even if they're just remotely relevant, they'll add some space and make the content more accessible. You want to spice your texts up with images."
Creating Sexy Stylesheets
"Being a CSS expert is more than just memorizing selectors. It’s also working to improve the maintainability and efficiency of your stylesheets, planning for the future and mastering your workflow. In this article Jina Bolton gives 10 CSS tips culled from surveys with 12 top designers."
Streamline your forms with widgets
"“Advanced forms” are rarely that. A more fitting name would be “Overwhelming and confusing forms”. But with Jason Long’s clever approach to streamlining a screen full of checkboxes, you might just be able to once again look fondly on your forms."
Simple Double Quotes
"This CSS tutorial will show you how to display two double-quote images using one blockquote tag. The trick here is apply one background image to blockquote, and then apply another background to the first-letter (pseudo-element) of blockquote."
Trash All IE Hacks
"Let’s admit it, we all hate Internet Explorer 6. About 80% of our CSS debug time are spend on IE6. We all know that IE6 is outdated and has horrible CSS rendering engine. However, most average Internet users haven’t realized that yet. Why? Because we put our hard work on it and patch the bugs by various IE hacks. Well, it is time to do something..."
Advanced CSS Menu
"Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property."
Photoshop Template for Blueprint CSS Comps
"I created an Adobe Photoshop template for creating comps that work with Olav Bjorkoy's Blueprint CSS Framework. The Photoshop template is simply a document with vertical guides based on the 24 units provided by Blueprint. A layer is provided to show unit numbers if you like, and 2 layers showing the grid dividing into thirds and quarters."
Illustrator Template for Blueprint CSS Comps
"I created an Adobe Illustrator template for creating comps that work with Olav Bjorkoy's Blueprint CSS Framework. The Illustrator template is simply a document with guides based on the 24 units provided by Blueprint. A layer is provided to show unit numbers if you like, and 2 layers showing the grid dividing into thirds and quarters."
Combating Classitis with Cascades and Sequential Selectors
"There is a disease out there in the CSS world. It can afflict anything from the meanest weblog (or the nicest ones too, I suppose) to the greatest of corporate websites. It’s called Classitis, and I’ve encountered it far too often in my professional work. Perhaps you’ve seen it too."
Great CSS Techniques and the Simple Truth Behind Them
"There is a simple recipe to judge CSS techniques: Does the method in question require HTML additions and modifications beyond introducing certain IDs or classes? If yes, the technique is likely to be not very elegant, in fact, it might be inadvisable, depending on the strictness you’re applying."
Write a well structured CSS file without becoming crazy
"This is a descriptive post about how to write a well structured CSS file. I already spoken about code readability in CSS files, but after several most specific requests about this argument (mainly about the difficult of some readers to manage CSS file with a big quantity of layout elements), I decided to illustrate the process I use in these cases."
Legends of Style Revised
"When I wrote the original article on how to achieve cross-browser consistency when styling form legends, I noted that there was a bug in the way Firefox handled them. The bug appears to still have not been resolved, but there is a way to achieve the same effect across browsers."
Rethinking CSS Image Replacement
"When I say CSS image replacement, I mean taking a page element that isn’t normally an image and turning it into an image. This is a very common trick and popular because of it’s semantic meaningfulness and SEO benefits. A common place to use this is with a header tag."
A Command of Headings: Usage and Styling
"I command thee, headings. Do not defy me as I am the all-powerful web developer. I am your master for I wield a style sheet with which I can make you mine..."
10 CSS Form Examples
"Forms can be greatly enhanced with a touch of CSS, making them more usable and far more visually attractive. Follow some of the examples below and you'll be creating stunning CSS forms in no time at all."
8 Premium One Line Css Tips
"The best solutions are often the simplest. Here's a list of 8 tips that contain only one css property."
CSS Typography
"Traditional typography is a very subtle and beautiful form of design, with thousands of variations and choices. Unfortunately, with CSS that’s not quite the case. Don’t lose hope just yet, though. CSS can do more than you might think."
The Evolution of Corporate Web Sites
"It’s fascinating to see how corporate websites have evolved over the years, from the early days of magazine-style brochureware to the most recent trends of two-way Web interfaces."
Keep CSS Simple
"Otherwise sensible Web developers have wasted enormous amounts of time in finding and improving countless CSS hacks. In my opinion these hacks are a danger to Web development, both from a psychological and from a technical point of view."
Equidistant Objects with CSS
"Creating a horizontal row of objects that are equidistant from each other is another one of those things in web design that is much more difficult than it should be. This can be a very useful thing to do, especially in fluid width layouts when you are trying to make the most of whatever horizontal space you have."
Book-style Chapter Introductions Using Pure CSS
"Today’s tutorial will show you how easy it is to create book-style chapter (article, whatever) introductions using nothing but pure CSS — no XHTML was harmed in the making of this tutorial."
Pure Css Data Chart
"Data visualization is mostly achieved with flash applications or with help of some programming languages. Are those solutions the only way to present, let's say simple data chart? How about giving it a try with nothing but good ol' css?"
The Incredible Em & Elastic Layouts with CSS
"This article will walk you through creating a basic elastic layout; what exactly an “em” is and how to calculate them, how to use ems to create an elastic layer for content with scalable text and images, including basic vertical rhythm."
Vertically center content with CSS
"A convenient benefit of using tables is the ability to vertically center content within a cell using the valign attribute. Unfortunately, acheiving the same effect with CSS isn’t so convenient. So, as we continue to move towards tableless structures, there comes a need for a simple and valid CSS alternative."
HTML5, XHTML2, and the Future of the Web
"The next generation of these technologies is arriving, and they are worth keeping an eye on. These technologies will affect everyone in the business."
The Big Picture on Microformats
"In this article, we’ll review what people are doing with microformats right now, and finish up by looking at a couple of cool projects that might whet your appetite for microformats’ future prospects."
Web 2.0 for Designers
"There are six trends that characterize Web 2.0 for designers. In this introductory article we’ll summarize each of those trends and give brief examples."
Architecting CSS
"Gone are the days of creating a single CSS file and dropping in rules as needed. As we build new sites, it is necessary to spend time planning how to organize and structure CSS."
Web Design 101: Floats
"This article will introduce you to the basics of float, explain how to contain a float when the floated element is larger than the size of its container, and give you example layouts created with floats."
Web Design 101: Backgrounds
"The CSS background property allows you to apply background colors and images to elements as required. But there are plenty of strange quirks and bugs that may surprise the unwary developer."
Web Design 101: Positioning
"Let’s shed some light on the shadowy mysteries of CSS positioning. If your CSS skills are limited or even moderate, you will learn what you need to master positioning."
Microformats Primer
"Microformats are about using the standards we all know and love to convey as much semantic meaning as possible. Think of them as semantic best practices."
If I Told You You Had a Beautiful Figure...
"Lay out images consistently across your site using a liitle clever JavaScript."
Setting Type on the Web to a Baseline Grid
"Over the last year or so, there’s been a lot of talk about grid systems and using column grids for website layouts."
Quick CSS Mockups with Photoshop
"Create quick design mockups in clean XHTML and CSS, using code generated by Photoshop. No, really."
Cross-Browser Variable Opacity with PNG: A Real Solution
"Think you’re stuck with wimpy GIFs and their rigid binary transparency? Well, think again, Sunshine. Michael Lovitt shows how to overcome flaky browser support for PNG so you can take advantage of this graphic format’s lossless compression, alpha transparency, and variable opacity."
Slash Forward (Some URLs are Better Than Others)
"Some URLs are better than others: easier for visitors to remember, easier for designers and developers when it comes time to change the technology that drives the site. Waferbaby neatly and briefly considers the effect of web addresses on usability, design, and ease of maintenance and technological transition."
The Trouble With EM ’n EN (and Other Shady Characters)
"More than you ever wanted to know about dashes, spaces, curly quotes, and other vagaries of online typography. HTML specs, grammatical rules, browser bugs and character encoding—it’s all here, in this famous and much-bookmarked ALA article."
Frameworks for Designers
"Learn to harness the power of tools, libraries, conventions, and best practices to focus on what is unique about the project at hand."
Multi-Column Layouts Climb Out of the Box
"Create an elastic multi-column layout of equal height."
Super-Easy Blendy Backgrounds
"Create a PNG that’s blended from transparent to white, use it as a background image, and rely on the background-color style to provide the other half of the blend."
12 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."
Automatic Magazine Layout
“Finding an attractive way of displaying any two, three, or four images together (regardless of shape and size) has always been difficult without manual resizing or cropping.”
Prettier Accessible Forms
"I wanted to create something that anyone could easily reuse on any project: a style sheet that, when applied to a correctly marked up HTML form, would produce the basis of the required layout."
A More Accessible Map
"Is there a way to display text-based data on a map, keeping it accessible, useful and visually attractive?"
Thinking Outside the Grid
"There is a new kid on the block, and her name is ‘I’ve never designed with a table in my career.’"
Improving Link Display for Print
"It seemed my zeal for linkage had come into conflict with my desire to improve print usability."
High-Resolution Image Printing
"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."
Complex Dynamic Lists: Your Order Please
"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
"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
"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
"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-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."
Big, Stark & Chunky
"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
"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."
Pocket-Sized Design: Taking Your Website to the Small Screen
"Creating a handheld-friendly style sheet that works well even on handheld screens no wider than 120px."
Drop-Down Menus, Horizontal Style
"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
"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."
Dynamically Conjuring Drop-Down Navigation
"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."
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."
Separation: The Web Designer’s Dilemma
"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
"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
"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
"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
"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
"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."
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."
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."
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."
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."
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. Frequent ALA contributor Stuart Robertson shows how."
Elastic Design
"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
"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
"CSS design from beyond the grave: all the secret ingredients you’ll need to resurrect the image map using CSS and structurally sensible XHTML."
JavaScript Image Replacement
"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."
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."
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!"
Facts and Opinion About Fahrner Image Replacement
"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
"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
"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."
Build a PHP Switcher
"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
"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."
CSS Design: Mo’ Betta Rollovers
"Design smarter, faster, better rollovers with CSS."
Better Living Through XHTML
"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."
Practical CSS Layout Tips, Tricks, & 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."
CSS Talking Points: Selling Clients on Web Standards
"Selling your clients on standards-compliant design doesn’t have to hurt. Kise’s four-point CSS Selling Plan helps the medicine go down."
CSS Design: Size Matters
"Everything you think you know about controlling text sizes on the web is either wrong, or else it doesn’t work. In this much-bookmarked ALA classic, UI designer and CSS Todd Fahrner provides a way out of the mess by showing how to make CSS font size keywords work – even in stubborn browsers that get CSS wrong."
Applying progressive enhancements to your website
"The key aspect here is that the core content is accessible to everyone. It allows you to add enhancements to a page while not requiring the end user to have specific technology enabled or plugins installed."
Time-Savers: Code Beautifier And Formatter
"The tools and services we've collected below aren't validators. They format and beautify the code; some of them can remove redundant elements. Using them, you have to make sure you have a backup, so your data can always be restored."
35 Designers x 5 Questions
"35 designers. 5 questions. 5 precise answers. Result: 175 professional suggestions, tips and ideas from some of the best web-developers all around the world."
Get Specific with Your CSS Styles
"Other than being the C in the acronym CSS, the fact that style sheets are described as "cascading" refers to an important, if complex, part of the way styles are applied to the elements in a document."
HTML Intermediate Tutorial
"This guide adds a few nuts and bolts, which shouldn't be particularly difficult as such, but will add a bit more to our understanding of HTML and enable us to do a few more things."
HTML Beginner Tutorial
"This tutorial should be quite easy to follow if you work through each step. These are all brought together at the end."
Listamatic
"Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list."
Selectutorial
"Find out more about CSS selectors including the structure of rules, the document tree, types of selectors and their uses. There is also a step-by-step tutorial showing how selectors are used in the process of building a 3-column layout."
Listutorial
"Listutorial takes you through the basics of building background image lists, rollover lists, nested lists and horizontal lists."
Floatutorial
"Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts."
CSS Intermediate Tutorial
"This CSS Intermediate Guide should not be that difficult, but rather build on the basics."
CSS Drop Shadows
"What if we had a technique to build flexible CSS drop shadows that can be applied to arbitrary block elements? If you’re not sold yet, we can also tell you that it requires minimal markup."
CSS Beginner Tutorial
"The purpose of this guide is to teach the bare essentials - just enough to get started."
CSS Advanced Tutorial
"The CSS Advanced Tutorial is for those who want to push CSS to the extreme, highlighting methods that might not be immediately obvious to the intermediate developer."
5 HTML elements you probably never use (but perhaps should)
"This is a list of HTML elements I've found to be very poorly represented in most markup on the web today."
15 CSS Properties You Probably Never Use (but perhaps should)
"These are all CSS level 2 properties but some of them don't work in all browsers, so make sure and test things out before putting them into use."
10 CSS Tips from a Professional Front-End Architect
"Simply thinking through your process before starting each project will save you headaches as the site grows."
Large clickable boxes as navigation with CSS and DOM
"A client asked for a proof of concept how you could create large clickable boxes as a navigation. They wanted the whole box clickable, and if the link is a section link with child elements they wanted an indicator that there is more."
CSS Slicing Guide
"Learn to slice your templates into fully valid XHTML and CSS web pages"
Learn CSS Positioning in Ten Steps
"This tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float."
Ten CSS tricks you may not know
Ten more CSS tricks you may not know
"Our article, Ten CSS tricks you may not know1 has proven to be such a success that we decided it was time to offer you ten more CSS tricks that you may not know."
Spanky Corners
"Spanky Corners is an experimental technique for using only CSS to produce round-cornered content boxes with semantically pure markup. It does not require JavaScript to work"
CSS Rounded Corners 'Roundup'
"This is a collection of techniques to create boxes with rounded corners using CSS. I've provided some more information about each method in order to help people choose which best fits their needs."
How to Create a Block Hover Effect for a List of Links
"Among the many things to like about Veerle's redesign of her blog is the way she does the hover effects for lists of links. Rather than force others to wade through Veerle's CSS, I thought it'd be helpful to show how to create this "block hover" effect."
CSS tricks for custom bullets
"One secret weapon of CSS-based designs is the background property, which adds images and color to the background of any element on a Web page. It opens up a creative toolbox for styling links, bulleted lists, and more."
Typographic Contrast and Flow
"By creating contrast, you can direct the reader's attention to the important messages and at the same time enhance the visual appearance. Here are seven basic methods to create typographic contrast."
CSS: The All-Expandable Box
"I am going to attempt to explain how to make an All-Expandable box, with the following features: Works in all major browsers, Expands both vertically and horizontally, Uses a single background image"
CSS Gradient Text Effect
"Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash)."
Accessible expanding and collapsing menu
Creating a table with dynamically highlighted columns
"I like Crazy Egg's pricing table on their Pricing & Signup page. When you click on "Sign Up" for an option, that plan's column highlights, the other plans vanish, and a signup form takes their place."
A CSS styled table version 2
"This article is about the proper usage of tables, for tabular data. How you can implement them with accessibility in mind and how to make them appealing for the eye using CSS."
Creative Use of PNG Transparency in Web Design
"PNG is a losslessly compressed bitmap image format. In plain English, it’s a way of saving graphic images that reduces file size without reducing image quality."
Fancy Form Design Using CSS
"This chapter will explore the ways in which you can design a great-looking form, and provide you with the necessary code, which we'll work through together."
CSS Frameworks + CSS Reset: Design From Scratch
"Using frameworks, you can get yourself a perfect default stylesheet and markup, save your time and ensure the best quality of your code from the very beginning."
CSS Star Rating Redux
"There were some significant issues with my last Star Rating tutorial and I have always wanted to take another go at it."
CSS - A Recipe for Success
In this tutorial, Paul at Search-This demonstrates how to style a restaurant menu in CSS.
How to Size Text in CSS
"In this article, we will reconcile the designer’s requirement for accuracy with the user’s need to resize text on demand, arriving at a best practice that satisfies designers and users and works across browsers and platforms."
CSS Sprites
"What They Are, Why They’re Cool, and How To Use Them"
Using multiple classes within selectors
"Creating a multiple class selector may make the selector more specific or give it additional weight. This means it will overwrite less specific selectors."
Get Cooking with Photoshop and CSS - 3 Low-fat Recipes
"Corrie shows how easy it is to tweak the graphic ingredients of your designs to produce completely different results. She cooks up three tasty design styles in Photoshop, then shows, step-by-step, how to reproduce them using CSS."
Faster Development with CSS Constants
"Rachel Andrew delves into the world of CSS generation and looks at some CSS techniques that will prevent you from tearing your hair out as well giving you more time to shop for a hat to cover the bald patches."
Marking Up a Tag Cloud
"Mark Norman Francis looks at the increasingly ubiquitous tag cloud, and specifically how it can be marked up in HTML. It’s evidentially not a clear-cut issue, as everyone does it differently."
Showing Good Form
"James Edwards takes the good stuff down off the shelf and illustrates how forms can be built to be both highly stylable and remain accessible to all comers."
Compose to a Vertical Rhythm
"Richard Rutter scrutinises the typographical proportions and spacing that gives a written page its rhythm."
Revealing Relationships Can Be Good Form
"Ian Lloyd labels up and ships out a tip for improving the usability of form labels."
Centered Tabs with CSS
"Ethan Marcotte delves headlong into the sticky issue of centered, list-based tab navigation with remarkable verve and compelling results."
Practical Microformats with hCard
"Drew McLellan takes a practical look at the hCard microformat and how easily it can be added to existing markup."
CSS Layout Starting Points
"Rachel Andrew discusses an approach to rapid and reliable CSS development. Save hours of layout work and testing on your next CSS build"
70 Expert Ideas For Better CSS Coding
"We've taken a close look at some of the most interesting and useful CSS tricks, tips, ideas, methods, techniques and coding solutions and listed them below. We also included some basic techniques you can probably use in every project you are developing, but which are hard to find once you need them."
53 CSS Techniques You Couldn't Live Without
"Let's take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites."
CSS Specificity: Things You Should Know
"CSS Specificity isn't simple. However, there are methods to explain it in a simple and intuitive way. And that's what this article is all about."
CSS Float Theory: Things You Should Know
"Let's try to tackle the issue and clarify some usual misunderstandings, which always appear once floats are being used. We've browsed through dozens of related articles and selected the most important things you should keep in mind developing css-based layouts with floats."
6 Keys to Understanding Modern CSS-based Layouts
"Much of CSS is pretty straightforward and, I suspect, quite easy for most people to grasp. There's font styles, margin, padding, color and what not. But there's a wall that people will run into... that point where a number of key elements need to come together to create a solid CSS-based layout that is consistent cross-browser."
Debugging CSS with the DOM Inspector
"Jon Hicks demonstrates how to use the Firefox DOM Inspector to debug problems in your CSS."
Swooshy Curly Quotes Without Images
"Simon Collison questions the use of quote-mark images for the aesthetic styling of blockquotes. In doing so, he demonstrates a method of achieving the same purely with CSS."
"Z's not dead baby, Z's not dead"
"Andy Clarke dusts off the CSS z-index property to take control of the depth of his positioned elements."
Transitional vs. Strict Markup
"Roger Johansson returns to first principles and considers the fundamental differences between Transitional and Strict DOCTYPEs, as well as some of the common mistakes made when dealing with each."
Auto-Selecting Navigation
"Drew McLellan takes a quick look at a simple method of styling navigation so that the correct item shows selected on each page."
Diagnostic Styling
"Eric Meyer describes a technique for using CSS as a diagnostic tool for finding potential problems or issues within a page. Going beyond the styling for the delivery of a site, the use of CSS as an author-time development tool holds many possibilities."
CSS for Accessibility
"Ann McMeekin decks the halls with some practical CSS techniques that can help in making your site design as accessible to as many different users as possible."
Back To The Future of Print
"Natalie Downe sets the presses rolling with an in-depth look at the state of print stylesheets in 2007. Often neglected by developers but much loved by the user, the simple print stylesheet can really add that finishing touch to even the best site designs."
Typesetting Tables
"Mark Boulton revisits the HTML data table for a quick look at how legibility and communication of complex data can be helped through ca