CSS Fundamentals

CSS Fundamentals

0%

1. Introduction to CSS

Basic CSS concepts and rules to add styles to the web page.

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

Effective Work with CSS

Challenge: Variables in CSS

2. Text Styles

Set of CSS properties that are used to style the text content of HTML elements.

Text Formatting

Challenge: Text Formatting

Adding Custom Fonts to the Web Page

Font Properties

Challenge: Fonts

3. Box Model and Element Spacing

Concept of arranging elements according to the box model, which describes the layout and spacing of all elements.

Adding Space to Elements

Challenge: Box-Sizing

Structural and Functional Pseudo-Classes

Challenge: Structural Pseudo-Classes

Working with Block-Level Elements

Working with Inline Elements

Challenge: Predict the Page Layout

4. Flexbox

Method of arranging the set of elements in rows and columns.

What is the Flexbox?

Justifying Content Horizontally

Aligning Items Vertically

Flex Item Properties

Challenge: Flexbox

Challenge: Work with Flexbox

5. Decorative Effects

Create visually stunning and interactive web designs by using advanced CSS techniques for adding decorative elements.

Background Color

Background Image

Working with Images

Decorative Pseudo-Elements

Challenge: Decorative Effects

Contenido del Curso

CSS Fundamentals

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

Challenge: Decorative Effects

Task

Let's practice and enhance the visual appeal of the webpage. The task includes:

Add a shadow to the div element with the class name card. The specified shadow values are rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Add a background image to the div element with the class name card. The image link is provided: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Center the background image within the card.

index

index

index

To add a shadow to an element, utilize the box-shadow property with the specified value. In this case, the value is rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
For setting an image as a background using the background-image property, employ the url("correct path") syntax. Inside the brackets, open quotes and specify the path to the image. In this task, the correct path is provided: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
To determine the position of the background image, use the background-position property. In this scenario, set the value to center for the property.

index

index

index

¿Todo estuvo claro?

Sección 5. Capítulo 6

some-alt