DEV Community

Cover image for CSS shorthand properties
Ganesh Patil
Ganesh Patil

Posted on

CSS shorthand properties

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 %)
}

Enter fullscreen mode Exit fullscreen mode

shorthand properties

#div {
margin:0 5px 10px 15px;
(top right bottom left)
}

Enter fullscreen mode Exit fullscreen mode

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)
}
Enter fullscreen mode Exit fullscreen mode

shorthand properties

#div {
border:5px dotted blue;
}
Enter fullscreen mode Exit fullscreen mode

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%)
}
Enter fullscreen mode Exit fullscreen mode

shorthand properties

#div {
background:#CCC url(images/bg.gif) no-repeat 0 0;
}
Enter fullscreen mode Exit fullscreen mode

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)
}
Enter fullscreen mode Exit fullscreen mode

shorthand properties

#div {
list-style:square inside url(images/bullet.gif);
}
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (0)