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

bookChallenge

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 30pxfor 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

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 8

Pergunte à IA

expand

Pergunte à IA

ChatGPT

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

Awesome!

Completion rate improved to 5.26

bookChallenge

Deslize para mostrar o menu

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 30pxfor 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

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 8
some-alt