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?
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Fantastiskt!
Completion betyg förbättrat till 2.56Understanding and Using Font Properties
Svep för att visa menyn
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?
Tack för dina kommentarer!
