.CSS Minify [Trick]

donscream · 19-10-2015, 05:29 PM

Hi,

Im going to make a tutorial for web-language .css how to minify.
The reason i wanna do this is because we can make with this the .css read faster then normal.
There are just some simple steps todo when you know how to do this will it make it more fun to edit you're ow .css

___________________________________________________
Step 1

This is a example how the normal .css will look like.

Code:
<!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
   background-color: #d0e4fe;
 }
 
 h1 {
   color: orange;
   text-align: center;
 }
 
 p {
   font-family: "Times New Roman";
   font-size: 20px;
 }
 </style>
 </head>
 <body>
 
 <h1>My First CSS Example</h1>
 <p>This is a paragraph.</p>
 
 </body>
 </html>

Well u see that there allot of space is in it.
And you're website will read the spaces too.
So let's delete the spaces from this .css script so the website will read it faster.

Code:
body {
   background-color: #d0e4fe;
 }
 
 h1 {
   color: orange;
   text-align: center;
 }
 
 p {
   font-family: "Times New Roman";
   font-size: 20px;
 }

So what we do is make this .css into this.

Code:
body{background-color:#d0e4fe;}
 h1{color:orange;text-align:center;}
 p{font-family:"Times New Roman";font-size:20px;}

You see there no spaces in this .css

By this step we have created the .css to read faster then when it reads all the white spaces.

Example: you have a .css file that is 1000 characters long.
There allot of white spaces that you're website reads before it is on the end of the script when you load the .css
Now delete all the white spaces and you can reduce the 1000 lines .css script to 500 because of removing the white spaces....

So instead of you're website reads 1000 lines it reads now just 500........ Uhm so this means you're website read less then it normal should be... so it will read faster

Okay let's go back to the example script.....
And after removing all the white spaces it will look like this.

Code:
<!DOCTYPE html>
 <html>
 <head>
 <style>
 body{background-color:#d0e4fe;}
 h1{color:orange;text-align:center;}
 p{font-family:"Times New Roman";font-size:20px;}
 </style>
 </head>
 <body>
 <h1>My First CSS Example</h1>
 <p>This is a paragraph.</p>
 </body>
 </html>

So from 26 lines to 14 lines......

Less white spaces less to read and faster loading....

.CSS Minify [Trick]

Submitted by donscream, 19-10-2015, 05:29 PM, Thread ID: 11494