A alexanderjuulj.com
CSS
Mar 23, 2023
CSS Shorthand Properties

Shorthand properties: CSS Best Practices, Part 2

CSS shorthand properties are a powerful tool for creating efficient, concise, and easy-to-read CSS code.

Alexander Juul Jakobsen
WordPress Developer for over 10 years

In this post, we’ll explore some of the most commonly used CSS shorthand properties and provide examples of how to use them effectively. In CSS it will allow you to define multiple properties with a single line of code, which can make your code more concise and easier to read.

Examples of shorthand properties

Padding and Margin

The padding and margin properties are two of the most commonly used shorthand properties in CSS. They allow you to specify the amount of space around an element in a single line of code. The shorthand syntax for these properties is:

padding: top right bottom left;
margin: top right bottom left;

For example:
You want to set a padding of 12 pixels on the top and bottom, and 24 pixels on the left and right.

padding: .75rem 1.5rem

Or, if you want to center an element horizontally using margin, you can use the following code:

margin: 0 auto;

Font

The font property is another commonly used shorthand property in CSS. It allows you to specify multiple font properties in a single line of code. The shorthand syntax for this property is:

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

For example:
You want to set the font size to 16 pixels, the font family to Arial, and the fallback font to sans-serif, you can use the following code:

font: 16px Arial, sans-serif;

Border

The border property is a shorthand property that allows you to specify multiple border properties in a single line of code. The shorthand syntax for this property is:

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

For example:
If you want to set a border of 1 pixel width, with a solid style and black color, you can use the following code:

border: 1px solid black;

CSS shorthand properties are a great way to create concise, efficient, and easy-to-read CSS code.

Using them can save you time and effort, reduce repetition, and create modular CSS that is easy to maintain.

It’s important to use the feature wisely, and to ensure that the shorthand notation doesn’t sacrifice clarity or specificity. With some practice, you can become proficient in using shorthand properties and take your CSS skills to the next level.

More CSS best practices