Using Shorthand Properties in CSS

Your body rule should now look like this:
body {
font: 100%/1.5 “Helvetica Neue”, Helvetica, Arial, sans-serif;
background: #7F98C3;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
If you look at the font property, you may notice that your CSS may not look like ours. If you have individual font values on each line instead of all in one line, it is due to the way the CSS preferences are set in Dreamweaver: we keep our preferences set to write shorthand. So what in the world is shorthand anyway? Simply put, shorthand lets you specify several values with a single property. It can be quite a space saver in CSS documents and once you get used to it,
it makes it much easier to read your pages. Order is generally quite important when using shorthand, because
one property name may have several values following it. Let’s look quickly at a couple of shorthand examples, beginning with the font property. There are six possible values for font: font-style, font-variant, font-weight, font-size, line-height, and font-family. If one of these values is not declared, the default for the value is used. In the case of our style sheet, you can see that we declared the font-size, line-height, and font-family. This means the other three properties are left at their default values. Our shorthand declaration equals this block of code:
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 100%;
line-height: 1.5;
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;

The shorthand for applying background values is similar to font shorthand. The property is called background and it has fi ve possible values: background-color, background-image, background repeat, background-attachment, and background-position. Thus,
background: #7F98C3 url(images/body_back.jpg) repeat-y left
top; is equal to:
background-color: #7F98C3;
background-image: url(images/body_back.jpg);
background-repeat: repeat-y;
background-attachment: scroll;
background-position: left top;
Border is a similar property. It allows us to set the width, style and color of the borders of a box. It does not allow us to make one of the sides different than the other, however. To do that, we need to declare that value separately. So for instance, if we want to set the width of the left side border of our box to be 2px and the rest to be 1px, we could write it like this:
border: 1px solid #000;
border-left-width: 2px;
The first line sets the entire box to have a 1px black border with a solid style. The second line overrides the width of the left border. Remember the cascade—to override the 1px border, the 2px border must come after it.
Font, background, and border are the most common mixed value shorthand properties. Two other shorthand properties that we’ll use throughout the book are margin and padding. The shorthand for these properties allows
us to set all four sides of the box at once. Both properties are written in the same way: the specifi c order is top, right, bottom, left. People use different tricks to remember the order: you can think of the rule as trouble, from the acronym TRBL, or more simply, as clockwise (start at the top and moving around the box). After years of experience, we still  find ourselves using our tricks of choice as we write our code.

For example, margin: 0 20px 10px 15px; is equal to:
margin-top: 0;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 15px;
When the values of all four sides are the same, only one value needs to be used since it applies to all four sides: margin: 0; Notice there is no unit of measurement after the 0. This is because, no matter what unit you place after zero—pixels, percent, em units—the value is still the same, zero. If you’re using equivalent top and bottom values as well as equal
side values, you can use only two values: margin: 10px 15px; This indicates that the top and bottom values are 10px and the right and left are 15px.

Finally, if your top and bottom sides have different values from each other, but the sides are the same, you can use three values in your shorthand: margin: 0 20px 15px; This tells the browser to render 0 on the top margin, 20px on the
right margin, 15px on the bottom and the lack of a fourth value indicates that the left side is equivalent to the right side. So it’s 20px as well. As you can see, shorthand is cool and it’s absolutely the way we want to write our code. It’s much too handy to not use, so throughout the rest of the book, we’ll be using shorthand. Let’s make sure you can do the same!

Related posts:

1. Working with CSS shorthand for boxes This is something that is useful to get to grips...
2. CSS shorthand for font properties The CSS properties discussed so far can be written in...
3. Using Property Values Property values come in the following forms: constant text, constant...
4. Using Cascade Order CSS allows you to assign the same rule to the...

Related posts brought to you by Yet Another Related Posts Plugin.