0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>There are normal properties in the CSS that control a single display parameter, and there are shorthand properties that control several parameters simultaneously.</p>
1
<p>There are normal properties in the CSS that control a single display parameter, and there are shorthand properties that control several parameters simultaneously.</p>
2
<p>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:</p>
2
<p>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:</p>
3
font: 16px/26px "Arial", sans-serif;<p>The browser “decodes” this information into a set of normal properties and their values:</p>
3
font: 16px/26px "Arial", sans-serif;<p>The browser “decodes” this information into a set of normal properties and their values:</p>
4
font-size: 16px; /* Was assigned in font */ line-height: 26px; /* Was assigned in font */ font-family: "Arial", sans-serif; /* Was assigned in font */<i>font-weight: normal;</i>/* Was not assigned in font */<i>font-style: normal;</i>/* Was not assigned in font */<i>font-variant: normal;</i>/* Was not assigned in font */<p>If the value for the normal property was not specified in the shorthand property, then the browser uses<i>the original value</i>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.</p>
4
font-size: 16px; /* Was assigned in font */ line-height: 26px; /* Was assigned in font */ font-family: "Arial", sans-serif; /* Was assigned in font */<i>font-weight: normal;</i>/* Was not assigned in font */<i>font-style: normal;</i>/* Was not assigned in font */<i>font-variant: normal;</i>/* Was not assigned in font */<p>If the value for the normal property was not specified in the shorthand property, then the browser uses<i>the original value</i>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.</p>
5
<p>A shorthand property<em>always</em>assigns the values<em>to all</em>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:</p>
5
<p>A shorthand property<em>always</em>assigns the values<em>to all</em>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:</p>
6
font: 16px "Arial", sans-serif;<p>In this case, the browser uses the original value for the line-height, which may ruin the visual presentation of the text.</p>
6
font: 16px "Arial", sans-serif;<p>In this case, the browser uses the original value for the line-height, which may ruin the visual presentation of the text.</p>
7
<p>It’s now time to add a pretty background to the blog page. We use the shorthand background property to achieve this.</p>
7
<p>It’s now time to add a pretty background to the blog page. We use the shorthand background property to achieve this.</p>