Please help me solve these using CSS code. 14. Adriana wants the first line in t
ID: 3871283 • Letter: P
Question
Please help me solve these using CSS code.
14. Adriana wants the first line in the tour_summary article to appear in small capital letters. Use the first-of-type pseudo-class and the first-line pseudo-element to create a style rule that displays the first line of the first paragraph within the tour_summary article at a font size of 1.2em and in small caps.
15. The tour itinerary is displayed within an aside element with the ID tour_itinerary. Go to the Aside Styles section and for every h1 element nested within the tour_itinerary aside element, create a style rule that sets the font size to 1.2em.
16. For every h2 element within the tour_itinerary aside element, set the font size to 0.9em.
17. Set the font size of paragraphs within the tour_itinerary aside element to 0.8em. 18. Adriana wants the text color of each day’s schedule to alternate between gray and blue. Create the following style rules: a. For odd-numbered h2 headings and paragraphs that set the font color to rgb(79, 91, 40). (Hint: Use the nth-of-type(odd) pseudo-class.) b. For even-numbered h2 headings and paragraphs that set the font color to rgb(81, 95, 175). (Hint: Use the nth-of-type(even) pseudo-class.)
Explanation / Answer
article.html :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size:1.2em;
}
h2 {
font-size:0.9em;
}
.odd {
font-size:0.8em;
color: rgb(79, 91, 40);
}
.even {
font-size:0.8em;
color: rgb(81, 95, 175);
}
.asidein {
font-size:0.8em;
}
p.small::first-line {
font-size:1.2em;
}
</style>
</head>
<body>
<p class="small">Adriana wants the first line in the tour_summary article to appear in small capital letters. Use the first-of-type pseudo-class and the first-line pseudo-element to create a style rule that displays the first line of the first paragraph within the tour_summary article at a font size of 1.2em and in small caps..</p>
<aside>
<h1>The Tour Itinerary</h1>
<p>
The tour itinerary is displayed within an aside element with the ID tour_itinerary. Go to the Aside Styles section and for every h1 element nested within the tour_itinerary aside element, create a style rule that sets the font size to 1.2em.</p>
<h2 class="odd">Day-1</h2>
<p class="asidein">Set the font size of paragraphs within the tour_itinerary aside element to 0.8em. </p>
<h2 class="even">Day-2</h2>
<p class="asidein">Set the font size of paragraphs within the tour_itinerary aside element to 0.8em. </p>
<h2 class="odd">Day-3</h2>
<p class="asidein">Set the font size of paragraphs within the tour_itinerary aside element to 0.8em. </p>
<h2 class="even">Day-4</h2>
<p class="asidein">Set the font size of paragraphs within the tour_itinerary aside element to 0.8em. </p>
</aside>
</body>
</html>