Once you’ve mastered the use of CSS, take your knowledge one step further by learning how to code sites using CSS shorthand. Not only will it neaten up your code, it will save you coding time and reduce the file size of your pages.
The different properties that can be shortened include: border, background, font, list-style, margin, and padding.
In each example below, I will give you the order that is recommended by the W3C. Most broswer’s don’t care about the order of the properties but there are a few instances where we have seen that order does matter.
Background
The “background” property is the shorthand property for (in this specific order) “background-color”, “background-image”, “background-repeat”, “background-attachment”, “background-position”. The long version looks like this:
body {
background-color: #000;
background-image: url (/web-design-articles/background.jpg);
background-repeat: repeat;
background-attachment: scroll;
background-position: 0 0;
}
Look how drastically that code can be reduced:
body { background: #000 url(/web-design-articles/background.jpg) repeat scroll 0 0; }
If you do not need a property stated such as background-image, simply omit it and it will be set as the initial value by default.
Initial values are:
background-color: transparent background-image: none background-repeat: repeat background attachment: scroll background position: 0% 0%
Remember horizontal position (x) is always listed before the vertical (y) position.
If you want to have a background image that scrolls that is positioned at the top left of the screen, all you’d need is:
body { background: url(/web-design-articles/background.jpg) 0 0; }
You do not need to set a color, or the background-repeat or the background attachment!
Border
“Border” is the shorthand property for “border-width”, “border-style”, “border-color”.
If you wanted all four borders on an element to be the same your long hand version of css would look like:
#footer {
border-width: 2px;
border-style: solid;
border-color: #000;
}
CSS shorthand can reduce that code to
#footer { border: 2px solid #000; }
Color
Did you know it’s possible to shorten a 6 digit hex # down to three digits?
#000000 can be shortened to #000
#663399 can be shortened to #639; shortening is obtained by using every other number.
Font
The “font” property is the shorthand property for “font-style”, “font-variant”, “font-weight”, “font-size”, “line-height”, “font-family”.
The long hand version of styling an element might look like this:
p {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 12px;
line-height: 1.2em;
font-family: Arial, Verdana, sans-serif;
}
All of that can be shortened to:
p { font: italic small-caps bold 12px/1.2em; Arial, Verdana, sans-serif;}
If you do not need a property stated such as font-variant, simply omit it and it will be set as the initial value by default which in this case is normal. Quick note, you cannot omit font-style or font-size when defining font.
Other initial values are:
Font-style: normal
font-variant: normal
font-weight: normal
font-size: medium
line-height: normal
font-family: depends on user agent
List-Style
“List-style” is shorthand for these properties “list-style-type”, “list-style-position”, “list-style-image”.
ul {
list-style-type: circle;
list-style-position: inside:
list-style-image: url (/web-design-articles/bullet.jpg);
}
CSS shorthand reduces this example to:
ul {list-style: circle inside url(/web-design-articles/bullet.jpg); }
The Box Model
For the following CSS properties that we will discuss we need to learn a bit about the box model. When we talk about the box model we talk about the four sides of a rectangle. The top, right, bottom and left in that order. Eric Meyer’s coined the term TRouBLe to help remember this specific order.
Values can be assigned to 1, 2, 3 or 4 sides. Depending on how many values you specify will determine what sides of the box model the value effects.
If you specify only one value, it affects all sides. ie – margin: 4px;
If you specify two values, it affects, a) top and bottom b) right and left. ie. margin: 4px 3px;
If you specify three values it affects a) top b) right and left c) bottom. ie. margin: 1px 2px 3px;
If you specify 4 values it affects a) top b) right c) bottom and d) left. ie. margin: 1px 2px 3px 4px;
Border-width
Let’s zoom in a little more closely to each border property to see how each works independently and how we can shorten each property.
The “border-width” property has four sides to it and the order to code follows the box model. You can style from 1 to 4 sides separately. The “border-width” properties go in order of top, right, bottom and finally left.
h1 {
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width:2px;
border-left-width: 1px;
}
This can be shortened to:
h1 { border-width: 1px 2px 2px 1px; }
Border-style
“Border-style” refers to the type of line you want to surround an element. The “border-style” property has four sides so refer to the box model definition above.
#navigation {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
Can be shortened to:
#navigation { border-style: solid; }
This code sets all four sides to a solid border.
Border-color
“Border-color” refers to the color of the lines around an element. This property follows the box model.
.image{
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: red;
}
Shortened the CSS looks like:
.image { border-color: red; }
I’m not going to explain styling other sides independently because I think you probably understand how to do that by now.
Margin
The “margin” property is shorthand for “margin-top”, “margin-right”, “margin-bottom”, “margin-left”. The “margin” property follows the box model so keep that in mind when assigning a value.
h2 {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
Can be shortened to:
h2 { margin: 10px; }
Because margins have four sides, you can style from 1 to 4 sides.
Padding
“Padding” is shorthand for “padding-top”, “padding-right”, “padding-bottom”, “padding-left”. “Padding” follows the box model and you can style padding from 1 to 4 sides. Padding follows exactly the same procedure as margin.
Now that you have learned about CSS Shorthand, enjoy practicing it and watching your CSS shrink in front of your eyes!
I wish this tutorial was written 6 years ago when I’m just a newbie with CSS. But anyway this can be a huge help especially for those who are just starting out with CSS. Thanks for posting.