Terms About me Domain Credits Way out My blog

CSS shortcuts

This is not a proper tutorial, but only a couple of way to shorten up your stylesheet and make it look slicker.

The first is for the font tag; usually, the font is styled this way.

font-family: Arial;
font-size: 10px;
color: #000000;

To make it shorter, you can style it like this; nothing will change, but your stylesheet will become more professional.

font: 10px Arial;
color: #000000;

Next one is for the padding and margins - meaning thoes tags that define the internal and external spaces of a design; many style them like this.

padding-top: 2px;
padding-bottom: 2px;
padding-left: 0px;
padding-right: 0px;

margin-top: 2px;
margin-bottom: 2px;
margin-left: 0px;
margin-right: 2px;


They don't know there is a much faster and more professional-looking way to style.

padding: 2px 0px 2px 0px; --> in the order top right bottom left
margin: 2px 0px 2px 0px; --> same order as padding

Next is the tag for body background; usually, many style it like this.

background-color: #cccccc;
background-image: url('IMAGE-URL-HERE');
background-position: top center;

There is, however, a shortcut for this too; I don't actually use this as I prefer the old way - just for personal whims.

background: #cccccc url('IMAGE-URL-HERE') top center;

I shared these to help others, but in the end it all comes down to personal preferences; you can use them or not. Just, if you do please credit Skyrose.