Speed Up and Reduce Your CSS File

Cascading Style Sheets otherwise known as CSS has become one of the most important aspect of web development, over the last 6 years we’ve seen some amazing web design backed up by ingenious use of CSS.

If you’re concerned about your CSS file size ending up way too big than you originally intended, a great solution is to use CSS Shorthand. CSS shorthand allows you to specify several properties on a CSS selector.

Let’s have a look at one of the common ways to style an HTML body:


body{
background-color: #FFFFFF;
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: top left;
}


We can achieve the same results using CSS shorthand:


body{background: #FFF url(images/bg.jpg) no-repeat top left}


And what about styling your fonts? Here is an example of a common font properties:


p {
font-style: normal;
font-variant:normal;
font-weight: bold;
font-size: 12px;
line-height: normal;
font-family: Tahoma,"Verdana", Arial;
}


And here’s the shorthand for your font properties:


p {font:bold 1em/1.2em Tahoma,"Verdana",Arial}


One of the common ways to style borders on your divs:


div{
border-width: 1px;
border-color: #000000;
border-style: solid;
}


CSS shorthand for borders:


div{border:1px solid #000}


List styles example:


ul {
list-style-type: circle;
list-style-position: inside:
list-style-image: url (list.jpg);
}


Yes we can also shorthand list styles!


ul {list-style: circle inside url(list.jpg)}


Let’s take a look at the margin properties:


div {
margin-top: 10px;
margin-bottom: 5px;
margin-left: 15px;
margin-right: 20px;}


…And the shorthand version:


div {margin: 10px 20px 5px 15px}

/* One thing to note here is that the properties are assigned in a particular manner – it goes top – right – bottom – left */

Another way to shorthand the margin properties if the top border is the same as the bottom, and if the right border is the same as the left side:


div {margin: 10px 20px}

/* And this assignment is top & bottom – left & right */

Same rules would apply to your padding properties:


div {padding: 10px 5px 3px 4px}
div {padding: 10px 20px}


More CSS Tips

Delete redundant blank spaces in your stylesheet, instead of coding this way:


h1 {
border-bottom:1px dotted #ccc;
margin-left: 10px;
}


Delete your line breaks and blank spaces, keep everything in one line:


h1{border-bottom:1px dotted #ccc;margin-left: 10px}


- You don’t need to put a semi colon at the very end of the property right before the closing bracket.
- Use shortened hex code whenever possible, for example, if you have the hex code #FFFFFF which is white, you can use #FFF instead.

Want to become a CSS master? I highly recommend the books below: