Whether you use CSS all the time or you intend to or even if you’re just using the fantastical design code for a one off project there are always a number of shortcuts and tricks you can lear, add to your arsenal and ultimately improve your coding skills.

Here are 5 shortcuts and tips I’ve felt have benefited me the most over the years. Most of these are admittedly basic, I still love them and they’ve become invaluable to me over the years as a web designer and developer.

5. Removing Body Margin

So, ever want to design a website that begins right at the top of the page but never quite figured out how? When I started to build websites more and more regular I found myself searching for this particular trick for a while until I figured it out. In retrospect, it wasn’t that difficult to figure out but hindsight’s a hell of a thing.

Don’t know what the hell I’m talking about? See the screen shot below. This is an example of the beginnings of a website. I created a container and I centered it using CSS. As you can see, my light grey container is a little offset by around 20 or so pixels from the top of the page:

The aim of this body margin tip is to get that grey box to fit right to the top of the page just like the screenshot below:

This handy little design functions can be utilised with just one simple line of code. In your CSS, simply do the following:


body {
margin: 0;
}


As you can see, we’re directly accessing the the file’s HTML BODY tag and altering its properties. In this case, it’s margin properties. You’re basically telling the BODY tag to ignore all of it’s natural margin protocols and instead use no margin properties.

4. Padding, Margin and Color Code Shortcuts

In modern web design, with an emphasis on speed and performance it’s important to keep all files as small as possible. For example, in previous posts I both advocated the use of code compression technology (for CSS and Javascript) and the use of CSS Sprites to reduce HTTP requests and total image load time and using CSS shortcodes is just one small way of helping this process.

What do I mean by padding, margin and color code shortcuts? I’ll explain. Usually, these CSS functions are set like the following:


.ExampleStyle {
padding: 10px 0 10px 0;
margin: 20px 0 20px 0;
color: #999999;
}


As most will already no doubt know, the padding and margin function values work like the directions on a compass; the first value being top (north), the second being right (east), the third being bottom (south) and the fourth and final being left (west). However, to accomplish the same results as the coder is aiming for using the above code, it could be shortened to:


.ExampleStyle {
padding: 10px 0;
margin: 20px 0;
}


This basically echoes the input values for the opposing directions i.e. this style will have 10px padding on the top and bottom, with no padding on left and right and will also have 20px margin on top and bottom, with no margin on left and right. Of course, if you require the top and bottom or left and right values to differ from each other, then the shortcode cannot be used.

The color shortcode can be used for web-safe colors only and the above example #999999 can be shortened as below:


.ExampleStyle {
color: #999;
}


3. Inherited Styles

Another handy trick in CSS is ability to inherit styles throughout the file. What is it? Inherit styles is exactly what it sounds like; you write a styling say for example for your webpage text appearance and this is inherited throughout the stylesheet and webpage unless you specifically change it. This means, you don’t have to keep stipulating the font family or size every time you’re building a CSS area that will hold text.

Take the following for example. Below, we set an example text style for our stylesheet using the body tag. It basically accesses the HTML body tag directly and then amends it with our style. The idea is that every page of our website MUST have a body tag and therefore the style will be universal throughout the website.


body {
font:11px arial;
color: #FFF;
}


As you can see, we set the font family, the size and the color in the above styling. However, what if we need to create a secondary content area, with a different font-size and color, but we wanted the font family to remain the same? We’d do the following:


.pageArea {
font-size: 14px;
color: #000;
}


The idea is the styles in the body tag will be transfered to this page area style, but will only show the styles it possesses if they haven’t been directly altered (like the font-size and color has) and therefore will remain arial text.

2. Text Shadow

Another handy little trick that doesn’t get enough publicity is the CSS text-shadow function. Granted, the primary reason why it’s not in wide-use may probably have something to do with it won’t display properly in most IE browsers, but since when as IE ever stopped web designers from creating awesome things despite it’s universal crappiness?

This is Text Shadow text…

The code to achieve the above text is:


.textshadow {
text-shadow: #CCC 1px 1px 1px;
}


It breaks down like this: following text-shadow function, you first stipulate the colour you want the text shadow to be. In this case I’ve gone for light grey. Then there are 3 different options in which you must select a pixel range. The first is the x-coordinate of the text-shadow relative the text, the next is the y-coordinate of the text-shadow relative to the text and the final is the ‘blur radius’ which is the amount of space in which the shadow space is stretched to create the blur effect.

1. Vertical Text Centering

Arguably the most common CSS trick in my arsenal, however, is to vertical align text using the CSS line height function. It’s a graceful way of getting text exact where you want it and as a perfectctionist who doesn’t like things to be even a pixel out of place, it has saved a lot of headaches and hours and hours of chopping and changing to get things right.

Take the below box for example:

The code for this is:


.textBox {
width: 200px;
height: 50px;
display: block;
background-color: #666;
color: #CCC;
text-align: center;
}


The idea is to use the line-height function properties to position the text in the center of the box, like so:

The code for this is:


.textBox {
width: 200px;
height: 50px;
display: block;
background-color: #666;
color: #CCC;
text-align: center;
line-height: 3.5em;
}


What are you favourite CSS shortcuts and/or tips? Please, feel free to let us know in the comments section of this article.

Like this fantastical post on Facebook!

Share this awesometastic post with your friends on Facebook!