CSS Shorthand Properties
Tags: css, webdev, beginners, tutorial
Published: 2023-02-12 12:09:12

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 <u>@keyframes</u> 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..🎉🎉