Goleza Designers Blog

Your Source for Information, Ideas, Tips and Knowledge on Engraved Products, Laser Engraving, Business Marketing and Personal Development

How To Manually Minify CSS Codes In Static Websites

Knowledge Base

minify css code

Webmasters minify CSS codes to reduce their size so that they load faster. Online business success depends on many factors. One of them is your website speed. Most online marketers focus more on the design, content and SEO. They forget the technical aspect of improving the load times to give the internet users a pleasant experience.

This simple tutorial is intended to help webmasters to learn how they can manually minify CSS codes in static websites. It’s designed to help web designers to create sites with downsized CCS markups. A minified CSS source code leads to improvement in the website load time performance, hence an excellent experience to internet users. It also leads to a better search engine ranking.

What does it mean to minify CSS codes?

People use the term minification in computer programming languages. To minify CSS codes is to remove all unnecessary characters from the source code without altering its functionality or the way it works. These unnecessary characters include the following:

Whitespace characters – these represent horizontal and vertical space in the typography.
• The new line – special characters that indicate the end of a line of text.
Comments – these are source code comments that make it easier to understand the code
Blocks – statement blocks usually signified by the use of brace brackets { }.

To minify CSS codes is to reduce them, to shorten them, to downsize them, to trim them, to compress them or compact them. A minified CSS code and the one that is not minified both displays your website layout in the same way. The only difference is that with minified CSS source codes, a few bytes of CSS markup is sent and the number of requests to get the bits is reduced. The reverse is true with CSS codes that aren’t minified. More CSS bytes are sent, leading to an increased number of requests.

How do you minify CSS source codes?

There are several minify CSS tools which you can use to compress your CSS, such as CSS Compressor. But in this tutorial, I would like to show you how you can manually do it. To effectively minify your CSS markup, do the following:

First, remove all the CSS source code comments.

Programmers use these comments to make the source code easier to understand in programming. But they has nothing to do with They look like in the examples below:

/* tells browsers that don’t read HTML 5 tags to render like divs */

/* Copyright (c) 2012 Goleza Designers Limited, All rights reserved
———————————————————————————-*/

/* Reset v1.0 | 20080212 – http://meyerweb.com/eric/tools/css/reset/
———————————————————————————-*/

Secondly, remove whitespace characters in the source code.

Examples of white space are as follows:

U+0020 | SPACE (HTML:  )
ASCII space ( )
ASCII tab ( )
Zero-width space (​)

Thirdly, format your CSS codes on a single line.

Your CSS blocks should look like as in Block A and NOT as in Block B

Block A

h3 {color:#FF8000;font-family: Verdana,Arial, “Times New Roman”;text-align:center;text-height:1em;}

 

Block B

h3 {
color:#FF8000;
font-family: Verdana,Arial, “Times New Roman”;
text-align:center;
text-height:1em;
}

Lastly, remove newlines.

These are characters that signify the end of the text line, also known as line endings, line breaks.

A well minified source code should therefore look like as in the example below:

#mainLeft{float:left;padding-top:40px;position:relative;width:325px;text-align:left;}
#mainLeft img{border:none;position:absolute;top:250px;z-index:5;}
#mainLeft .hostgator{border:none;position:absolute;top:670px;left:102px;z-index:5;}
#mainLeft h2{color:#444;font-size:0.8em;text-transform:uppercase;text-align:center;}
#mainLeft h1 span{font-size:40px;color:#FF8000;font-weight:bold;}
#mainLeft h2 span{top:493px !important;}
Conclusion

In conclusion, when you minify CSS code using the steps mentioned above, you will reduce the network latency, enhance compression and improve browser loading time and execution. A fast-loading website is a key to your online business success.

Hello! My name is Charles Kiyimba, a creative engraver, a professional teacher, a passionate blogger, a confident graphic/web designer and the founder of Goleza Designers Ltd, an engraving business that turns images into real products. Through my hands-on experience, I share with you free helpful information on our products and services, business, marketing and personal development. Always dive in for more!

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Infolinks

Infolinks AdMONETIZE YOUR WEBSITE  WITH INFOLINKS ADS TO EARN EXTRA MONEY!

PropellerAds

PropellerAdsMONETIZE YOUR WEBSITE  WITH PROPELLERADS TO EARN EXTRA INCOME!

Get In Touch With Us!

10 + 3 =

Our Contacts

Equatorial Shopping Mall, Suite 607

Plot 37/39, William Street, Kampala

Call: +256 - 703 - 779 889

WhatsApp: +256 - 772 - 327373

View Our Products

Subscribe to Our Blog

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 1,709 other subscribers.


Notice: Undefined index: name in /home/golathyn/public_html/blog/wp-content/plugins/propellerads-official/includes/class-propeller-ads-anti-adblock.php on line 196