QUIZ
Class Names
Your Name:
1Set the text color to red, for <p> all elements.
{
: red;
}
</style>
2Set the text color to red, for the element with class="colortext".
{
: red;
}
</style>
<h1>This is a heading</h1>
<p class="colortext">This is a paragraph</p>
<p class="colortext">This is a paragraph</p>
</body>
3Set the page's background color to red.
{
: red;
}
</style>
<h1>This is a heading</h1>
<p class="colortext">This is a paragraph</p>
<p class="colortext">This is a paragraph</p>
</body>
4Set the page's background color to red, by using an inline style.
<h1>This is a heading</h1>
<p class="colortext">This is a paragraph</p>
<p class="colortext">This is a paragraph</p>
</body>
5Insert the missing parts to make the CSS code correct.
p
font-size 16px;
}
</style>
6Set the style of <h1> to "italic" text.
h1 {
: ;
}
</style>
<h1>This is a heading</h1>
<p class="colortext">This is a paragraph</p>
<p class="colortext">This is a paragraph</p>
</body>
7Please check CSS code. Which class name will make image fit to the boder of content? (Please write class name without dot)
Your answer:
8Please check CSS code. Which class name will change background color? (Please write class name without dot)
Your answer:
See the Pen Untitled by Mr. M (@Mr-M-the-builder) on CodePen.
9Please check CSS code. Which class name will change size and make title this sentence: "Latest News: Important things to happen"? (Please write class name without dot)
Your answer:
See the Pen Untitled by Mr. M (@Mr-M-the-builder) on CodePen.
10Please put class names from CSS properly
See the Pen Untitled by Mr. M (@Mr-M-the-builder) on CodePen.
<img class="" src="https://www.ecosperity.sg/en/ideas/new-nature-economy-asias-next-wave/_jcr_content/root/container/image.coreimg.png/1632836511739/eco-bridge-cropped.png" alt="image 2">
<h1 class="">Article Title</h1>
<h2 class="">12 Dec 2023 / 23:12</h2>
<p class=""><span class="">L</span>orem ipsum dolor sit amet consectetur adipisicing elit. Ad pariatur, placeat aut neque provident quisquam laudantium modi eligendi voluptate rerum illo soluta deleniti sint ut facere quidem? Veniam, aspernatur nulla?</p>
<button class="">View Article</button>
</div>
| Name | Score | Duration |
|---|