Creating Killer Forms with CSS

So you’ve been to about a million websites at this point in your cyber life. There’s a little bit of everything in the online jungle, with every different imaginable style, color, and layout. Everyone is trying to be different, trying to separate themselves from the pack. So why is it that nearly every website, from the coolest of the cool to the worst of the worst, seem to still be using the same, ugly form fields that are default. Well, that’s about to change, at least on your website. I’m going to give you some quick and easy tips to spice up your form fields and set your website apart from the rest.

Robbins, Kyle. ReEncoded (2008). Articles>Web Design>CSS>Forms

Review: 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.

Hawley, Todd. Technical Communication Online (2003). Articles>Reviews>Web Design>CSS

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.

Bischoff, Alex. List Apart, A (2008). Articles>Web Design>Standards>CSS

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.

Nesbitt, Scott. ScottNesbitt.net (1997). Articles>Web Design>CSS

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.

Lemon, Gez. Juicy Studio (2007). Articles>Web Design>Accessibility>CSS

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.

Long, Jason. Vitamin (2008). Articles>Web Design>Forms>CSS

Twenty Best Simple and Inspirational CSS Web Designs

After looking through hundreds, maybe even thousands of websites, I’ve compiled the top 20 CSS websites for clean and simple design. What do these designs have in common? They all have clean simple interfaces and remain uncluttered and easy to read. Many of the designs display a good deal of illustrion or photorealism, two of my favorite current trends that can contribute a lot to a design.

Haig, Anders. ReEncoded (2008). Articles>Web Design>Graphic Design>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.

Enders, Jessica. List Apart, A (2008). Articles>Web Design>Usability>CSS

CSS Sprites2: It's JavaScript Time

In 2004, Dave Shea took the CSS rollover where it had never gone before. Now he takes it further still—with a little help from jQuery. Say hello to hover animations that respond to a user’s behavior in ways standards-based sites never could before.

Shea, Dave. List Apart, A (2008). Articles>Web Design>CSS>DHTML

Five Great Uses for the CSS Display Property

The display property is a bit of an unheralded workhorse in the CSS world. Even though the list of theoretical display property values is quite long, only three of them ever see any use (primarily due to poor browser support on the others): inline, block, and none.

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

Hiding Content in Your RSS Feed

I’ve been doing a bit of research lately on creating RSS-only content for my website – that is, content that shows up in my RSS feed and nowhere else.

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

Six Ways to Style Blockquotes

Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who’s to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS.

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

On Calendars, Lists, Tables and Semantics

I first came up with the idea for a list-based calendar at my 8-5 job as I was leafing through my appointments in Outlook. I thought about how useful it was to be able to switch between the month view, to the 7-day, to the 5-day, and so on as necessity dictated.

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

Using Definition Lists: Question and Answer Formatting

There are two big differences between unordered lists and definition lists. One, there are two different elements that belong in a definition list: dt’s & dd’s. In unordered lists, all you have is li’s. Two, the only default styling applied to definition lists is a bit of a left-margin to the dd elements — no bullets or other strange positioning to fight. Having two different tags to work with is what makes definition lists valuable.

Coyier, Chris. CSSnewbie (2008). Articles>Web Design>Information Design>CSS

Five Ways to Set Your Unordered Lists Apart

Unordered lists are one of the most pervasive elements on the web, probably just behind paragraphs and hyperlinks in terms of their bunny-like abundance. And for good reason: bulleted (i.e., unordered) lists are a great way to convey a bunch of related information in a rather small space, which is often the preferred way to read on (and thus, write for) the internet.

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

Understanding the CSS Box Model

A fundamental understanding of the CSS box model is essential to gaining a basic understanding of CSS in general. The good news is, if you can pack a box in real life, you can understand the CSS box model. And if you can’t pack a box in real life due to some traumatic physical injury, you shouldn’t have much of a problem, either. Also, I’m sorry about bringing up the whole box thing.

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

CSS Attribute Selectors: Built-In Classes

By using attribute selectors in your CSS, you’re able to target elements with specific attributes, or even specific values within those attributes. When using attribute selectors, the attribute is contained within [brackets], just like how .classes have a leading period, or #ids have a leading pound sign.

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

Writing CSS Shorthand

Writing Cascading Style Sheets saves you time and bandwidth in the long run by removing all of the presentational elements and attributes from your web pages and moving them into a separate document. But sometimes that CSS document itself can get pretty long as well. So what do you do then?

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

Using the CSS @import Rule

Even the most complex style sheet starts out with a single rule. But when you’re working on a particularly massive and complex website, over time your style sheet will inevitably start to reflect the site’s size and complexity. And even if you employ every trick of organizing your CSS in the book, you might find that the sheer size of the file is simply overwhelming. At that point, you might want to consider splitting your style sheet up into several smaller CSS files. That’s when the @import rule can come in quite handy.

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

Five Steps to a More Organized Style Sheet

One of the nice things about languages like CSS is that you don’t have to write them in any specific way. For example, you could place all the CSS rules for your entire website on a single line of text, and assuming you had some brackets and semicolons stuck in there at appropriate intervals, your website would render without a hitch.

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

Seven Tips for Great Print Style Sheets

CSS doesn’t apply exclusively to the Realm of the Screen. You can also write style sheets that apply to the medium that first spawned them – print. This can be a very useful trick, since people read on the screen very differently than they read print documents. So here are a few tips for creating a print style sheet that will ensure your website is user-friendly, regardless of the medium it ends up in.

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

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. We’ll use two types of selectors which I haven’t talked about yet here: adjacent sibling selectors and pseudo-element selectors. I’ll explain each type briefly before we get started.

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

How to Write a CSS Rule

The syntax of CSS is extremely simple to understand. A CSS file is essentially a list of rules. And each of those rules is comprised of two basic parts: a selector and one or more declarations. Each declaration also consists of two parts: a property and a value.

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

What Is This CSS Thing, Anyway?

So you’ve been hanging around the web gurus long enough to know that 'CSS' is something big and important in the web design world. You might even know that it has something to do with making pages pretty, or more Web 2.0, or something like that. And that’s true (to an extent). But what does CSS really mean?

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

Seven Tips for Replacing the Font Tag

Replacing font tags with semantic code and CSS isn’t as terribly difficult as it might seem at the outset. To help you along your way, here are a few tips on how to tackle the project.

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