course content

Course Content

CSS Fundamentals

1. Introduction to CSS

What is CSS?Connecting HTML and CSSSelectors for Styling HTML ElementsChallenge: Select an Element to Add StylesUser Action Pseudo-ClassesText ColorsEffective Work with CSSChallenge: User Action Pseudo-Classes and Variables

2. Text styles

Text StylingText FormattingChallenge: Text FormattingAdd Custom Fonts to the Web PageFont PropertiesChallenge: Fonts

3. Box Model and Element Spacing

Box ModelBox SizingAdd Space to ElementsChallenge: Box-SizingStructural and Functional Pseudo-ClassesChallenge: Structural Pseudo-ClassesElement TypesWork with Block-Level ElementsWork with Inline ElementsChallenge: Inline VS Block-Level

4. Flexbox

What is the Flexbox? Flex DirectionJustify Content HorizontallyAlign Items VerticallyFlex Item PropertiesChallenge: Flexbox

5. Decorative Effects

Background ColorBackground ImageWork with ImagesDecorative Pseudo-ElementsShadowsChallenge: Decorative Effects

CSS Fundamentals

Flex DirectionFlex Direction

The flex-direction property allows us to set the direction in which the flex items are arranged. By default, this property is set to row, resulting in a left-to-right layout in browsers that use English as the default language.

flex-direction

Let's consider the next website navigation as an example.

row

html

index.html

css

index.css

js

index.js

row-reverse

html

index.html

css

index.css

js

index.js

column

Pay attention to the width of the items. They cover the whole parent width.

html

index.html

css

index.css

js

index.js

column-reverse

html

index.html

css

index.css

js

index.js

question-icon

What does the flex-direction property do?

Select the correct answer

Everything was clear?

Section 4. Chapter 2