Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Challenge: Variables in CSS | Introduction to CSS
CSS Fundamentals

book
Challenge: Variables in CSS

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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>
<h1>Blog</h1>
<nav>
<ul>
<li><a class="link" href="#">Home</a></li>
<li><a class="link" href="#">About</a></li>
<li><a class="link" href="#">Contact</a></li>
</ul>
</nav>
</header>

<main>
<article>
<h2 class="title">First Blog Post</h2>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit
amet augue libero. Nam consectetur lectus a dolor bibendum, non
euismod nulla ullamcorper.
</p>
</article>

<article>
<h2 class="title">Second Blog Post</h2>
<p class="description">
Curabitur dictum pharetra nisl vel dapibus. Duis et purus vel tellus
sodales congue. Nunc gravida augue vel ex luctus, eget vestibulum nisl
molestie.
</p>
</article>
</main>
  • 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>
<h1>Blog</h1>
<nav>
<ul>
<li><a class="link" href="#">Home</a></li>
<li><a class="link" href="#">About</a></li>
<li><a class="link" href="#">Contact</a></li>
</ul>
</nav>
</header>

<main>
<article>
<h2 class="title">First Blog Post</h2>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit
amet augue libero. Nam consectetur lectus a dolor bibendum, non
euismod nulla ullamcorper.
</p>
</article>

<article>
<h2 class="title">Second Blog Post</h2>
<p class="description">
Curabitur dictum pharetra nisl vel dapibus. Duis et purus vel tellus
sodales congue. Nunc gravida augue vel ex luctus, eget vestibulum nisl
molestie.
</p>
</article>
</main>

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 1. Capítulo 10

Pergunte à IA

expand
ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

some-alt