Зміст курсу

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

CSS Fundamentals

Challenge: Add Your First Styles

Note
All challenges include a code sample with index.html and index.css files. Since the course is focused on learning CSS, please address the challenges in the index.css file. After completing a challenge, click the "Run Code" button to view the live page and ensure the challenge was solved correctly.
Additionally, each challenge provides "Hint" and "Solution" buttons. Clicking the "Hint" button will display hints for the current task, while the "Solution" button will reveal the code sample with the correct application of CSS.

Task

We have a website with two sections, each containing a heading (h2 element) and a description (p element). Your objective is as follows:

Select all paragraphs (p elements) on the website and apply the color property with the value orange.

index.html

index.css

index.js

Use the tag selector p to select all paragraphs.

index.html

index.css

index.js

Все було зрозуміло?

Секція 1. Розділ 4

Зміст курсу

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

CSS Fundamentals

Challenge: Add Your First Styles

Note
All challenges include a code sample with index.html and index.css files. Since the course is focused on learning CSS, please address the challenges in the index.css file. After completing a challenge, click the "Run Code" button to view the live page and ensure the challenge was solved correctly.
Additionally, each challenge provides "Hint" and "Solution" buttons. Clicking the "Hint" button will display hints for the current task, while the "Solution" button will reveal the code sample with the correct application of CSS.

Task

We have a website with two sections, each containing a heading (h2 element) and a description (p element). Your objective is as follows:

Select all paragraphs (p elements) on the website and apply the color property with the value orange.

index.html

index.css

index.js

Use the tag selector p to select all paragraphs.

index.html

index.css

index.js

Все було зрозуміло?

Секція 1. Розділ 4