Category: CSS

Floated lists with CSS3 and jQuery

CSS, Javascript | October 2nd, 2009 | 19 Comments »

We should all be using advanced CSS selectors by now—they make our lifes so much easier! In this quick tutorial, I’m going to explain how you can have a nicely floated list of items. We will use jQuery to make sure IE understands it too.

(more…)

Belgian Beer Types, or How to Style a Definition List the CSS3 Way

CSS, HTML | July 30th, 2009 | 8 Comments »

Definition lists are an often forgotten HTML element, but they can be used in a wide variety of ways, and are actually the most semantically accurate element in many cases. So let’s see how we can mix up beer, HTML and CSS3, while explaining the purpose of the definition list element.

(more…)

Styling a Poem with Advanced CSS Selectors

CSS, HTML | June 15th, 2009 | 31 Comments »

CSS3 selectors offer endless possibilities of targeting specific HTML elements without the need of extra markup (which was already possible with previous versions of CSS). This time, I’m going to style the popular nursery rhyme “Twinkle Twinkle Little Star” using advanced CSS selectors, all in less than 5 minutes!

(more…)

An Ode To Border-radius

CSS | April 27th, 2009 | 36 Comments »

Ah! Border-radius: web designer’s sweetheart and (sadly) the one that IE8 forgot, destroying many a web designer’s dreams. In this post I’m going to explain how it works, what are some of the cross-browser alternatives, and showcase some websites that took a step ahead and implemented it.
(more…)

Adding Style With CSS: Beautiful Text

CSS, HTML | April 25th, 2009 | 4 Comments »

This may seem like a no-brainer, but adding style to your HTML is not just about adding pretty backgrounds and borders. The foundation of a good looking site has to be, with a couple other things, the way text is set. So let’s see how, with just a few lines of very simple CSS, we can quickly make our type a bit more beautiful and easier to read.

(more…)

A Tidier Internet Explorer Stylesheet

CSS, HTML | January 31st, 2009 | 6 Comments »

Until recently, I used to separate my IE only stylesheets as ie6.css and ie7.css (and sometimes even ie.css), but lately I’ve been thinking a lot about how inefficient and long winded this process really is. It has made me realize that I could just as easily use IE CSS filters to my advantage, and merge these separate .css files into a singular Internet Explorer specific CSS file, which would be much more efficient in the long run.

(more…)

Adding Style with CSS: A Beautiful Table

CSS, HTML | January 31st, 2009 | 8 Comments »

I’ve always enjoyed styling tables. I’m a perfectionist when it comes to it and I just love the process of adding little bits of love and care to completely transform a dull and drab table into something fun, lively and pleasant to look at. This article will go into one of the diverse ways in which I style them and I hope it inspires you to make your own exciting tables.

(more…)

Adding Style with CSS: A Beautiful Form

CSS, HTML | January 31st, 2009 | 17 Comments »

Forms don’t have to be ugly and boring, and certainly don’t have to be inside tables to look nice and aligned.
In this post we’ll take look at how to style a beautiful form using the power of semantic HTML and CSS.

(more…)

How to Start a CSS File

CSS | January 30th, 2009 | 4 Comments »

If you’re just taking your first steps into learning CSS, the moment where you need to actually start writing some code may be a bit daunting. You’ll probably end up asking yourself:

  • Where do I start?
  • What should be the first thing on my stylesheet?
  • How should I organize my code?
  • Are there any conventions?

(more…)

Beginner’s Guide to Margins and Paddings

CSS | January 30th, 2009 | 4 Comments »

At first they may look confusing – especially for a beginner web designer, or for someone from the old school (tables!), but margins and paddings are actually a simple part of CSS, and something easily controllable if we just follow some basic steps.

(more…)

Smashing Magazine Network