CSS | Shorthand Properties

Shorthand properties allow us to write multiple properties in a single line and in a compact way. They are useful as they provide clean code and also decrease the LOC (Line of Code). The Shorthand properties we will be covering:

1. Background
2. Font
3. Border
4. Outline
5. Margin
6. Padding
7. List

Background: The CSS Background property is used to set the background on a web page. The background can be applied to any element like the body, h1, p, div, etc. There are many properties available with a background such as color, image, position, etc. Some of them are used in the below code.

• Longhand way: 

• Shorthand way: 

• Example: 

• Output: 👁 Image
  

Font: The CSS font property is used to apply different fonts to the text on the webpage. The various attributes that can be set using the font are font-family, font-size, font-weight, etc. Some of them are used in the below code.

• Longhand way: 

• Shorthand way: 

• Example: 

• Output: 👁 Image
  

Border: The CSS border property is used to apply a border to different elements of a web page. There are many attributes of the border like width, style, color, etc.

• Longhand way: 

• Shorthand way: 

• Example: 

• Output: 👁 Image
  

Outline: The CSS outline property is used to apply an outline to various elements that are present in a web page.

• Longhand way: 

• Shorthand way: 

• Example: 

• Output: 👁 Image
  

Margin: The CSS margin properties are used to create space around elements, outside of any defined borders. We can define margin for all 4 sides i.e. top, bottom, left and right.

• Longhand way: 

• Shorthand way: 

• Example: 

• Output: 👁 Image
  

Padding: The CSS padding properties are used to generate space around an element's content, inside of any defined borders. Padding can also be applied as top, bottom, left and right padding.

• Longhand way: 

• Shorthand way: 

• Example: 

• Output: 👁 Image
  

Margin and Padding accept two and three values also in shorthand form, for example:

margin: 50px 75px;  // here, top-bottom margin is 50px and right-left margin is 75px, same is true for padding also.

margin: 50px 35px 75px;  // here, top margin is 50px right-left margin is 35px and bottom margin is 75px, same is true for padding also.

It applies in clock-wise direction starting from top right bottom left.

List: There are mainly two types of list in CSS: 1. Ordered list<ol> 2. Unordered list <ul> UnOrdered lists have bullet points while ordered lists have numbers.

• Longhand way: 

• Shorthand way: 

• Example: 

• Output: 👁 Image