Posts Tagged ‘CSS shortcuts’

How to write your CSS - shorthand

Wednesday, October 8th, 2008

There are many ways to write styles in your style sheet. You can write it the way Dreamweaver writes it. This doesn’t use shorthand, and your code is longer, and takes longer to write. I don’t like it, I don’t use it. I use shorthand most of the time. On occasion I’ll use the longhand method, usually when dealing with fonts or borders.

Margins - margins have 4 values, top, bottom, right, and left Longhand margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;
For shorthand with margins, think of your element as a block, and start at the top and work your way around top, right, bottom, left, so the same code above would look like: Shorthand margin: 0 auto 0 auto;
Now this can be shortened even more, because you can list 2 values if the opposing sides have the same values. Look at this one, it is saying that the top and bottom values are 0, and the left and right values are set to auto (which will center the element inside the parent block element). margin: 0 auto;
If all four sides have the same values, then you can list only one value. margin: 0;

Padding works the same way, so does other things like border thicknesses. The following would set the padding of the element to 0 on the top and bottom, 5 pixels on the left and right. It also puts a 1 pixel solid black border around the element. You’ll see that I’m also using shorthand for the color. padding: 0 5px; border: 1px solid #000;

Colors - if you’re using a web safe color, then you can use shorthand. If the hex value is 6 of the same numbers/letters then you can shorten it to 3. If it is made up of pairs of values, then it can be shortened to 3 as well. color: #fff; is the same as color: #ffffff; color:#369; is the same as color: #336699;

backgrounds - These have a lot of attributes, like background-image, background-position, background-color, background-repeat, and they can all be shortened into one statement.

Longhand background-image: url('images/background.gif'); background-repeat: repeat-y; background-color: #fff; background-position: top center;

Shorthand background: url('images/background.gif') repeat-y #fff top;
With background positioning there are 2 values, horizontal and vertical. If you don’t specify otherwise, they take the value of center. So if you tell it top, it will assume top center. If you specify left, it will assume left center.

Fonts - I don’t use font shorthand much, but if you do you are required to include font-size and font-family, and they have to be listed in that order.

Longhand font-style: italic; font-size: 12px; line-height: 150%; font-family: “Trebuchet MS”, Georgia, Serif;

Shorthand font: italic 12px/150% "Trebuchet MS", Georgia, Serif;

There are even more, like lists. In longhand you would have list-style-type, and list-style-image. This can be shortened to list-style. There are tons of shorthand methods, and the more you use CSS, the more you’ll pick up on it. I highly recommend looking, not stealing, other people’s code. You can view source of any page, and see the link to their style sheet. Look at it, see how they write their code, and learn from it.

I think you learn good design skills by looking at good design. I look at sites like CSS Mania and Best Web Gallery all the time to see what works for other people. There is nothing wrong with seeing what designs look good, there is also nothing wrong with seeing how people write their CSS.

Tags: , ,
Posted in CSS | 1 Comment »