Learn useful CSS shorthand in one thread! 🔥
➡️Animated Tutorial Makes learning Easier.
➡️Animated Tutorial Makes learning Easier.
CSS Shorthand Explained:
CSS shorthand combines multiple related properties into a single line of code, making your code more concise and readable.
CSS shorthand combines multiple related properties into a single line of code, making your code more concise and readable.
Margin Shorthand:
margin: top right bottom left;. Replace the top, right, bottom, and left with the desired values.
For example, margin: 10px 20px 30px 40px; sets the margin for top, right, bottom, and left to 10px, 20px, 30px, and 40px respectively.
margin: top right bottom left;. Replace the top, right, bottom, and left with the desired values.
For example, margin: 10px 20px 30px 40px; sets the margin for top, right, bottom, and left to 10px, 20px, 30px, and 40px respectively.
Padding Shorthand:
padding: top right bottom left;. Replace the top, right, bottom, and left with your desired values.
For example, padding: 10px 20px 30px 40px; sets the padding for top, right, bottom, and left to 10px, 20px, 30px, and 40px respectively
padding: top right bottom left;. Replace the top, right, bottom, and left with your desired values.
For example, padding: 10px 20px 30px 40px; sets the padding for top, right, bottom, and left to 10px, 20px, 30px, and 40px respectively
Background Shorthand:
background: background-color background-image background-repeat background-position;.
Write in shorthand, For example, background: #FFFFFF url("image.png") no-repeat center; sets a white background with the image "image.png" centered and not repeated.
background: background-color background-image background-repeat background-position;.
Write in shorthand, For example, background: #FFFFFF url("image.png") no-repeat center; sets a white background with the image "image.png" centered and not repeated.
Border Shorthand:
border: border-width border-style border-color;.
You can use this to combine any of the border properties into a single line, such as border: 1px solid #000000; to create a 1px black solid border.
border: border-width border-style border-color;.
You can use this to combine any of the border properties into a single line, such as border: 1px solid #000000; to create a 1px black solid border.
If you like my work, buy me a coffee and support my work 🎉☕
buymeacoffee.com/iamchonchol
buymeacoffee.com/iamchonchol
• • •
Missing some Tweet in this thread? You can try to
force a refresh
