Cursusinhoud
CSS Fundamentals
CSS Fundamentals
Font Properties
Let's consider the most common font-related properties.
css
Note
All examples will be demonstrated using the same text content to provide an opportunity to observe how the same text can be displayed differently.
font-family
The font-family
property defines the font family or families that will be used for displaying text content. It is possible to specify a single font family name or a list of multiple font family names separated by commas.
font-size
The font-size
property sets the font size for displaying text content. It can be a fixed size measured in px
or a relative size measured in em
or rem
units.
font-weight
The font-weight
property determines the weight or thickness of the font used to display text content. It can be specified as a numerical value (e.g., 300
, 500
, 700
, ...) or as a keyword (e.g., lighter
, normal
, or bold
).
font-style
The font-style
property specifies the style of the font to be used for text content. This can be normal
(the default value), italic
, or oblique
.
Pseudo-Class first-letter
The first-letter
pseudo-class selects and styles the first letter of a paragraph or heading. To use this pseudo-class, we need to put double ::
after a selector and add the keyword first-letter
.
css
Let's run the next example to see how it works.
index.html
index.css
1. Which property determines the thickness of the font?
2. What is the default value for the font-style
property in CSS?
Bedankt voor je feedback!