The background color of a website plays a crucial role in setting the tone and atmosphere of the site. It's one of the primary visual elements that users will see when they visit your site, and it can greatly impact the overall look and feel of the website.

background-color property

We can set background color for an element with help of this porperty. The value can be in any format: hex, rgb, rgba or reserved word.

index.html

index.css

index.js

static vs gradient color

Static color refers to a single color value that is applied uniformly to an element, such as red or #0000FF . On the other hand, gradient color involves blending two or more colors together to create a smooth transition between them.

index.html

index.css

index.js

With gradient color, we can create more visually attractive and dynamic designs than with static color. Let's consider different ways to declare gradients.

linear gradient

To set the linear gradient background color we use:

index.html

index.css

index.js

Also, we can specify the color percentage in the gradient color.

index.html

index.css

index.js

solid linear gradient

We get striped background color if we specify the same percentage for adjacent colors. Let's run the example to get what the difference is.

index.html

index.css

index.js

radial gradient

Radial gradient works the same way as linear. The only difference is that color starts at the center and spreads outwards.

index.html

index.css

index.js

1. What is the main difference between static color and gradient color in CSS?

2. What is the difference between linear gradient and radial gradient in CSS?

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

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

Зміст курсу

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

Background Color

background-color property

We can set background color for an element with help of this porperty. The value can be in any format: hex, rgb, rgba or reserved word.

index.html

index.css

index.js

static vs gradient color

index.html

index.css

index.js

With gradient color, we can create more visually attractive and dynamic designs than with static color. Let's consider different ways to declare gradients.

linear gradient

To set the linear gradient background color we use:

index.html

index.css

index.js

Also, we can specify the color percentage in the gradient color.

index.html

index.css

index.js

solid linear gradient

We get striped background color if we specify the same percentage for adjacent colors. Let's run the example to get what the difference is.

index.html

index.css

index.js

radial gradient

Radial gradient works the same way as linear. The only difference is that color starts at the center and spreads outwards.

index.html

index.css

index.js

1. What is the main difference between static color and gradient color in CSS?

2. What is the difference between linear gradient and radial gradient in CSS?

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

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