Course Content

CSS Fundamentals

1. Introduction to CSS

What is CSS?Connecting HTML and CSS Selectors for Styling HTML Elements Challenge: Select an Element to Add Styles User Action Pseudo-Classes Text Colors Effective Work with CSS Challenge: User Action Pseudo-Classes and Variables

2. Text styles

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

3. Box Model and Element Spacing

Box Model Box Sizing Add Space to Elements Challenge: Box-Sizing Structural and Functional Pseudo-Classes Challenge: Structural Pseudo-Classes Element Types Work with Block-Level Elements Work with Inline Elements Challenge: Inline VS Block-Level

4. Flexbox

What is the Flexbox? Flex Direction Justify Content Horizontally Align Items Vertically Flex Item Properties Challenge: Flexbox

5. Decorative Effects

Background Color Background Image Work with Images Decorative Pseudo-Elements Shadows Challenge: Decorative Effects

CSS Fundamentals

Challenge: User Action Pseudo-Classes and Variables

Task 1

We have the company website. In the header section of the web page, there is some contact information. The task is to add the color change on hovering the links with the mouse in the header section.

Steps:

select all a elements with the header-link class name;
set the appropriate pseudo-class;
apply the color property with the blue value;

Hint

1. To select an element by its class name, we need to use . and its class name;

2. To react on mouse cursor hover, we need to use :hover pseudo-class;

Solution

Task 2

We have a deal with the blog web page. The task is:

create a variable and assign it to the #9e6f21 color;
apply this variable to all p elements that have a description class name as a value of the color property;

Steps:

Define the color in the :root block.
- create --description-color variable and assign it to the value #9e6f21
Apply the --description-color variable to <p> elements with class .description.

Hint

1. To create a variable, we need — and give it a descriptive name, then we put : and give it a value;

2. Variable value must be #9e6f21;

3. To use a variable, we use var() and in the brackets specify the variable name;

Solution

Everything was clear?

Section 1. Chapter 8