Course Content

CSS Fundamentals

1. Introduction to CSS

What is CSS?Connecting HTML and CSS Selectors for Styling HTML Elements Challenge: Add Your First Styles Challenge: Add The Styles using the Class Name User Action Pseudo-Classes Challenge: User Action Pseudo-Classes Text Colors Effective Work with CSS Challenge: Variables in CSS

2. Text Styles

Text Styling Text Formatting Challenge: Text Formatting Adding Custom Fonts to the Web Page Font Properties Challenge: Fonts

3. Box Model and Element Spacing

Box Model Box Sizing Adding Space to Elements Challenge: Box-Sizing Structural and Functional Pseudo-Classes Challenge: Structural Pseudo-Classes Element Types Working with Block-Level Elements Working with Inline Elements Challenge: Predict the Page Layout

4. Flexbox

What is the Flexbox? Flex Direction Justifying Content Horizontally Aligning Items Vertically Flex Item Properties Challenge: Flexbox Challenge: Work with Flexbox

5. Decorative Effects

Background Color Background Image Working with Images Decorative Pseudo-Elements Shadows Challenge: Decorative Effects Further Steps

Justifying Content Horizontally

The justify-content property is instrumental in determining the position of flex items along the main axis. Its default value is flex-start.

css

Let's consider each case on practice. We will play with the list of cards.

flex-start

Default value, which makes all the items be at the start of the main axis.

index.html

index.css

flex-end

All items are at the axis end.

index.html

index.css

center

All items are in the center.

index.html

index.css

space-around

It distributes all the items evenly along the main axis with a bit of space left at either end.

index.html

index.css

space-between

It is very similar to space-around except that it doesn't leave any space at the axis on both ends.

index.html

index.css

Everything was clear?

Thanks for your feedback!

Section 4. Chapter 3

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Course Content

CSS Fundamentals

1. Introduction to CSS

2. Text Styles

Text Styling Text Formatting Challenge: Text Formatting Adding Custom Fonts to the Web Page Font Properties Challenge: Fonts

3. Box Model and Element Spacing

4. Flexbox

What is the Flexbox? Flex Direction Justifying Content Horizontally Aligning Items Vertically Flex Item Properties Challenge: Flexbox Challenge: Work with Flexbox

5. Decorative Effects

Background Color Background Image Working with Images Decorative Pseudo-Elements Shadows Challenge: Decorative Effects Further Steps

Justifying Content Horizontally

The justify-content property is instrumental in determining the position of flex items along the main axis. Its default value is flex-start.

css

Let's consider each case on practice. We will play with the list of cards.

flex-start

Default value, which makes all the items be at the start of the main axis.

index.html

index.css

flex-end

All items are at the axis end.

index.html

index.css

center

All items are in the center.

index.html

index.css

space-around

It distributes all the items evenly along the main axis with a bit of space left at either end.

index.html

index.css

space-between

It is very similar to space-around except that it doesn't leave any space at the axis on both ends.

index.html

index.css

Everything was clear?

Thanks for your feedback!

Section 4. Chapter 3