DEV Community

Cover image for A Comprehensive Guide to CSS Shorthand Properties
wvsr
wvsr

Posted on • Updated on

A Comprehensive Guide to CSS Shorthand Properties

CSS shorthand is a group of CSS properties that allow you to write multiple CSS properties in a single line of code. This can help you save time, reduce the size of your stylesheet, and make your code more readable.

1. Background property

The background property combines the background-color, background-image, background-repeat, background-position, and background-size properties.

/*
background-color: #CCCCCC;
background-image: url(https://example.com/example.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
*/

background: #cccccc url(https://example.com/example.png) no-repeat fixed right
  top;
Enter fullscreen mode Exit fullscreen mode

2. Margin property

margin property combines margin-top, margin-right, margin-bottom, and margin-left
properties.

/*
margin-top: 20px;
margin-right: 30px;
margin-bottom: 70px;
margin-left: 80px;
margin: top right bottom left;
*/
margin: 20px 30px 70px 80px;
Enter fullscreen mode Exit fullscreen mode

3. Padding property

padding combines padding-top, padding-right, padding-bottom, and padding-left properties.

/*
padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
*/
padding: top right bottom left;
padding: 10px 20px 40px;
Enter fullscreen mode Exit fullscreen mode

4. Font property

font combines font-style, font-variant, font-weight, font-size, line-height, and font-familyproperties.

/*
font-style: oblique;
font-weight: 400;
font-variant: small-caps;
font-size: 24px;
font-family: Times, serif;
*/
font: oblique 400 small-caps 24px Times, serif;
Enter fullscreen mode Exit fullscreen mode

5. Transition property

The transition property combines the transition-property, transition-duration, transition-timing-function, and transition-delay properties.

/*
transition-property: background, color;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-delay: 60ms;
*/
transition: background-color 1s ease-out 60ms;
Enter fullscreen mode Exit fullscreen mode

6. Border property

bordercombines border-width, border-style, and border-color properties.

/*
border-width: 10px;
border-style: solid;
border-color: #AA88FF;
*/
border: 10px solid #aa88ff;
Enter fullscreen mode Exit fullscreen mode

7. Flex property

flex combines flex-grow, flex-shrink, and flex-basis properties.

/*
flex-grow: 1;
flex-shrink: 1;
flex-basis: 1em;
*/
flex: 1 1 1em;
Enter fullscreen mode Exit fullscreen mode

8. list-style property

list-style combines list-style-type, list-style-position, and list-style-image properties.

/*
list-style-type: square;
list-style-position: inside;
list-style-image: url("list-icon.png");
*/
list-style: square inside url('list-icon.png');
Enter fullscreen mode Exit fullscreen mode

9. Animation property

animation combines animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, and animation-fill-mode properties.

/*
animation-duration: 5s;
animation-name: example;
animation-delay: 2s;
animation-direction: alternate;
animation-fill-mode: normal
animation-iteration-count: infinite;
animation-play-state: running
animation-timing-function: ease-out;
*/

animation: 5s example 2s alternate infinite ease-out;
Enter fullscreen mode Exit fullscreen mode

10. place-self property

place-self combines justify-self and align-self properties.

/*
justify-self: start;
align-self: stretch;
*/
place-items: start stretch;
Enter fullscreen mode Exit fullscreen mode

11. place-contnent property

place-content combines justify-content and align-content properties in CSS.

/*
justify-content: center;
align-content: center;
*/
place-content: center;
Enter fullscreen mode Exit fullscreen mode

12. place-items property

place-items: combines justify-items and align-items properties.

/*
place-items: end;
justify-items: start;
*/
place-items: start end;
Enter fullscreen mode Exit fullscreen mode

13. text-decoration property

text-decoration property combines the text-decoration-line, text-decoration-style, and text-decoration-color properties.

/*
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-color: red;
*/
text-decoration: underline dotted red;
Enter fullscreen mode Exit fullscreen mode

14. outline property

The outline property is a shorthand for the outline-color, outline-style, and outline-width properties.

/*
outline-color: red;
outline-style: solid;
outline-width: 2px;
*/
utline: 2px solid red;
Enter fullscreen mode Exit fullscreen mode

I hope this blog has given you a solid understanding of CSS shorthand properties and how they can be used to write more efficient code. If you're interested in my React development services, you can hire me on Fiverr through this gig: https://www.fiverr.com/share/K0e54E. Thank you for reading!

Top comments (2)

Collapse
 
fruntend profile image
fruntend

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Collapse
 
taylor-g profile image
Taylor G • Edited

Great article, thank you.
Just a heads up on a typo:

11: place-contnent property