1. Margin and Padding
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
Margin: 10px 15px 10px 15px;
2. Background
The background shorthand combines multiple background properties into one line.
background-color: #ff5733;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: center;
background: #ff5733 url('image.jpg') no-repeat center;
3. Font
Combine font properties like style, variant, weight, size, line-height, and family.
font-style: italic;
font-weight: bold;
font-size: 16px;
line-height: 1.5;
font-family: Arial, sans-serif;
font: italic bold 16px/1.5 Arial, sans-serif;
4. Border
Combine border properties into one line.
border-width: 2px;
border-style: solid;
border-color: #333;
border: 2px solid #333;
5. List-Style
Combine properties like list-style-type, list-style-position, and list-style-image.
list-style-type: circle;
list-style-position: inside;
list-style-image: url('bullet.png');
list-style: circle inside url('bullet.png');
6. Transition
Set multiple transition properties in one line.
transition-property: opacity;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
transition-delay: 0.2s;
transition: opacity 0.5s ease-in-out 0.2s;
7. Animation
animation-name: slidein;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation: slidein 3s ease-in 1s;
`animation-name: slidein;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;`
animation: slidein 3s ease-in 1s infinite alternate;
8. Flex
The flex property is shorthand for flex-grow, flex-shrink, and flex-basis.
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
flex: 1 0 auto;
9. Grid Template
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr;
grid-template-areas: "header header" "sidebar main";
grid-template: "header header" 100px "sidebar main" 200px / 1fr 2fr;
10. Text Decoration
Combine line, style, color for text-decoration.
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
text-decoration: underline wavy red;
But why Web designer Use this method?
- Reduces Code Size
- Enhances Readability and Simplicity
- Improves Maintainability
- Reduces the Chance of Errors
- Increases Efficiency in Development
- Supports Consistent Styling Across Projects
- Better for Debugging
- Improves CSS Optimization and Minification
Ending Point
shorthand properties help developers write CSS that is faster to write, easier to read, more efficient to run, and simpler to maintain. This method aligns with best practices in modern web development, promoting clean and optimized code.
Top comments (0)