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.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>CSS

The Four CSS Rules of Multiplicity

One quick and easy way to keep your CSS clean and well-structured is to remember (what I’m going to title) the four CSS Rules of Multiplicity. They are: Multiple declarations can live in a single rule. Multiple selectors can preface the same rule set. Multiple rules can be applied to the same selector. Multiple classes can be set on a single element.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>CSS

When to Use CSS IDs and Classes

There are three different ways in CSS you can dictate which elements you want to style. Each way is useful for a specific set of purposes, but by using all three together, you can really harness the cascading power of style sheets. The three methods of describing objects on a page are by their tag name, their ID, or their class.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>Information Design>CSS

Print-Friendly Images and Logos with CSS

In certain instances, not everyone views every portion of your website online: eventually, someone is going to print parts of it. In many cases, this is perfectly fine: if you have a print style sheet that takes care of your worst sins, your website should look okay. But one area where it may still look lackluster is the images.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>Graphic Design>CSS

Five CSSriffic Treatments to Make Your Images Stand Out

Sometimes just having images isn’t enough. Sometimes we need a little help to make our outstanding images truly stand out. And that’s where CSS can help. Here are five things you can do, using CSS, to make the most of your images.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>Graphic Design>CSS

Easy CSS Dropdown Menus

Attractive dropdown menus have long been the realm of Flash developers and advanced JavaScript gurus. But that needn’t be the case. This tutorial will walk you through developing a clean, semantic dropdown menu using XHTML and CSS that works in all modern browsers!

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>DHTML>CSS

Show/Hide Content with CSS and JavaScript

Today’s tutorial will show you how to hide away extra bits of content using CSS and JavaScript, to be revealed at the click of a button. This is a great technique, because displaying the additional content doesn’t require a refresh or navigation to a new page and all your content is still visible to search engine bots that don’t pay any attention to CSS or JavaScript.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>Interaction Design>CSS

Bug Fix: IE Double Margin Float Bug

The double-margin float bug -- an Internet Explorer-exclusive bug wherein an element that is floated – and given a margin in the same direction as the float – ends up with twice the specified margin size -- has been a source of irritation for CSS-loving web designers for years. While an easy (if mysterious) fix has been known for quite some time now, it occurs to me that perhaps not everyone knows about it. So I thought it couldn’t hurt to toss another explanation out there.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>CSS>Web Browsers

Horizontal CSS Dropdown Menus

Last week, CSSnewbie reader Andrea Pluhar wrote in with an interesting problem: she wanted to use CSS dropdown menus like the ones we featured last week on a website that she was building, but the design called for the submenu to be arranged horizontally, not vertically. She sent me a mockup of what she was after (excerpted above) and wondered if there was a way to accomplish this effect using CSS.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>DHTML>CSS

Tab-Based Navigation in Six (or Seven) Easy Steps

Navigation bars are the signposts of the web world: we take them for granted because of their ubiquity, but we’d all have a much harder time getting around without them. On most websites, nav bars hold a position of honor near the very top of the page, meaning they’re one of the first things your users see upon entering your site. As such, there’s a lot of pressure on navigation bars to look clean, act sophisticated, and ply the client’s wife with small talk and Manhattans while you close the deal.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>DHTML>CSS

Style Your Links With CSS

With CSS, links don’t have to be ugly. They can look pretty much however you want. Here are a few of the things you can do to make your links stand out without sticking out.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>CSS

Why Doesn’t My CSS Work? Five Quick Fixes

You’ve been working on your brand new, beautifully cascading style sheet for most of the day. You save your work, load it into a browser, and… what the heck?! Nothing’s working right! You know you didn’t make any huge errors in your code, but something is obviously wrong. We’ve all been there before. But instead of wasting endless hours debugging your code, here are a few very simple things you can check in your CSS before you start pulling out your hair.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>CSS

Internet Explorer and the CSS Box Model

One of the differences between Internet Explorer and standards compliant Web browsers that cause a lot of trouble for CSS beginners is the CSS box model. Since the box model is what browsers use to calculate an element’s total width and height, it is quite understandable that different browsers producing different results can be both confusing and frustrating.

Johansson, Roger. 456 Berea Street (2006). Articles>Web Design>CSS>Web Browsers

Specify a Maximum Width for Em-Based Layouts

One technique that can easily make reading a site a lot more uncomfortable is using an elastic, or em-based, layout such as the one I use here (and talk about a bit more in detail in Fixed or fluid width? Elastic!) without specifying a maximum width in another unit.

Johansson, Roger. 456 Berea Street (2008). Articles>Web Design>Usability>CSS

Choose an Accessible Image Replacement Method

The technique of using CSS to replace normal HTML text, mostly for headings, with a background image in order to achieve a particular look has been talked about many, many times since early 2003.Several different image replacement methods have been proposed, each with their pros and cons. Some methods create accessibility problems, while others place restrictions on the type of image you can use or force you to use extraneous markup. No method that I am aware of is perfect.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>CSS

Screen Readers Sometimes Ignore display:none

Using display:none does not always hide content from screen readers like JAWS and Window-Eyes, but there is a workaround.

Johansson, Roger. 456 Berea Street (2008). Articles>Web Design>Accessibility>CSS

Spruce Up Your Search Box with CSS and a Background Image

Very few designers appreciate the aesthetic of a text input field, and styling form fields cross-browser on any Web site can be a tedious and frustrating experience. The compromise typically involves applying a simple colored border and background to the fields. I think this is the right approach for Web sites and applications that are form field intensive, but the search box plays a special role in the design, and it deserves a little more attention.

Reindel, Brian. d'bug (2008). Articles>Web Design>Forms>CSS

The Five Things Every CSS Beginner Must Know

Being a CSS beginner is difficult because you never know where to start the learning process. If you pose the question to any forum, you will get a myriad of answers, some good, but mostly, not so good. The worst is when you’re instructed to read the W3C documentation. That’s like asking a pilot in training to read the mechanic’s manual for the propeller.

Reindel, Brian. d'bug (2008). Articles>Web Design>CSS

CSS 2.2

There are various reasons why CSS 3 is taking so long. Many of the issues are technical and can’t be avoided; problems when testing, issues with backwards compatibility and bugs with browser implementation. However there also seems to be a lot of politics involved.

Budd, Andy. Andy Budd (2007). Articles>Web Design>Standards>CSS

Formal Weirdness

Explains some of the technical reasons for form controls being so hard to style consistently across platforms with CSS. Also asks a lot of good questions related to how various CSS properties should affect form controls if browsers would let them.

Meyer, Eric. MeyerWeb (2007). Articles>Web Design>Forms>CSS

Creating Bulletproof Graphic Link Buttons With CSS

A CSS problem I have been wrestling with lately is how to create a bulletproof shrinkwrapping graphic button. By that I mean an image-based button that will expand and contract to fit the amount of text it contains. It is a very useful technique for CMS-driven sites that allow the client to change the text that is displayed on buttons, as well as for multilingual sites.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Graphic Design>CSS

Thirty-Five Designers x 5 Questions

175 professional suggestions, tips and ideas from some of the best web-developers all around the world.

Smashing (2007). Articles>Web Design>CSS

Unobtrusive and Keyboard Accessible Connected Select Boxes

Any web developer who has created a reasonably complex form is probably aware of the concept of multiple select elements that are connected – choosing something from one select box either makes a new select box appear or changes the options of one that is already visible.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>CSS

Building Accessible Static Navigation with CSS

When building a navigation menu for a web site, steps should be taken to ensure that it is accessible, and degrades gracefully in older browsers with lesser CSS support. In this article we will explore one such implementation. The navigation menu you see in this example is built with valid, semantic HTML and CSS - no JavaScript is involved, as I felt this was unnecessary. The static (non-expanding/collapsing) nature of the example suits a web site comprised of twenty or less target pages.

Palinkas, Frank M. Opera (2008). Articles>Web Design>Accessibility>CSS

Automatic Numbering With CSS Counters

When writing documents, it is often useful to number sections and have a table of contents. You can number these by hand, directly in the markup, but this can be time consuming if the order changes and you have to edit all the numbers. CSS2.1 gives us a automated way to generate numbers using CSS counters, and this article will walk you through how to use them.

Storey, David. Opera (2008). Articles>Web Design>CSS