CSS Shorthand properties allow you to change the values of multiple CSS properties at the same time. Using a shorthand feature, you can create style sheets that are quicker to write (and frequently easier to understand). The CSS specification defines shorthand properties to aggregate the definition of common attributes working on the same subject. The CSS background property, for example, can be used to define the background-color, background-image, background-repeat, and background-position values. The shorthand margin can be used to define the various box margins in the same way that the shorthand font can be used to specify the most common font-related parameters. 1.Tricky edge cases
There are a few edge cases with shorthand properties that you should be aware of. 2.Omitting properties Unspecified values are reset to their initial values. This implies that it replaces previously set values. Only the values of specific properties can be inherited. It is not possible to allow specific properties to inherit by omitting them because missing values are replaced by their initial value. The term inherit can refer to a property as a whole, not to a specific value. The only way to make a specific value inheritable is to use the longhand property in conjunction with the keyword inherit. 3.Ordering properties The values of the attributes replaced by shorthand properties are not always presented in the same order. Because the order is irrelevant, this works well when the values used by these properties are of different kinds, but not so well when multiple properties can use the same value. If you want to increase your CSS knowledge, go to the online CSS quiz. This quiz will assess your understanding of the basics of CSS. You may reinforce your CSS foundation and increase your knowledge by using css multiple-choice questions. 4.Edges of a box Shorthands for box-edge-related attributes, such as border-style, margin, or padding, always represent those edges using a standard 1-to-4-value syntax: 1-value syntax: border-width: 1em — The single value represents all edges: 2-value syntax: border-width: 1em 2em — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones: 3-value syntax: border-width: 1em 2em 3em — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge: 4-value syntax: border-width: 1em 2em 3em 4em — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top: The word trouble’s consonant order, Top-Right-Bottom-Left (TRBL), begins with the same letter as TRBL. You might alternatively think of it as the rotational sequence of a clock’s hands: 1em starts at 12 o’clock, followed by 2em at 3, followed by 3em at 6, and finally 4em at 9. 5.Corners of a box Similar to this, shorthands dealing with box corners’ characteristics, like border-radius, always represent those corners with a consistent 1-to-4-value syntax: 1-value syntax: border-radius: 1em — The single value represents all corners: 2-value syntax: border-radius: 1em 2em — The first value represents the top left and bottom right corner, the second the top right and bottom left ones: 3-value syntax: border-radius: 1em 2em 3em — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner: 4-value syntax: border-radius: 1em 2em 3em 4em — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left: If you want to be a pro at web development, then take a online web development course 6.Background properties The shorthand form consists of the longhand properties listed above plus background-attachment: scroll and, in CSS3, some additional properties. 7.Font properties This shorthand declaration is equivalent to the longhand declarations above, plus font-variant: normal, font-size-adjust: none (CSS2.0 / CSS3), and font-stretch: normal (CSS3). 8.Border properties With borders, you can combine width, colour, and style into a single declaration. Consider the CSS code below: 1.When a single value is given, the same margin is applied to all four sides. 2.The first margin applies to the top and bottom, the second to the left and right, and so on when two values are provided. 3.The first margin applies to the top, the second to the left and right, and the third to the bottom when three values are provided. 4.The margins are applied to the top, right, bottom, and left in that order when four values are supplied (clockwise). Read more: What is CSS and its use?
0 Comments
Leave a Reply. |
|