• 1
  • 2
Home > Tips

How to Optimize CSS for Your Website?

Content Menu

1. Use shorthand syntax as possible

2. Punctuation Optimization

3. Delete unnecessary line feeds.

4. Duplicate properties Optimization

 

 Use shorthand syntax as possible


 Border(CSS border) Shorthand:

 

1  For example, border widths of all four sides are 1px and the colors are #000, the code as follow:

 border-color:#000; border-style:solid; border-width:1px

We can simplify the code like that:

 border:1px solid #000;


2  Shorthand of different borders for different sides:


Left border

 border-left-color:#000; border-left-style:solid; border-left-width:1px

We can simplify the code like that:

 border-left:1px solid #000

 

Right border:

 border-right-color:#000; border-right-style:solid; border-right-width:1px

We can simplify the code like that:

 border-right:1px solid #000

 

Top border:

 border-top-color:#000; border-top-style:solid; border-top-width:1px

We can simplify the code like that:

 border-top:1px solid #000

 

Bottom border:

 border-bottom-color:#000; border-bottom-style:solid; border-bottom-width:1px

We can simplify the code like that:

 border-bottom:1px solid #000

 

3  Advanced border shorthand

Sometimes when we just set borders for three sides, we can also simplify code.
Suppose we dont set top border and the border width of other three sides are 1 pixel.

The traditional way:

 Div{border-right:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000}  

We can simplify the code like that:

 Div{border:1px solid #000;border-top:0}

 

In this way we can greatly simplify the CSS code.

 

 

 Padding Shorthand

 

1  Paddings for all sides

The traditional way:

 Padding-left:2px;Padding-right:3px;Padding-top:4px;Padding-bottom:5px

We can simplify the code like that:

 Padding:4px 3px 5px 2px

 

2  Paddings for three sides

Suppose we dont set the top border:

The traditional way:

 Padding-left:2px;Padding-right:3px;Padding-bottom:5px

Shorthand:

 Padding:0 3px 5px 2px

 

 

 Margin Shorthand

We can simplify the margin in the similar way to padding.

 

1  Margins for all sides

 The traditional way:

 Margin-left:2px;Margin-right:3px;Margin-bottom:5px;Margin-top:4px;

Shorthand:

 Margin:4px 3px 5px 2px

 

2  The same margins for all sides

The traditional way:

 Margin-left:2px;Margin-right:2px;Margin-bottom:2px;Margin-top:2px;

Shorthand:

 Margin:2px

 

3  Top Margin = Bottom margin and left margin = right margin

 

 Margin-left:2px;Margin-right:2px;Margin-bottom:5px;Margin-top:5px;

Shorthand:

 Margin:5px 2px

 

 


 Background Shorthand Syntaxes

1

 background-color:#000;

We can simplify the code like that:

 background:#000;

 

2

 background-image:url(...)

We can simplify the code like that:

 background:url(...)

 

And then Ill show you the shorthand syntaxes for some common background style:

 

1  background is a pure color

 background-color:#CCC

We can simplify the code like that:

 background:#CCC

 

2  Background is an image and repeated horizontally

1. background-image:url(http://www.slicemaker.com/img201207/logo-2012.gif); 
2. background-position:0 0; background-repeat:repeat-x

We can simplify the code like that:

 background:url(http://www.slicemaker.com/img201207/logo-2012.gif) repeat-x 0 0;

 

3  Background is an image and repeated vertically

background-image:url(http://www.slicemaker.com/img201207/logo-2012.gif);
background-position:0 0; background-repeat:repeat-y

We can simplify the code like that:

background:url(http://www.slicemaker.com/img201207/logo-2012.gif) repeat-y 0 0;

 

4  Background is an image and not repeated

background-image:url(http://www.slicemaker.com/img201207/logo-2012.gif);
background-position:0 0; background-repeat:no-repeat

We can simplify the code like that:

 background:url(http://www.slicemaker.com/img201207/logo-2012.gif) no-repeat 0 0;

 

 

 Font Shorthand Syntaxes


 font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif;

Shorthand:

 font:12px/12px Arial, Helvetica, sans-serif;

 

 

 

 Punctuation Optimization


 Delete unnecessary space characters.

We always leave many unnecessary space characters during writing code.

 

 

We should delete these unnecessary space characters to optimize CSS.

 

For example:

 div{ float:left; width:100px; height:100%;}

We can simplify the code like that:

 div{float:left;width:100px;height:100%;}

 

 

 Delete the last in each css selector.

 

 

For example:

 div{float:left;width:100px;height:100%;}
 .divcss5{float:left;width:100px;height:100px;}

We can simplify the code like that:

 div{float:left;width:100px;height:100%}
 .divcss5{float:left;width:100px;height:100px}

 

 

 Delete Unnecessary line feed

 For example:

 div{float:left;width:100px;height:100%}
.divcss5{float:left;width:100px;height:100px}

Let's delete the useless line feed:

 div{float:left;width:100px;height:100%}.divcss5{float:left;width:100px;height:100px}

 

 

 Duplicate properties Optimization

Sometimes we can factor out the common properties of CSS code for better optimization.

 

For example:

 div_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;} 
  .div_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;}

We can simplify the code like that:

 div_a ,.div_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
 .div_b{text-align:right; }

 

 

 Contact Us for Help

If you cannot find a proper solution to your issue through the above methods, our support team is always on standby for whatever problems youve got. We promise to you we will deal with your issues within 24 hours. Contact Our Support Team

Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0