Publishing System Settings Logout Login Register
CSS -  Shorthand V Longhand
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on September 10th, 2007
8428 views
CSS Stylesheets
What is the most important thing for a viewer viewing your site?
I would say that the most important thing is to get your content to the viewer as fast as possible with out any long delays. This is more important if your site is targeted at the cooperate market. Many cooperate representatives do not like to wait too long, for the simple reason that time is money.
So it is up to the designer of a site to take these things into consideration when designing the site in question.

There are many aspects that can slow the rendering speed of a site.
1. The amount of graphics used.
Many sites of this nature do not need to be heavy laden with graphics, and any graphics that are required need to be kept of the smallest size possible.

2. The construction method used.
Many designers still design using tables, this today is not a good method of creating sites as tables make a single page very code heavy.
Designing a site in a Div (divides or layers) / CSS  (cascading style sheet). Designing in this manner not only will render a page at the fraction of the time to take to render a table layout page, it is also a fraction of the time to change the style and look of the page.

One of the speed factors of a good Div / CSS site is the way you layout your style sheet. It is good practice to give a web browser as less to read as possible, this in turn will create and render the page way faster.
In this document I want to concentrate on the laying out of a good css document. These can be done in two manners, long hand and short hand. It goes without saying that short hand CSS documents are far better for the simple reason that it gives the web browser less to read and in turn render the page out faster for the viewer.

So first off let us look at a very common CSS document many beginners will create for the content Div of a site. I have placed many factors in this selector just to show you a more in depth selector. All these elements may not be used.
#content{
    font-size: 12px;
    font-family:Tahoma;
    color:#000000;
    border-bottom: #000000 solid 1px;
    border-top: #000000 solid 1px;
    border-left: #000000 solid 1px;
    border-right: #000000 solid 1px;
    margin-left: 50px;
    margin-right: 0px;
    margin-top: 10px;
    margin-left: 0px;
}

As you can see this is a very heavy selector and is going to take the web browser time to absorb all this. Remember here this is only one selector of a style sheet that could contain as many as 200 different types of selectors, weather they be class, advanced or of ID type.
Reading them all in this manner is going to slow your page rendering down a bit.
Below is the exact same selector that is going to give exactly the same results, but the selector is going to be a fraction of the size.

#content{
    font: 12px Tahoma #000;
    border: #000 solid 1px;
    margin: 10px 0px 0px 50px;
}

As you can see by the selector above, it is less than half is size of the longhand method, in fact we have cut it down from 11 lines to 3 lines. That is 2/3 less time the web browsers has to spend reading that selector.
So what did we do here? Let me break it all down.

font: 12px Tahoma #000;

The first thing we tackled is the font. If you just use font you do not have to declare all parts of a font like family and size etc, we can place them all in one line under font. You will also notice that the colour digits and that there are only three. Remember that a font colour in hex code is written in bytes like (black as an example) as 00 00 00.  So when all the digits in a byte are the same you only are required to enter in the first digit of each byte to get the same colour. So that means that black as #000000 can be entered as #000 because every second digit is the same. Red can also be done in the same manner, FF 00 00 #ff0000 can be enter as #F00, and white as #FFFFFF #FFF. I think you get the picture. But this only applies with the 2 digits of a colour byte are the same. You could not use this method on a colour such as #874e30, For colour bytes like this you will need to place all the digits because no 2 bytes have the same digit.

border: #000 solid 1px;

If you want a border around the entire selector you do not need to use bottom, top, left and right. If you just use border and the colour, type and size of border on one line under a heading of border you will get the same result.

margin: 10px 0px 0px 50px;

As the same for borders, if you want margins you can do that also in one line under the heading of margin and miss out the bottom, top, left and right and place them as seen above. But you need to know how the pixel sizes are read by the web browser. A web browser will read them clock wise. The first digit after the heading is the top, right, bottom and then left. So the above margins are set out as top = 10px right = 0px bottom = 0px and left = 50px. If you wanted the top and bottom margins the same, and the left and right margins the same you could lay it out in this manner also.

margin: 10px 50px;

This will be read as top and bottom first and then left and right.
Paddings are done in the same manner and read in the same manner as margins. The difference between margins and paddings is that margins are on the out side of a Div and padding are on the inside of a Div.

Well I hope this gave you some insight and food for thought when you lay out your next style sheet.
If you have any questions please do not hesitate to ask.

In my next article I will take you through a good practice of a typical single column style sheet.
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send


This author is too busy writing tutorials instead of writing a personal profile!
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top