Here are some CSS Shorthand Properties which are helpful for every developer:-
Transition
Transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately.
Longhand
transition-property: font-size;
transition-duration: 2s;
transition-timing-function: ease-in-out;
transition-delay: 1s;
Shorthand
transition: font-size 2s ease-in-out 1s
Text-Decoration
The text-decoration property adds an underline, overline, line-through, or a combination of lines to selected text.
Longhand
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: dotted;
text-decoration-thickness: 0.2rem ;
Shorthand
text-decoration: underline red dotted 0.2rem;
Flex
The flex property is a sub-property of the Flexible Box Layout module(CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension).
Longhand
flex-grow: 3;
flex-shrink: 4;
flex-basis: 10%;
Shorthand
flex: 3 4 10%
Gap
The gap property in CSS is for row-gap and column-gap, specifying the size of gutters, which is the space between rows and columns within grid, flex, and multi-column layouts.
Longhand
row-gap: 10%;
column-gap: 5%;
Shorthand
gap: 10% 5%;
Font
The font property in CSS allows us to change the styling of texts.
Longhand
font-style: small-caps;
font-weight: bold;
font-size: 10px;
line-height: 2.3;
font-family: cursive;
Shorthand
font: small-caps bold 10px/2.3 cursive;
Background
The Background CSS property allows us to sets background style properties, such as color, image, origin and size, or repeat method.
Longhand
background-color: yellow;
background-image: url('https://....');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right top;
Shorthand
background: yellow url('https://....') no-repeat right top;
Border
The border property in CSS is used to drawing a line around the element it is applied to.
Longhand
border-width: 2px;
border-style: dotted;
border-color: green;
Shorthand
border: 2px dotted green;
Margin and Padding
Margin:-
The margin property defines the outermost portion of the box model, creating space around an element, outside of any defined borders
Padding:-
The padding property in CSS defines the innermost portion of the box model, creating space around an element’s content, inside of any defined margins and/or borders.
Longhand
margin-top: 2px;
margin-right: 3px;
margin-bottom: 4px;
margin-left: 5px;
padding-top: 2px;
padding-right: 3px;
padding-bottom: 4px;
padding-left: 5px;
Shorthand
margin : 2px 3px 4px 5px;
padding : 2px 3px 4px 5px;
Outline
The outline property in CSS draws a line around the outside of an element. It’s similar to border except that:
- It always goes around all the sides, you can’t specify particular sides.
- It’s not a part of the box model, so it won’t affect the position of the element or adjacent elements (nice for debugging!).
Longhand
outline-width: 2px;
outline-style: solid;
outline-color: black;
Shorthand
outline: 2px solid black;
Animation
The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or width. Each animation needs to be defined with the @keyframes at-rule which is then called with the animation property.
Longhand
animation-name: round;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 0.5s;
animation-iteration-count: reverse;
animation-direction: both;
animation-fill-mode: running;
animation-play-state: slideout;
Shorthand
animation: round 3s ease-in 0.5s infinite reverse both running slideout;
Happy learning...
Follow for more..🎉🎉
Top comments (1)
It was good to know, great article. Thanks for sharing..