My Blog

The font-size property defines the font size of the text. Font size can be defined by the following ways: Absolute font size includes the following values: Relative font size includes the following values: Lengths can be relative lengths (em, ex, px) and absolute lengths (in, cm, mm, pt, pc). Percentages specify an absolute font size relative to…

The font-kerning property controls the use of the kerning information stored in a font. Kerning defines the spacing of the letters. Kerning specifies how the letters are spaced. It makes character spacing more pleasant to the eye and easier to read. Initial Value auto Applies to All elements. It also applies to ::first-letter and ::first-line. Inherited Yes. Animatable No. Version…

The @font-feature-values at-rule sets a named value for certain font feature of a font family. It can be used at the top level of CSS or in a CSS conditional-group at-rule. The @font-feature-values at-rule can contain any of the following feature values: Besides a character’s default glyph there can also be other alternate glyphs (e.g., swash glyphs, stylistic alternates) for…

The font-feature-settings property controls over advanced typographic features in OpenType fonts. The property has two values: normal and <feature-tag-value>. “Normal” is the default value. <feature-tag-value> value is a positive integer. The two keywords “on” and “off” are synonyms for “1” and “0” respectively. If no value is specified, the initial value will be “1”. For adding multiple…

The font-family property allows creating a prioritized list of font family names and/or generic family names for the selected element. We use commas to separate the values and show them as alternatives. The browser will select the first font to use if it is available. However, it may be unavailable in some cases like the user’s computer…

The font-display property defines how font files are downloaded and displayed by the browser. This property has the following values: The typography was used to be limited to local fonts where the only available fonts were the ones called “web-safe”. Then came @font-face rule allowing to upload font files to a server and write a set of rules naming…

The CSS @font-face is a rule which allows web designers to define online fonts to display text on their website. So, web designers won’t need to use “web-safe fonts” anymore. We must first define a name for the font (like myFirstFont) in the new @font-face rule and then point to the font file. Each browser has its own format.…

The font property is a shorthand property for the following properties: You can set all the properties with the following order: 1. font-style, 2. font-variant, 3. font-weight, 4. font-size / line-height, 5. font-family. The line-height property is used for setting the space between lines. It is required to define font-size and font-family properties’ values. If one of the values is missed, its default value is used. All the…

The float property defines in which side of the container the elements should be placed, thus allowing the text or other elements to wrap around it. The property has three values: none, left and right. This property is directly related to the clear property which defines whether an element should be next to floating elements or it should be…

The flex-wrap property defines whether flexible items should wrap or not. In other words, it defines whether the items are forced into a single line or the items can flow on multiple lines. If there are no flexible items, the flex-wrap property won’t have any effect. The flex-wrap property is one of the CSS3 properties. Initial Value nowrap Applies to Flex containers.…