Course Content
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
:rootblock:- Create a variable named
--description-colorand assign it the value#9e6f21.
- Create a variable named
- Apply the
--description-colorvariable as a value of thecolorproperty 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
#9e6f21to the variable. - Employ
var(), and within the brackets, specify the variable name to use the variable as a property value.
index.html
index.css
Everything was clear?
Thanks for your feedback!
Section 1. Chapter 10
