Shortening CSS Codes

CSS itself is an amazing time-saver, making it so much easier to customise entire websites with one file.. so, who'd have thought it'd be possible to make your CSS even smaller? Let's deal with things alphabetically.

Background

Currently, there are five CSS properties which control the way your background can look. They are: background-color, background-image, background-repeat, background-attachment and background-position. In this order, the properties can be compressed to background and the values placed in one 'string' like so:
background: #color url(image.gif) no-repeat fixed top left;

Each section of the above shortened version is one of the values (see Customising the Page Background for more values) of the properties as follows:
background:
    #colour => background-color
    url(image.gif) => background-image
    no-repeat => background-image
    fixed => background-attachment
    top left => background-position
;

Of course you won't always want a background image and that's fine too. Any value you don't want, you can simply skip (e.g. background: #color url(image.gif);). It might be worth noting, however, that if you don't specify a value the browser may 'choose' one by default. For example, if you link to a background image but don't specify how you want it to repeat, it'll repeat in both directions itself.

Border

The border property has so many values it'd almost be tempting to create an entirely different tutorial. I think I can cram it all in here though!

First, there is a property for each 'side' of an element to which you can apply a value to: border-bottom, border-top, border-left and border-right. Each of of these has a set of three more properties to actually customise the border: border-width, border-style and border-color. So following this logic, if we want a solid black border 1 pixel wide all the way around, this is how we do it:
border-top-width: 1px; border-top-style: solid; border-top-color: black; border-right-width: 1px; border-right-style: solid; border-right-color: black; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; border-left-width: 1px; border-left-style: solid; border-left-color: black;

What a mess! 12 lines of code for one border? Imagine if we wanted a border around multiple elements in the stylesheet — we'd have enormous stylesheets! To solve this, we can first 'squish' our properties down to fix up each side at a time (with the values in the order as specified above):
border-top: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid black;

This method still leaves us with 3 lines of redundant CSS so we will compress our code even further: border: 1px solid black; — this will affect every side without the need for several lines of pointless styling. The beauty of this single-line declaration is that you can define an entire 'set' of borders and then, if you want something different such as an extra thick border at the top, you can customise just the top border width like so:
border: 1px dashed #ff0000; border-top-width: 10px;

Font

Almost finished!

List

Almost finished!

Padding/Margin

Both padding and margin can be reduced down in identical ways. Firstly though, let's look at how not to do margin/padding, i.e. the long way:
margin-top: 10px; margin-right: 8px; margin-bottom: 6px; margin-left: 4px;

I've given each side a different value to make it easier to demonstrate the compression. Margin/padding is simple to shorten in that each value can be placed on one line with a single space between each measurement value. The measurements must be arranged clockwise, so: margin: top right bottom left;. Applied to our given values above, this is:
margin: 10px 8px 6px 4px; (where margin: can be replaced with padding: where necessary).

Tags: ,
Last Updated On: 24th February 06 by Jem
Bookmark At: StumbleUpon, Digg