top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

Why and how shorthand properties are used in CSS?

0 votes
489 views
Why and how shorthand properties are used in CSS?
posted Jun 22, 2017 by Rony Chakrabortty

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

+1 vote

Shorthand properties

Shorthand properties are CSS properties that let you set the values of several other CSS properties simultaneously. Using a shorthand property, a Web developer can write more concise and often more readable style sheets, improve page load times and reduce file size.

The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. That means it accomplished by listing the property values on a single line, in a specific order. E. g. the CSS background property is a shorthand property that's able to define the value of background-color, background-image, background-repeat, and background-position. Similarly, the most common font-related properties can be defined using the shorthand font, and the different margins around a box can be defined using the margin shorthand.

Example

A background with the following properties:

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;

Can be shortened to just one declaration:

background: #000 url(images/bg.gif) no-repeat top right;
answer Jun 23, 2017 by Arun Angadi
...