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.
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.
This is intended to be a quick tutorial explaining how you should lay out your HTML pages to ensure that your site works properly for all visitors and search engines. This tutorial assumes that you already have a general knowledge of HTML and CSS.
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.
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.
A while ago, I heard rumors that the next incarnation of HTML would include support for easily replacing HTML elements (such as headers) with images by simply adding a “src” attribute to the HTML tag. For instance, you might be able to do something like:
<h1 src="myimage.png">This is my alt text</h1>
However, it seems that the advent of this type of thing, if it ever happens, is still quite a ways off. Therefore, if you’re looking for an easy way to replace a plain text header with a nice image, for instance, a banner, you need to find another way of doing so.
This article will briefly explain how to do so using purely CSS.