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:

i. list-style-type: This property allows you to change the shape of the bullet points in the unordered list and the style of numbering in an ordered list.

ii. list-style-position: This property specifies the position of the marker, i.e., whether the marker should appear inside or outside.

iii. list-style-image: This property allows you to specify the image so you can use your own style markers.

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:

i. animation-name: This property declares the name of the animation, i.e. @keyframes.

ii. animation-duration: Tells the duration in which the animation needs to complete.

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

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

v. animation-direction: This allows us to set the direction of the animation after the cycle.

vi. animation-iteration-count: Specifies the number of times the animation needs to happen.

vii. animation-fill-mode: Sets which value to be applied before or after the animation.

viii. animation-play-state: Plays or pauses the animation.

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:

i. flex-shrink: It defines the ability of the item to shrink relative to other items when there is no enough space in the container.

ii. flex-grow: It defines the ability of the item to grow.

iii. flex-basis: It defines the initial size of the item before any distribution in the available space.

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!

Some links on this page are affiliate links. This means that if you choose to make a purchase, we may earn a small commission at no extra cost to you. For more information, Go here

Leave a Reply

Your email address will not be published.