CSS Hanging Indents

Every once in a while, you may find yourself in a position where you need to create a hanging indent on a paragraph or set of paragraphs on one of your pages. There isn’t really an out-of-the-box way to do so with CSS, but you can accomplish it pretty easily by combining two CSS properties.

In case you aren’t sure what a hanging indent is, it’s basically when the first line of a paragraph is flush with the left margin, but any subsequent lines in that paragraph are indented.

Styling a Definition List Nicely

Definition lists (dl) can be somewhat of a bear when trying to style them nicely. Because of the fact that the term/definition sets don’t have any kind of wrappers, you can’t successfully and reliably float them to place the terms on the left and the definitions on the right (however, once CSS2 and CSS3 selectors become more widely supported, you should be able to get more control).

However, you can do some nice things with definition lists. This article will show two examples of how definition lists could be used on your site and how to style them nicely.

Using CSS Sprites to Reduce Load Time

I’ve found quite a few articles and tutorials explaining how CSS sprites are basically the be-all end-all of Web development, going on and on about the idea that all of the icons you use on your Web site should be stored in a single file, reducing the amount of time it takes to load them individually and reducing the number of times a browser has to request something from your Web server.

It’s a great idea, in theory, but it’s not always practical. CSS sprites are extremely useful when you are working with fixed-size (height or width) elements on your site. However, they can be extremely tricky to implement (and generally not worth the effort) when you’re dealing with items that have dynamic heights and widths.

When you are dealing with fixed widths or heights, though, CSS sprites can be fantastic, especially if you have a slower Web server or if a large number of your users have slower Internet connections.

A Look Into HTML5 and CSS3

I spent most of the day today in a conference session dealing with the new elements that will be coming with the future of HTML5 and CSS3, presented by Molly Holzschlag. The session was extremely informative, and we discussed some really interesting topics. In addition to our discussion on HTML5 and CSS3, we discussed quite a bit about accessibility, browser limitations, the reasons that things are the way they are (doctype declarations, for instance) and how things might be in the future.

Molly made it very clear throughout the session that she does not own a crystal ball, so she obviously can’t tell us exactly how or when the final CSS3 or HTML5 specs will be completed and approved. However, she did give us some insight into the elements that have already been implemented and the elements that are in the process of being implemented in specific browsers. In this article, I will try to give a quick overview of some of the things she mentioned. Most likely, you’ve heard of most, if not all of these. However, I just wanted to put some of them together in one place.

How CSS is Implemented in E-mail Clients

The other day, Smashing Magazine tweeted about an updated guide to CSS implementation in e-mail clients. The guide is extremely helpful, as it shows you exactly what CSS techniques and features you can use within your HTML e-mail messages and which e-mail clients will display them correctly.

The chart displayed in theĀ original blog post shows over 50 different CSS techniques and elements are evaluated for 11 different e-mail/Webmail clients. Apparently the PDF and Excel versions of the chart that are linked from the post include more than 23 different mail clients. Unfortunately, looking at the chart, it appears that the safest way to create an attractive e-mail message that looks the way you intend in multiple e-mail clients is to code with tables and inline styles.

Interview with CSSMania Founder Gabriel Segura

Over the past year I’ve had several sites listed on a variety of CSS galleries. CSS Mania has always provided the most traffic and comments/votes and I thought it would be interesting to chat with the founder, Gabriel Segura. Gabriel was kind enough to answer our questions and the transcript is below.

Allen: Can we start with a brief overview of yourself?
Gabriel: My name is Gabriel Segura. I was born in 1975. I am a telecomunications engineer (working at Ericsson during the day), flash designer, front-end web developer and CSS Mania’s father (at night). Married with a beautiful woman, Susana, and father of a “real” daughter Claudia (3 years old). We also have a Himalayan Persian cat at home called “Yuna” (Final Fantasy X). God gave me a wife that loves to play PS3/Xbox/Wii more than me.

Allen: What is CSS Mania?
Gabriel: We believe that CSS Mania is the largest CSS showcase in the world.

Allen: Why did you start CSS Mania and when did it launch?
Gabriel: CSS Mania was born in March 2004 as a section on my personal blog as I loafed around the few CSS Showcases that existed during that time. In 2005, before our admired Paul Scrivens sold CSSVault to Jacob Gower, we realized that other CSS Showcases sites, except ours, weren’t updating very regularly. We know that updates are what make a difference to readers.

We aren’t interested in the geek insights or trivial discussions common on other similar sites. We are interested in learning what any CSS afficionado or professional might want to learn.