DEV Community

Cover image for CSS Shorthand Properties
Prerna Sharma
Prerna Sharma

Posted on

4 1 1 1 1

CSS Shorthand Properties

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;
Enter fullscreen mode Exit fullscreen mode

Shorthand

 transition: font-size 2s ease-in-out 1s
Enter fullscreen mode Exit fullscreen mode

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 ;
Enter fullscreen mode Exit fullscreen mode

Shorthand

 text-decoration: underline red dotted 0.2rem;
Enter fullscreen mode Exit fullscreen mode

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%;
Enter fullscreen mode Exit fullscreen mode

Shorthand

 flex: 3 4 10%
Enter fullscreen mode Exit fullscreen mode

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%;
Enter fullscreen mode Exit fullscreen mode

Shorthand

gap: 10% 5%;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Shorthand

font: small-caps bold 10px/2.3 cursive;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Shorthand

background: yellow url('https://....') no-repeat right top;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Shorthand

border: 2px dotted green;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Shorthand

margin : 2px 3px 4px 5px;
padding : 2px 3px 4px 5px;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Shorthand

outline: 2px solid black;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Shorthand

animation: round 3s ease-in 0.5s infinite reverse both running slideout;
Enter fullscreen mode Exit fullscreen mode

Happy learning...
Follow for more..🎉🎉

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (1)

Collapse
 
codeofrelevancy profile image
Code of Relevancy

It was good to know, great article. Thanks for sharing..

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay