CSS shorthand properties helps you to write clean CSS code and saves your times and reduce number of lines in your code and indirectly your code looks like pro developer. Here I sharing shorthand properties related list, background image and colors and explore more and play around them.
Margin & Padding
Normal Code
#div {
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;
(auto, 0, px, pt, em or %)
}
shorthand properties
#div {
margin:0 5px 10px 15px;
(top right bottom left)
}
Border
Normal Code
#div {
border-width: 5px;
(thin, thick, medium or set value) (default = medium)
border-style: dotted;
(solid, dashed, dotted, double, etc) (default = none)
border-color: blue;
(named, hex, rgb or 0-255) (default = value of elements/
elements parent color property)
}
shorthand properties
#div {
border:5px dotted blue;
}
Background
Normal Code
#div {
background-color: #CCCCCC;
(named, hex, rgb or 0-255) (default = transparent)
background-image: url(images/bg.gif);
(url or none) (default = none)
background-repeat: no-repeat;
(repeat, repeat-x, repeat-y or no-repeat) (default =
repeat)
background-attachment: scroll;
(fixed or scroll) (default = scroll)
background-position: top left;
(top, right, left, bottom or center) (default = 0% 0%)
}
shorthand properties
#div {
background:#CCC url(images/bg.gif) no-repeat 0 0;
}
List
Normal Code
#div {
list-style-image: url(images/bullet.gif);
(url or none) (default = none)
list-style-position: inside;
(inside or outside) (default = outside)
list-style-type: square;
(circle, disc, square, etc) (default = disc)
}
shorthand properties
#div {
list-style:square inside url(images/bullet.gif);
}
This is how you can write your code with shorthand properties, you can also write more or explore the other shorthand properties if you want. This are the basic properties which I shared here....!!
Thank you for Reading!
Hey, I'm Ganesh 🖐
I write daily article on web development and sharing valuable resources which might helps you as developer or beginner.
for more content
- follow me ( Ganesh_Patil )
- You can also connect with me twitter to get more content related to web development
Thank you for the support friends!
Top comments (0)