Shorthand properties

Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.

 

Shorthand properties (Cont...)

The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme.

 

For instance, the CSS background property is a shorthand property that's able to define the values of background-color, background-image, background-repeat, and background-position.

 

Similarly, the most common font-related properties can be defined using the shorthand font, and the different margins around a box can be defined using the margin shorthand.

Shorthand properties (Cont...)

The universal shorthand property
 

CSS provides a universal shorthand property, all, which applies its value to every property in the document. Its purpose is to change the properties' inheritance model to one of:

CSS provides four special universal property values for controlling inheritance. Every CSS property accepts these values.

Shorthand properties (Cont...)

The universal shorthand property

 

inherit

Sets the property value applied to a selected element to be the same as that of its parent element. Effectively, this "turns on inheritance".

 

initial

Sets the property value applied to a selected element to the initial value of that property.

Shorthand properties (Cont...)

The universal shorthand property

 

unset

Resets the property to its natural value, which means that if the property is naturally inherited it acts like inherit, otherwise it acts like initial.

 

Shorthand properties (Cont...)

The universal shorthand property

 

For example:

  • The second list item has the class my-class-1 applied. This sets the color of the <a> element nested inside to inherit. If you remove the rule how does it change the color of the link?
     
  • Do you understand why the third and fourth links are the color that they are? Check the description of the values above if not.

Shorthand properties (Cont...)

The universal shorthand property

 

  • Which of the links will change color if you define a new color for the <a> element — for example
    a { color: red; }?

Shorthand properties (Cont...)

The universal shorthand property

body {
    color: green;
}

.my-class-1 a {
    color: inherit;
}

.my-class-2 a {
    color: initial;
}
          
.my-class-3 a {
    color: unset;
}

<ul>
    <li>Default <a href="#">link</a> color</li>
    <li class="my-class-1">Inherit the <a href="#">link</a> color</li>
    <li class="my-class-2">Reset the <a href="#">link</a> color</li>
    <li class="my-class-3">Unset the <a href="#">link</a> color</li>
</ul>

Shorthand properties (Cont...)

​https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties

Reference:

Shorthand properties (Cont...)

Made with Slides.com