Mastering CSS Shorthand Secret: Write less style more

Writing CSS can sometimes feel repetitive, especially when dealing with multiple properties for margins, paddings, borders, and backgrounds. Luckily, CSS provides shorthand properties that allow you to combine multiple values into a single line of code, making your stylesheets cleaner and more efficient.

In this guide, you'll learn about CSS shorthand properties, how they work, and how to use them effectively with practical examples and outputs.

1. Margin and Padding Shorthand

Instead of writing:

You can use the shorthand property:

How it works:

1 value → Applies to all four sides.

2 values → First value is for top & bottom, second is for left & right.

3 values → First = top, second = left & right, third = bottom.

4 values → Top, right, bottom, left (clockwise order).

Example Output

🔗  Learn more: CSS Box Model Explained

2. Border Shorthand

Writing individual border properties:

Can be shortened to:

3. Background Shorthand

Instead of writing:

Use this shorthand:

Syntax Order: background: color image repeat position / size;

4. Font Shorthand

Longhand example:

Shorthand:

5. List Shorthand

Instead of:

Use:

6. Flexbox Shorthand (Flex Property)

Instead of:

Use shorthand:

Syntax: flex: grow shrink basis;

7. Grid Shorthand (Grid Property)

Instead of:

Use:

Conclusion

CSS shorthand properties save time, reduce redundancy, and make stylesheets more readable. By mastering these shorthand techniques, you’ll write cleaner, faster, and more efficient CSS.

💬 Did you find this helpful? Let me know in the comments!

🔗 Follow me on Blogger for more tutorials: My Blogger Profile

📢 Join me on social media for more tips!

Subscribe to Our Newsletter