Contenido del Curso
CSS Fundamentals
CSS Fundamentals
1. Getting Started with CSS
What is CSS and Why is it Important?Linking CSS to an HTML DocumentMastering CSS Selectors for Styling HTML ElementsChallenge: Apply Your First CSS StylesChallenge: Style with Class SelectorsEnhancing Styles with User Action Pseudo-ClassesChallenge: Apply User Action Pseudo-ClassesChanging Text Colors in CSSOptimizing Workflow for Efficient CSS CodingChallenge: Use Variables for Better CSS Management
3. The CSS Box Model & Spacing Elements
What is the CSS Box Model?Understanding Box Sizing in CSSAdding Space with Margins and PaddingChallenge: Apply Box Sizing to ElementsUsing Structural and Functional Pseudo-ClassesChallenge: Practice Structural Pseudo-ClassesUnderstanding Block, Inline, and Inline-Block ElementsWorking with Block-Level ElementsWorking with Inline ElementsChallenge: Predict Page Layout with Different Element Types
Challenge: Use Variables for Better CSS Management
Task
We are tasked with styling a blog web page. The objective is as follows:
- Define the color in the
:root
block:- Create a variable named
--description-color
and assign it the value#9e6f21
.
- Create a variable named
- Apply the
--description-color
variable as a value of thecolor
property to<p>
elements with the class.description
.
index.html
index.css
- 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.
index.html
index.css
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 1. Capítulo 10