Shorthand properties are the properties in CSS that permit to set the values of many properties at the same time. These properties are utilized to write concise and readable code. We will comprehend the Shorthand Property in CSS in this article.
CSS shorthand properties are given downwards:
- margin
- border
- font
- padding
- background
- outline
- border-radius
- transition
- list-style
- text-decoration
- flex
- grid-template
Let's explore individual CSS attributes through practical examples.
Margin shorthand property
The margin property in CSS is utilized to give a space around HTML elements. We can provide space on all four sides i.e., top, left, right and bottom. The margin property is the shorthand property for the given individual margin properties:
- margin-top
- margin-right
- margin-bottom
- margin-left
It defines the margin distance from the upper edge of the element.
Syntax:
margin-top: value;
It defines the margin on the right side of the element.
Syntax:
margin-right: value;
The margin-bottom property determines the spacing between the bottom of the element and its surrounding elements.
Syntax:
margin-bottom: value;
It defines the margin on the left side of the element.
Syntax:
margin-left: value;
We have the option to adjust the spacing around an element uniformly by employing the margin shorthand attribute.
margin: top right bottom left;
We have the option to specify values for top, right, bottom, and left using units such as pixels, percentages, centimeters, millimeters, viewport width, viewport height, inches, and more.
Demonstration:
We will make use of the margin shorthand attribute to set the margin on all four sides of the element.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Margin Shorthand Property</title>
<style>
div {
margin: 60px 45px 15px 50px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<h2>Margin Shorthand Property</h2>
<div>This element contains a top margin of 60px, a right margin of 45px, a bottom margin of 15px and a left margin of 50px.</div>
</body>
</html>
Output:
We can observe that the margin is simultaneously applied to all edges of the element.
Border shorthand property
The border property in CSS is utilized to specify the style, color and width of a border of an HTML element. The border property is the shorthand property for the provided individual border properties:
- border-style
- border-color
- border-width
The border-style attribute is employed to determine the appearance of all four edges of the element. Available style options include solid, dotted, dashed, double, ridge, groove, inset, and outset.
Syntax:
border-style: value;
The border-color property is used to define the color of the specific element.
Syntax:
border-color: value;
The ```
<!DOCTYPE html>
<html lang="en">
<head>
<title>Margin Shorthand Property</title>
</head>
<body>
<h2>Margin Shorthand Property</h2>
</body>
</html>
Syntax:
border-width: value;
These three characteristics can be specified collectively using the border shorthand property.
## Syntax of border shorthand property:
border: border-width border-style border-color;
The border-width can have measurements in pixels, percentages, centimeters, millimeters, viewport width, viewport height, inches, and other units.
## Demo:
We will employ the border shorthand property to set the style, width, and color of the border.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Border Shorthand Property</title>
</head>
<body>
<h2>Border Shorthand Property</h2>
This element contains a border with a medium border width, dotted border style and maroon border color.
This element contains a border with a 6px border width, double border style and yellow border color.
</body>
</html>
Output:
We observe that the border styling is implemented on the elements assigned the classes "border1" and "border2".
## Font shorthand property
The font property is the shorthand property for the provided individual font properties:
- font-style
- font-size
- font-weight
- font-variant
- font-family
The ```
margin-top: value;
Syntax:
font-style: value;
It is employed to specify the font's size. The font-size property can be set to x-small, xx-small, small, larger, smaller, medium, x-large, xx-large, or any numerical length.
Syntax:
font-style: value;
The ```
<!DOCTYPE html>
<html lang="en">
<head>
<title>Margin Shorthand Property</title>
</head>
<body>
<h2>Margin Shorthand Property</h2>
</body>
</html>
Syntax:
font-weight: value;
The font-variant property is employed to specify variations in the font style. It can have a value of small-caps or normal.
Syntax:
font-variant: value;
The ```
<!DOCTYPE html>
<html lang="en">
<head>
<title>Margin Shorthand Property</title>
<style>
div {
margin: 60px 45px 15px 50px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<h2>Margin Shorthand Property</h2>
<div>This element contains a top margin of 60px, a right margin of 45px, a bottom margin of 15px and a left margin of 50px.</div>
</body>
</html>
Syntax:
font-family: value;
We can collectively specify each characteristic using the shorthand property of font. The syntax for the font shorthand property is:
font: font-style font-variant font-weight font-size font-family;
The dimensions of the size, family, style, variant, and weight can be specified in pixels, percentages, centimeters, millimeters, viewport width, viewport height, inches, and other units.
Demo:
We'll make use of the font shorthand property to set the font-style, font-variant, font-weight, font-size, and font-family for the element.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Font Shorthand Property</title>
<style>
.font1 {
font: normal small-caps bold 24px sans-serif;
background-color: palegoldenrod;
}
.font2 {
font: italic normal lighter medium arial;
background-color: khaki;
}
</style>
</head>
<body>
<h2>Font Shorthand Property</h2>
<p class="font1">This element contains text with a normal font-style, small-caps font-variant, bold font-weight, 24px font-size and sans-serif font-family.</p>
<p class="font2">This element contains text with an italic font-style, normal font-variant, lighter font-weight, medium font-size and arial font-family.</p>
</body>
</html>
Output:
We observe that the styling is being applied to the elements that have the classes "font1" and "font2".
Padding shorthand property
In CSS, padding is space available between the content and the border of the element. The padding property is the shorthand property for the provided individual padding properties:
- padding-top
- padding-bottom
- padding-left
- padding-right
It is employed to specify the padding at the top of the element.
Syntax:
padding-top: value;
It is employed to specify the padding at the bottom of the element.
Syntax:
padding-bottom: value;
It is employed to specify the padding on the left side of the element.
Syntax:
padding-left: value;
It is employed to specify the padding on the right side of the element.
Syntax:
padding-right: value;
We can set padding on all sides at once by using the padding shorthand attribute.
Syntax of padding shorthand property:
padding: top right bottom left;
We have the flexibility to specify the dimensions of the top, right, bottom, and left sides in various units such as pixels, percentages, centimeters, millimeters, viewport width, viewport height, inches, and more.
Demo:
We will make use of the padding shorthand attribute to add padding uniformly on all sides.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Padding Shorthand Property</title>
<style>
.padding1 {
padding: 25px 50px 59px 36px;
background-color: plum;
}
.padding2 {
padding: 45px 85px 78px 68px;
background-color: peachpuff;
}
</style>
</head>
<body>
<h2>Padding Shorthand Property</h2>
<p class="padding1">This element contains a padding of 25px top, 50px right, 59px bottom and 36px left.</p>
<p class="padding2">This element contains a padding of 45px top, 85px right, 78px bottom and 68px left.</p>
</body>
</html>
Output:
We observe that padding is implemented on the elements assigned with classes "padding1" and "padding2".
Background shorthand property
The background property in CSS is utilized to specify the background of the HTML element. It is the shorthand property for the provided individual background properties:
- background-color
- background-image
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
It is employed to assign a color to the background of the element.
Syntax:
background-color: color| transparent;
It is employed to set an image as the background of the element.
Syntax:
background-image: url;
background-position: It is employed to establish the initial position of the background image.
Syntax:
background-position: value;
background-size: This property is used to set the dimensions of the background image.
Syntax:
background-size: auto| contain| cover| length;
The background-repeat property is used to define how the background image should repeat.
Syntax:
background-repeat: repeat-x| repeat-y| repeat| no-repeat;
The ```
<!DOCTYPE html>
<html lang="en">
<head>
<title>Margin Shorthand Property</title>
</head>
<body>
<h2>Margin Shorthand Property</h2>
</body>
</html>
Syntax:
background-origin: border-box| padding-box| content-box;
The background-clip property is used to specify the area within an element where the background color or background image should be displayed.
Syntax:
background-clip: border-box| padding-box| content-box;
The purpose of background-attachment is to enable the background image to scroll along with the page or remain fixed in place.
Syntax:
background-attachment: fixed| scroll| local;
We have the capability to specify all properties at once using the background shorthand property.
## Syntax of background shorthand property:
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment;
## Demo:
We will make use of the background shorthand property in this demonstration.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Shorthand Property</title>
</head>
<body>
<h2>Background Shorthand Property</h2>
This element consists of a background with a rosybrown color and a flower image.
</body>
</html>
Output:
We can observe that the background is implemented on the <p> element.
## Outline shorthand property
The outline property in CSS is utilized to specify the outline of an HTML element. The border property is the shorthand property for the provided individual border properties:
- outline-width
- outline-style
- outline-color
- outline-offset
The ```
<!DOCTYPE html>
<html lang="en">
<head>
<title>Margin Shorthand Property</title>
<style>
div {
margin: 60px 45px 15px 50px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<h2>Margin Shorthand Property</h2>
<div>This element contains a top margin of 60px, a right margin of 45px, a bottom margin of 15px and a left margin of 50px.</div>
</body>
</html>
Syntax:
outline-width: medium| thin| thick| length;
The ```
margin-top: value;
outline-style: dotted| hidden| double| groove| outset| inset| ridge| dashed| solid;
outline-color: This property is employed to specify the color of the border.
Syntax:
outline-color: value;
outline-offset: It is used to specify the distance between the border and the outline of the element.
Syntax:
outline-offset: length;
## Syntax of shorthand property of outline:
outline: outline-width outline-style outline-color;
The outline-width property can be specified in various units such as pixels, percentages, centimeters, millimeters, viewport width, viewport height, inches, and more.
## Demo:
We will make use of the outline shorthand property to set the width, style, and color of the outline.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Outline Shorthand Property</title>
</head>
<body>
<h2>Outline Shorthand Property</h2>
This element contains 5px outline-width, dashed outline-style and brown outline-color.
This element contains 2px outline-width, solid outline-style and cyan outline-color.
</body>
</html>
Output:
We observe that the styling is implemented on the elements assigned the classes "outline1" and "outline2".
## Border-Radius shorthand property
The border-radius property in CSS is utilized to give a radius to a border. The border-radius property is the shorthand property for the given individual properties:
- border-radius-top-left
- border-radius-top-right
- border-radius-top-left
- border-radius-bottom-right
Setting the border-radius-top-left property determines the curvature of the upper-left corner of the element.
Syntax:
border-radius-top-left: value;
It defines the radius of the top-right corner of the element.
Syntax:
border-radius-top-right: value;
It defines the curvature of the lower-left corner of the element.
Syntax:
border-radius-bottom-left: value;
It defines the curvature of the lower-right corner of the element.
Syntax:
border-radius-bottom-right: value;
We have the capability to specify a radius for all four corners - top-left, top-right, bottom-left, and bottom-right - simultaneously by utilizing the shorthand property.
## Syntax of shorthand property of border-radius:
border-radius: top-left top-right bottom-right bottom-left;
The border-radius property accepts values in pixels, percentages, centimeters, millimeters, viewport width, viewport height, inches, and so on.
## Demo:
We'll make use of the border-radius shorthand attribute to assign a radius to the element.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Border-Radius Shorthand Property</title>
</head>
<body>
<h2>Border-Radius Shorthand Property</h2>
<p>This element has 9px top-left, 5px top-right, 10px bottom-right and 12px bottom-left border-radius.</p>
</body>
</html>
Output:
We can observe that varying border-radius values are being applied to each of the four sides.
## Transition shorthand property
The transition property in CSS is utilized to give transition effects. The transition is the shorthand property for the given individual properties:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
transition-property: This property is used to specify the CSS property name on which the transition effect will be implemented.
Syntax:
transition-property: none| all| property;
transition-duration: It specifies the duration for the transition effect to finalize.
Syntax:
transition-duration: time;
transition-timing-function: This property is employed to specify the pace curve of the transition animation.
Syntax:
transition-timing-function: time;
transition-delay: It defines the duration to pause before starting the transition animation.
Syntax:
transition-delay: time;
We have the option to merge the aforementioned individual characteristics by employing the transition shorthand attribute.
## Syntax of shorthand property of transition:
transition: property duration timing-function delay;
## Demo:
We will make use of the transition shorthand property for the specified element.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Transition Shorthand Property</title>
</head>
<body>
<h2>Transition Shorthand Property</h2>
<p>This element shows transition effect.</p>
</body>
</html>
Output:
We can witness the output downwards.
Before transition:
After transition:
## List-Style shorthand property
The list-style property in CSS is utilized to give the markers to the list items. It is the shorthand property for the given individual list-style properties:
- list-style-type
- list-style-position
- list-style-image
The list-style-type property is employed to specify the appearance of the markers for list items.
Syntax:
list-style-type: circle| disc| upper-roman| lower-roman| decimal| square| upper-latin| lower-latin| upper-alpha| lower-alpha| lower-greek;
list-style-position: This property is used to define the placement of the markers associated with list items.
Syntax:
list-style-position: inside| outside;
list-style-image: This property is used to specify an image to be displayed as the marker for list items instead of the traditional markers.
Syntax:
list-style-image: url;
We can use the list-style shorthand property to set multiple list properties at once.
## Syntax of shorthand property of list-style:
list-style: type position image;
## Demo:
We will apply the list-style shorthand property to the elements identified by the classes "list1" and "list2".
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>List-Style Shorthand Property</title>
</head>
<body>
<h3>List of cosmetic brands</h3>
- Lakme
- Almora Botanica
- Botani
- Cedar Creek Essentials
- Ocean Olive
<h3>List of cosmetic products</h3>
- Eyeshadow
- Moisturizer
- Eyeliner
- Primer
- Highlighter
</body>
</html>
Output:
We observe that the list labeled "list1" is styled with circular bullet points and the list marked as "list2" displays square bullet points internally, using an image as the marker for each list item.
## Text-Decoration shorthand property
The text-decoration property in CSS is utilized to give the markers to the list items. It is the shorthand property for the given individual list-style properties:
- text-decoration-line
- text-decoration-color
- text-decoration-style
- text-decoration-thickness
It is employed to establish the style of text decoration line.
Syntax:
text-decoration-line: overline| underline| line-through;
The ```
margin-top: value;
Syntax:
text-decoration-color: value;
The text-decoration-style property is employed to define the style of the line that decorates text.
Syntax:
text-decoration-style: double| solid| dashed| dotted| wavy;
text-decoration-thickness: This property is used to define the width of the decoration line.
Syntax:
text-decoration-thickness: length;
We can make use of the text-decoration shorthand attribute to set multiple text decoration properties at once.
Syntax of shorthand property of text-decoration
text-decoration: line color style thickness;
Demo:
We will make use of the text-decoration shorthand property for the <h3> element.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text-Decoration Shorthand Property</title>
<style>
h3 {
text-decoration: underline red double 2px;
}
</style>
</head>
<body>
<h3>This is a decorated text.</h3>
</body>
</html>
Output:
We can observe the stylized text in the resulting content below.
Flex shorthand property
The flex property in CSS is utilized to manage the arrangement of elements. It is the shorthand property for the given individual flex properties:
- flex-grow
- flex-shrink
- flex-basis
The flex-grow property is used to specify the relative growth factor of a flex item compared to other flexible items.
Syntax:
flex-grow: number;
flex-shrink: It is used to specify the extent to which a particular item should reduce its size compared to other flexible items within the container.
Syntax:
flex-shrink: number;
The flex-basis property is used to define the starting size of a flexible item.
Syntax:
flex-basis: auto| number;
We can make use of the flex shorthand attribute to assign values to all of its separate properties.
Syntax of shorthand property of flex
flex: grow shrink basis;
Demo:
We will make use of the flex shorthand attribute in this demonstration.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flex Shorthand Property</title>
<style>
#inner {
height: 125px;
width: 100%;
display: flex;
}
#inner div {
padding: 6px;
}
.gold {
background-color: gold;
flex: 0 1 150px;
}
.darkorange {
background-color: darkorange;
}
.orchid {
background-color: orchid;
flex: 0 1 75px;
}
.silver {
background-color: silver;
}
</style>
</head>
<body>
<h1>Flex Shorthand Property</h1>
<div id="outer">
<p>Setting the flex property of the Gold div and Orchid div elements:</p>
<div id="inner">
<div class="gold">Gold div</div>
<div class="darkorange">Darkorange div</div>
<div class="orchid">Orchid div</div>
<div class="silver">Silver div</div>
</div>
</div>
</body>
</html>
Output:
We can observe that the flex attribute is being utilized by the Gold div and Orchid div components.
Grid-Template shorthand property
The grid property in CSS is utilized to create a grid layout. It is the shorthand property for the given individual grid properties:
- grid-template-columns
- grid-template-rows
- grid-template-areas
grid-template-columns: This property is used to specify the quantity of columns within a grid.
Syntax:
grid-template-columns: none| min-content| max-content| auto| length;
It is employed to specify the quantity of rows within a grid structure.
Syntax:
grid-template-rows: none| min-content| max-content| auto| length;
grid-template-areas: This property is employed to specify the layout of grid areas.
Syntax:
grid-template-areas: none| itemnames;
We can make use of the grid-template shorthand attribute to set multiple properties at once.
Syntax of shorthand property of grid
grid-template: none| grid-template-rows/ grid-template-columns| grid-template-areas;
Demo:
We will employ the grid-template shorthand property for the specified HTML element.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Grid-Template Shorthand Property</title>
<style>
.container {
display: grid;
grid-template: 100px 90px/90px auto;
grid-gap: 12px;
background-color: red;
padding: 12px;
}
.container > div {
background-color: yellow;
text-align: center;
padding: 30px 0;
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
</div>
</body>
</html>
Output:
We can observe that the grid-template property is assigned to the container class.
Browsers Support
Following are the browsers that support the discussed shorthand properties:
- Google Chrome
- Opera
- Firefox
- Safari
- Microsoft Edge
Conclusion:
We have covered the concept of shorthand properties in CSS within this guide. We have explored different shorthand properties like margin, border, font, padding, background, outline, border-radius, transition, list-style, text-decoration, flex, and grid-template. These shorthand attributes aid developers in increasing efficiency by enabling them to write more compact code.