Understanding and Using Font Properties
Here are the most common CSS properties used to style fonts:
selector {
font-family: 'Montserrat' | 'Oswald' | 'Lato' |...; /* any font family */
font-size: 12px | 0.5em | 0.8rem |...; /* it can be any value in px/em/rem units */
font-weight: 400 | 500 | 700 | 900 |...; /* value 100 - 900 */
font-style: normal | italic | oblique; /* only these values available */
}
All examples use the same text to show how these properties change appearance.
font-family
Defines the typeface used to display text. You can set one font or a list of fallback fonts separated by commas.
font-size
Controls the size of text. px: fixed size. em/rem: size relative to the parent or root element.
font-weight
Controls the thickness of text. Numeric values: 100–900. Keywords: normal, bold, lighter.
font-style
Specifies the style of the text: normal, italic, or oblique.
Pseudo-class ::first-letter
::first-letter targets the first letter of an element (typically a paragraph or heading), allowing decorative or stylized effects.
selector::first-letter {
/* some styles */
}
Let's run the next example to see how it works.
index.html
styles.css
font-family sets the font and fallbacks.
font-size controls text size in px, em, or rem.
font-weight adjusts thickness using numbers or keywords.
font-style changes the font style.
::first-letter styles the first letter of a text block.
1. Which property determines the thickness of the font?
2. What is the default value for the font-style property in CSS?
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Genial!
Completion tasa mejorada a 2.56Understanding and Using Font Properties
Desliza para mostrar el menú
Here are the most common CSS properties used to style fonts:
selector {
font-family: 'Montserrat' | 'Oswald' | 'Lato' |...; /* any font family */
font-size: 12px | 0.5em | 0.8rem |...; /* it can be any value in px/em/rem units */
font-weight: 400 | 500 | 700 | 900 |...; /* value 100 - 900 */
font-style: normal | italic | oblique; /* only these values available */
}
All examples use the same text to show how these properties change appearance.
font-family
Defines the typeface used to display text. You can set one font or a list of fallback fonts separated by commas.
font-size
Controls the size of text. px: fixed size. em/rem: size relative to the parent or root element.
font-weight
Controls the thickness of text. Numeric values: 100–900. Keywords: normal, bold, lighter.
font-style
Specifies the style of the text: normal, italic, or oblique.
Pseudo-class ::first-letter
::first-letter targets the first letter of an element (typically a paragraph or heading), allowing decorative or stylized effects.
selector::first-letter {
/* some styles */
}
Let's run the next example to see how it works.
index.html
styles.css
font-family sets the font and fallbacks.
font-size controls text size in px, em, or rem.
font-weight adjusts thickness using numbers or keywords.
font-style changes the font style.
::first-letter styles the first letter of a text block.
1. Which property determines the thickness of the font?
2. What is the default value for the font-style property in CSS?
¡Gracias por tus comentarios!
