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?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Großartig!
Completion Rate verbessert auf 2.56Understanding and Using Font Properties
Swipe um das Menü anzuzeigen
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?
Danke für Ihr Feedback!
