Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Shorthand properties
There are normal properties in the CSS that control a single display parameter, and there are shorthand properties that control several parameters simultaneously.
For example, the font-size
property is normal, since it only controls the font size. Whereas the font
property is shorthand, since it assigns six parameters at once: the font size and name, the line height, and several others. The browser always “decodes” the shorthand properties into normal ones. For example, the following is an example of a shorthand property:
font: 16px/26px "Arial", sans-serif;
The browser “decodes” this information into a set of normal properties and their values:
font-size: 16px; /* Was assigned in font */
line-height: 26px; /* Was assigned in font */
font-family: "Arial", sans-serif; /* Was assigned in font */
font-weight: normal; /* Was not assigned in font */
font-style: normal; /* Was not assigned in font */
font-variant: normal; /* Was not assigned in font */
If the value for the normal property was not specified in the shorthand property, then the browser uses the original value of this property during the decoding process. In the example the value 16px
for font-size
was taken from font
, whereas the original value normal
was used for the font-weight
.
A shorthand property always assigns the values to all of its components. The original values are used for non-explicitly defined components. Therefore, shorthand properties should be used with caution. For example, if you forget to describe the line height:
font: 16px "Arial", sans-serif;
In this case, the browser uses the original value for the line-height
, which may ruin the visual presentation of the text.
It’s now time to add a pretty background to the blog page. We use the shorthand background
property to achieve this.
- index.html
- style.css
Thanks! We’ll fix everything at once!
The code has changed, click “Refresh” or turn autorun on.
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Comments