Condense your CSS code by writing in CSS shorthand! A few CSS properties allow for one single property to replace many properties.
For example, if you want to give an element a different amount of padding on each side, it could look like this:
- div{
- padding-top: 4px;
- padding-right: 7px;
- padding-bottom 3px;
- padding-left: 10px;
- }
But why write excess code if you don’t have to? These four lines can be condensed into one single padding property, with each value being separated by a space, like this:
- div{
- padding: 4px 7px 3px 10px;
- }
The padding-top value comes first, right comes second, bottom comes third, and left comes last.
If you define only 2 values instead of 4, the first value will represent the padding at the top and bottom of the element, while the second value represents the right and left.
- div{
- padding: 10px 5px;
- }
In the example above, 10px represents the amount of padding the top and bottom sides of the div receive, and 5px represents the padding of the right and left sides of the div.
The same rules apply for the margin property.
Many other CSS properties can be written using shorthand, including background, border, font, list-style, and text-decoration.