Kurssisisältö

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

Aligning Items Vertically

The align-items property governs the vertical arrangement of flex items. Its default value is stretch.

css

Let's run the following examples to get where do we need it.

stretch

It means that we extend items to the entire length of the cross axis.

index.html

index.css

center

Items are in the center of the cross axis.

index.html

index.css

flex-start

All items start at the beginning of the cross axis.

index.html

index.css

flex-end

All items are in the end of the cross axis (in the end of the parent flex container).

index.html

index.css

baseline

All flex items are aligned based on their text content baseline.

index.html

index.css

1. What does the `align-items` property do?

2. Which of the following values can be used with the `align-items` property?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 4. Luku 4

Kysy tekoälyä

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Kurssisisältö

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