Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Challenge | Selectors and Cascade
Introduction to CSS Part I
course content

Kursinnhold

Introduction to CSS Part I

Introduction to CSS Part I

1. Basic Introduction
2. Selectors and Cascade
3. Box Model

book
Challenge

Note

You can write the code in the styles.css file of the following sandbox. To see the rendered page, drag it from the right edge of a sandbox window.

Task

This challenge will review the selectors and cascade concepts we learned in the section. The task is to complete the following steps :

  1. Using a list of selectors, change the text alignment to center in both <h1> and <h2> .

  2. In the <div> with class "welcome" , change the background color to #f6f2f2 .

  3. Set the bottom margin of a "welcome" <div> to 50px .

  4. Set the left padding to 30px for the paragraphs that are direct children of the "welcome" class .

  5. Change the text color of a heading inside a "welcome" class to #800000 .

  6. For item with id="important" set the font size to 20px .

  7. Using the adjacent sibling selector, set the font style of the paragraph adjacent to the #important item to italic.

Here is the result you should get. If you are having problems, you can drag the code part with a solution from the left edge of a sandbox window

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 8

Spør AI

expand
ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

course content

Kursinnhold

Introduction to CSS Part I

Introduction to CSS Part I

1. Basic Introduction
2. Selectors and Cascade
3. Box Model

book
Challenge

Note

You can write the code in the styles.css file of the following sandbox. To see the rendered page, drag it from the right edge of a sandbox window.

Task

This challenge will review the selectors and cascade concepts we learned in the section. The task is to complete the following steps :

  1. Using a list of selectors, change the text alignment to center in both <h1> and <h2> .

  2. In the <div> with class "welcome" , change the background color to #f6f2f2 .

  3. Set the bottom margin of a "welcome" <div> to 50px .

  4. Set the left padding to 30px for the paragraphs that are direct children of the "welcome" class .

  5. Change the text color of a heading inside a "welcome" class to #800000 .

  6. For item with id="important" set the font size to 20px .

  7. Using the adjacent sibling selector, set the font style of the paragraph adjacent to the #important item to italic.

Here is the result you should get. If you are having problems, you can drag the code part with a solution from the left edge of a sandbox window

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 8
Vi beklager at noe gikk galt. Hva skjedde?
some-alt