Home / Tutorials / CSS / Shorthand CSS Properties to Save Time

Shorthand CSS Properties to Save Time

Today I’m going to tell you Short hand CSS properties, that must be saving your time while working on any project. Instead of using CSS properties in each line, we can use in single line and I’m going to tell you some basic commands, how we can use them.

1. BACKGROUND
We usually use following properties in Background.

background-color:
background-image:
background-repeat:
background-attachment:

Normally we use background as:

.backGrnd
{
background-color: yellow;
background-image: url(“stunningmesh.jpg”);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: left top;
}

But if you want to write these properties in Short hand, you will write these properties as:

.backGrnd
{
background: yellow url(“stunningmesh.jpg”) repeat-x fixed left top;
}

2. BORDER

In Border property we usually use these:

border-width:
border-style:
border-color:

If we want to use Border, we normally use these:

.headBorder
{
border-width: 3px;
border-style: dotted;
border-color: pink;
}

But while working Short hand, we will use these commands as:

.headBorder
{
border-width: 3px dotted pink;
}

3. COLOR

The usual way to specify a color in CSS is to use its 6-digit hexadecimal value, like:

color: #ff0000; = red
color: #00ff00; = green
color: #0000ff; = blue
color: #ffffff; = white
color: #000000; = black

If these colors are having any 3 digits repetition, then we can shorten these as:

color: #f00; = red
color: #0f0; = green
color: #00f; = blue
color: #fff; = white
color: #000; = black

There is also another way to write color names, like:

color: red
color: green
color: blue
color: white
color: black

4. FONT

Normally we use the following six properties in Font, as:

font-style:
font-variant:
font-weight:
font-size:
line-height:
font-family:

So in any Paragraph we can use these properties as:

stunningmesh
{
font-style: inherit;
font-variant: small-caps;
font-weight: bold;
font-size: 16px;
line-height: 25px;
font-family: “Arial;
}

In the short hand property we declaire it like:

stunningmesh
{
font: inherit small-caps bold 16px/25px Arial;
}

5. MARGIN

We normally use the following commands for Margin:

stunningmesh
{
margin-top: number+unit;
margin-right: number+unit;
margin-bottom: number+unit;
margin-left: number+unit;
}

Suppose you want to give 20px margin on Top, Left, Right, Bottom, you will write:

stunningmesh
{
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
}

But in Short hand you can write:

stunningmesh
{
margin: 20px;
}

Suppose you want to give 40px margin on Top, 20px on left and right, 30px margin on Bottom, then you can write this in short hand like:

stunningmesh
{
margin: 40px 20px 30px;
}

6. LIST PROPERTY

We can use these command in Line Style:

stunningmesh
{
list-style-type: (numerous);
list-style-position:inside || outside;
list-style-image:url(image.png);
}

Normally we use these properties as:

stunningmesh
{
list-style-type:square;
list-style-position:inside;
list-style-image:stunningmesh.png;
}

But in Short hand we will write as:

stunningmesh
{
list-style:square inside url(stunningmesh.png);
}

7. OUTLINE

We usually use these commands in Outline:

outline-color: hex color;
outline-style: style;
outline-width: value+unit;

In normal way we use it as:

outline-color: #55ff21;
outline-style: solid;
outline-width: 3px;

But in Short hand way, we use it as:

outline: #55ff21 solid 3px;

About Wijdan Rohail

A professional Web/Graphic Designer, working as Freelancer since 2000. Designing is my passion, blogging is my hobby.

Check Also

Slice your Mock up to make Website – Part III

This is the third and final part. In this part I would be telling you …

Leave a Reply

Your email address will not be published. Required fields are marked *