Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Font Properties | Text Styles
CSS Fundamentals
course content

Course Content

CSS Fundamentals

CSS Fundamentals

1. Introduction to CSS
What is CSS?Connecting HTML and CSSSelectors for Styling HTML ElementsChallenge: Add Your First StylesChallenge: Add The Styles using the Class NameUser Action Pseudo-ClassesChallenge: User Action Pseudo-ClassesText ColorsEffective Work with CSSChallenge: Variables in CSS
2. Text Styles
Text StylingText FormattingChallenge: Text FormattingAdding Custom Fonts to the Web PageFont PropertiesChallenge: Fonts
3. Box Model and Element Spacing
Box ModelBox SizingAdding Space to ElementsChallenge: Box-SizingStructural and Functional Pseudo-ClassesChallenge: Structural Pseudo-ClassesElement TypesWorking with Block-Level ElementsWorking with Inline ElementsChallenge: Predict the Page Layout
4. Flexbox
What is the Flexbox? Flex DirectionJustifying Content HorizontallyAligning Items VerticallyFlex Item PropertiesChallenge: FlexboxChallenge: Work with Flexbox
5. Decorative Effects
Background ColorBackground ImageWorking with ImagesDecorative Pseudo-ElementsShadowsChallenge: Decorative EffectsFurther Steps

bookFont Properties

Let's consider the most common font-related properties.

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.

Let's run the next example to see how it works.

html

index

css

index

js

index

copy
1. Which property determines the thickness of the font?
2. What is the default value for the `font-style` property in CSS?
Which property determines the thickness of the font?

Which property determines the thickness of the font?

Select the correct answer

What is the default value for the `font-style` property in CSS?

What is the default value for the font-style property in CSS?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 2. Chapter 5
some-alt