CSS Shorthand Properties

If you are a frontend developer, then you know the pain of writing bulky CSS codes as they consume a lot of your space and time. Using CSS shorthand properties can save your time and space and make your code look cleaner and nicer.

Shorthand properties are a group of CSS properties that allow us to write multiple properties in a single line. These properties values are separated by spaces. However, not all CSS properties can be written in shorthand, excluding some. So this blog covers the various bits of CSS shorthand properties that will make your day-to-day work easier.

1. Margin

Margin property is the outermost layer that defines the margin, which is the spacing around elements outside the border (according to the CSS box model). We can define margin for all four sides individually: top, bottom, left, and right.

Longhand Code:

margin-top: 100px;
margin-right: 50px;
margin-bottom: 100px;
margin-left: 50px;

Shorthand Code:

margin: 100px 50px 100px 50px;

Output:

2. Border

Border is the area between the box’s padding and margin used to apply borders to the elements. It allows you to set width, style, and color into one single declaration. Border can be set for all four sides individually, i.e., top, bottom, left, and right.

Longhand Code:

border-width: 7px;
border-style: dotted;
border-color: #fff; 

Shorthand Code:

border: 7px dotted #fff;

Output:

3. Background

Background is used to set a background on the web page. It can be applied to any element like h1, p, etc. In addition, you can specify background color, background image, background-repeat, and many more.

Longhand Code:

background-color: #000;
background-image: url( https://wallpaperaccess.com/full/2394467.jpg);
background-repeat: no-repeat;
background-position: center top;

Shorthand Code:

background:#000 url(https://wallpaperaccess.com/full/2394467.jpg) no-repeat center top;

Output:

4. Padding

Padding property generates the spacing around the element’s content inside the borders. We can define padding for all four sides individually: top, bottom, left, and right.

Longhand Code:

padding-top: 100px;
padding-right: 50px;
padding-bottom: 100px;
padding-left: 50px;

Shorthand Code:

padding: 100px 50px 100px 50px;

Output:

5. Outline

The outline property makes an outline to the elements. It allows you to set width, style, and color into one single declaration.

Longhand Code:

outline-width: 7px;
outline-style: dotted;
outline-color: #000;

Shorthand Code:

outline: 7px dotted #000;

Output:

6. Font

The Font property applies fonts to the webpage. It can set various attributes like font-family, font-weight, font-size, line-height, and font-family.

Longhand Code:

font-style: oblique;
font-weight: bold;
font-size: 5rem;
line-height: 150%;
font-family: sans-serif;

Shorthand Code:

font: oblique bold 5rem/150% sans-serif;

Output:

Conclusion

For a developer, speed and time are two major concerns. If you have ever seen the code of a professional developer, then you may always wonder how they achieve similar goals in less time and space. Sometimes, it takes a lot of time to understand their code as their code is concise and compact. They didn’t achieve that level by coding for so long period; it’s just that they use the tricks and shorthands in their code. Shorthand not only saves time and energy but also makes the code more readable, flexible, and reliable. It allows you to set the values of various other CSS properties simultaneously. By using shorthands, you can think actively instead of focusing just on code. Overriding any property becomes easy with shorthand. But it requires time to memorize them.

I hope you learned a lot from this blog. In the upcoming blogs, we will update you with some more shorthand properties, and if you know some interesting shorthand properties or CSS tricks, you might share them with us. We will definitely cover them all in our next blog.

Happy Coding!