An Easy Guide to CSS Shorthand Properties

As we already discussed, If you are a frontend developer, you know the pain of writing bulky CSS codes as they consume a lot of your space and time. So using CSS shorthand properties can save your time and space and make your code look cleaner and nicer.

Shorthand properties are a group of CSS properties that allow us to write multiple properties in a single line. Also spaces separate these properties values. However, not all CSS properties can be written in shorthand, excluding some. So in this blog, we will cover some more CSS shorthand properties.

1. List

This property allows you to mark list items in the following two types:

i. Ordered List(<ol>)

In the ordered list, items are marked with letters or numbers.

ii. Unordered List(<ul>)

In the unordered list, items are marked with bullets.

List style property is the shorthand property that set the following list properties in one declaration:

Longhand Code:

list-style-type: star;
list-style-position: inside;
list-style-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Star_full.svg/20px-Star_full.svg.png);

Shorthand Code:

list-style: star inside url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Star_full.svg/20px-Star_full.svg.png);

See the Pen by WidgetCore (@WidgetCore) on CodePen.

2. Transition

CSS Transitions allow you to change other CSS properties values smoothly over a given duration. It also provides a way to control the speed of the animation while changing the CSS properties.

The list of transition properties:

i. transition-property: Specifies the name of the CSS property for which the transition is.

ii. transition-duration: This property tells the duration in which the transition needs to complete.

iii. transition-timing function: This property allows you to decide the speed at which the transition needs to happen.

iv. transition-delay: This property allows you to set the delay, i.e., the wait time before the start of the transition.

Longhand Code:

transition-property: width;
transition-duration: 2s;
transition-timing-function: ease-in-out;
transition-delay: 0s;

Shorthand Code:

transition: width 2s ease-in-out 0s; 

See the Pen by WidgetCore (@WidgetCore) on CodePen.

3. Animation

CSS animation properties animate the transition from one style configuration to another.

The list of animation properties:

Longhand Code:

animation-name: circle-square;
animation-duration:2s; 
animation-timing-function: ease-out;
animation-delay:0s;
animation-direction:alternate;
animation-iteration-count:infinite;
animation-fill-mode: none;
animation-play-state: running;

Shorthand Code:

animation: circle-square 2s ease-out 0s alternate infinite none running;

See the Pen by WidgetCore (@WidgetCore) on CodePen.

4. Flex

The flex property tells whether the item will grow or shrink to fit in the container.

This property is the shorthand property for:

Longhand Code:

flex-grow: 1;
flex-shrink: inherit; /*defaults to 1*/
flex-basis: 100px;

Shorthand Code:

flex: 1 100px;

See the Pen by WidgetCore (@WidgetCore) on CodePen.

Conclusion:

I hope the above write-up was enough to learn everything about CSS shorthand properties. Shorthand properties not only save your time and energy but also makes the code look cleaner and readable. However, it requires a lot of time to memorize them.

So now it’s your turn, list out all the CSS shorthand properties you use in the comment section below.

Happy Coding!