|
Here in the Theme Joomla design department we are quite specific about coding our templates and web pages up to globally accepted XHTML and CSS standards, and one of the simplest and best ways to reduce the clutter of your CSS files is to use CSS shorthand. Before we release any templates we always make sure to go through our CSS and apply shorthand rules as it reduces file size (therefore reducing page load time) and keeps your code looking good. Below are some of our most common CSS shorthand techniques - hope you find them usefull!
Font
Use:
font: 1em/1.5em bold italic serif
...instead of
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif
You have to specify each element in the top syntax - leave one out (like the font-family) and the entire style will be ignored. Also, if you don't specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal.
Background
Use:
background: #fff url(image.gif) no-repeat top left
...instead of
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
Once again, omit any of these commands from the background CSS shorthand property, and the browser will use the default values. Default values for this style place the background image in the top left corner and repeat the background both x and y.
Lists
Use:
list-style: disc outside url(image.gif)
...instead of
list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)
Leave out any of these CSS commands from the shorthand rule, and the browser will use the default values for each, namely disc, outside and none (i.e. no images) respectively.
Margin & padding - Four different values
Use:
margin: 2px 1px 3px 4px (top, right, bottom, left)
...instead of
margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px
Margin & padding - Two different values
Use:
margin: 5% 1% (top and bottom, right and left)
...instead of
margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%
Border
Use:
border: 1px black solid
...instead of
border-width: 1px;
border-color: black;
border-style: solid
There are many more shorthand rules, I have just specified the most commonly used above and if you do a search you will come up with loads more! Happy coding...
 |
Click here to Subscribe to this comment list RSS feed
Click here to leave a comment
css list style Properties and examples -- http://css-lessons.ucoz.com/list-css-examples.htm