Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Challenge: Apply Your First CSS Styles | Getting Started with CSS
CSS Fundamentals
course content

Kursusindhold

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
2. Styling Text in CSS
Mastering Text Styling in CSSText Formatting Techniques for ReadabilityChallenge: Format Text with CSSAdding Custom Fonts to a Web PageUnderstanding and Using Font PropertiesChallenge: Explore Font Properties
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
4. Mastering Flexbox for Layouts
What is Flexbox and Why Use It?Setting the Flex Direction for LayoutsJustifying Content Horizontally in FlexboxAligning Items Vertically in FlexboxUnderstanding Flex Item PropertiesChallenge: Apply Flexbox ConceptsChallenge: Build a Layout with Flexbox
5. Adding Decorative Effects with CSS
Using Background Colors for DesignApplying Background Images to ElementsWorking with Images in CSSCreating Effects with Decorative Pseudo-ElementsAdding Shadows for Depth and StyleChallenge: Implement Decorative Effects in CSSFurther Steps

book
Challenge: Apply Your First CSS Styles

Note

All challenges include a code sample with index.html and index.css files. Since the course is focused on learning CSS, please address the challenges in the index.css file. After completing a challenge, click the "Run Code" button to view the live page and ensure the challenge was solved correctly.

Additionally, each challenge provides "Hint" and "Solution" buttons. Clicking the "Hint" button will display hints for the current task, while the "Solution" button will reveal the code sample with the correct application of CSS.

Task

We have a website with two sections, each containing a heading (h2 element) and a description (p element).

Select all paragraphs (p elements) on the website and apply the color property with the value orange.

index.html

index.html

index.css

index.css

copy

Use the tag selector p to select all paragraphs.

index.html

index.html

index.css

index.css

copy

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 1. Kapitel 4

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

course content

Kursusindhold

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
2. Styling Text in CSS
Mastering Text Styling in CSSText Formatting Techniques for ReadabilityChallenge: Format Text with CSSAdding Custom Fonts to a Web PageUnderstanding and Using Font PropertiesChallenge: Explore Font Properties
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
4. Mastering Flexbox for Layouts
What is Flexbox and Why Use It?Setting the Flex Direction for LayoutsJustifying Content Horizontally in FlexboxAligning Items Vertically in FlexboxUnderstanding Flex Item PropertiesChallenge: Apply Flexbox ConceptsChallenge: Build a Layout with Flexbox
5. Adding Decorative Effects with CSS
Using Background Colors for DesignApplying Background Images to ElementsWorking with Images in CSSCreating Effects with Decorative Pseudo-ElementsAdding Shadows for Depth and StyleChallenge: Implement Decorative Effects in CSSFurther Steps

book
Challenge: Apply Your First CSS Styles

Note

All challenges include a code sample with index.html and index.css files. Since the course is focused on learning CSS, please address the challenges in the index.css file. After completing a challenge, click the "Run Code" button to view the live page and ensure the challenge was solved correctly.

Additionally, each challenge provides "Hint" and "Solution" buttons. Clicking the "Hint" button will display hints for the current task, while the "Solution" button will reveal the code sample with the correct application of CSS.

Task

We have a website with two sections, each containing a heading (h2 element) and a description (p element).

Select all paragraphs (p elements) on the website and apply the color property with the value orange.

index.html

index.html

index.css

index.css

copy

Use the tag selector p to select all paragraphs.

index.html

index.html

index.css

index.css

copy

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 1. Kapitel 4
some-alt