Today I’m going to tell you Shorthand 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 convert these to Shorthand CSS Properties, you will write 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 The Author
