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;
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;
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;
4. Font
property
font
combines font-style
, font-variant
, font-weight
, font-size
, line-height
, and font-family
properties.
/*
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;
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;
6. Border
property
border
combines border-width
, border-style
, and border-color
properties.
/*
border-width: 10px;
border-style: solid;
border-color: #AA88FF;
*/
border: 10px solid #aa88ff;
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;
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');
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;
10. place-self
property
place-self
combines justify-self
and align-self
properties.
/*
justify-self: start;
align-self: stretch;
*/
place-items: start stretch;
11. place-contnent
property
place-content
combines justify-content
and align-content
properties in CSS.
/*
justify-content: center;
align-content: center;
*/
place-content: center;
12. place-items
property
place-items
: combines justify-items
and align-items
properties.
/*
place-items: end;
justify-items: start;
*/
place-items: start end;
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;
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;
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)
Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍
Great article, thank you.
Just a heads up on a typo: