Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Challenge: Use Variables for Better CSS Management | Getting Started with CSS
CSS Fundamentals
course content

Contenido del Curso

CSS Fundamentals

CSS Fundamentals

1. Getting Started with CSS
2. Styling Text in CSS
3. The CSS Box Model & Spacing Elements
4. Mastering Flexbox for Layouts
5. Adding Decorative Effects with CSS

book
Challenge: Use Variables for Better CSS Management

Task

We are tasked with styling a blog web page. The objective is as follows:

  1. Define the color in the :root block:

    • Create a variable named --description-color and assign it the value #9e6f21.

  2. Apply the --description-color variable as a value of the color property to <p> elements with the class .description.

html

index.html

css

index.css

copy
  • Utilize -- followed by a descriptive name to create a variable, then set the : and assign it a value.

  • Assign the value #9e6f21 to the variable.

  • Employ var(), and within the brackets, specify the variable name to use the variable as a property value.

html

index.html

css

index.css

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 1. Capítulo 10

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

course content

Contenido del Curso

CSS Fundamentals

CSS Fundamentals

1. Getting Started with CSS
2. Styling Text in CSS
3. The CSS Box Model & Spacing Elements
4. Mastering Flexbox for Layouts
5. Adding Decorative Effects with CSS

book
Challenge: Use Variables for Better CSS Management

Task

We are tasked with styling a blog web page. The objective is as follows:

  1. Define the color in the :root block:

    • Create a variable named --description-color and assign it the value #9e6f21.

  2. Apply the --description-color variable as a value of the color property to <p> elements with the class .description.

html

index.html

css

index.css

copy
  • Utilize -- followed by a descriptive name to create a variable, then set the : and assign it a value.

  • Assign the value #9e6f21 to the variable.

  • Employ var(), and within the brackets, specify the variable name to use the variable as a property value.

html

index.html

css

index.css

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 1. Capítulo 10
some-alt