Question

Given the following HTML code (You are not allowed to add additional id or class to the file test.html)

test.html

1. <h1>Down the Rabbit-Hole</h1>
2. <div class="bb" >    
3.    <p class="bb" >Alice was beginning to get very tired ...</p>
4.    <br/>
5.    <p> Alice </p>
6. </div>
7. <div id="aa">
8.    <p>Down, down, down. Would the fall never come to an end</p>
9.    <div> <p class="bb" >I wonder if I shall fall right …</p> </div>
10. </div>
11. <h1> Upcoming Event </h1>
12. <p> Excitng Event: 101 </p>
13. <p> A limited number of tickets area available. Email me. </p>

a) I want to style the text from line 7 to 10. Write the CSS code to achieve the goal so that the text from line 7 to 10 in red.

Write code here:

b) Write the CSS code to make all <p> tags of class bb in green. (I mean make line #3 #9 in green text)

Write code here:

c) Write the CSS code to make line #9 in red only.

Write code here:

d) Write the CSS code to make line#12 in red only.

Write code here:

Answer 1

a) Line 7 to 10 are in a div with class aa. So, style the class aa so that its color is red.

<style>
       #aa{
           color: red;
       }
</style>

Output;

b) to make all <p> tags of class bb in green use the below code:

Here, p.bb indicates paragraph tags of class bb

<style>
       p.bb{
           color: green;
       }
</style>

Output:

C) CSS code to make line #9 in red only.

Add inlince CSS to line #9 so that it is in red.

<div > <p class="bb" style="color: red">I wonder if I shall fall right …</p> </div>

Output:

d) CSS code to make line#12 in red only.

Add inline CSS to line #12 to make it red in color.

<p style="color: red"> Excitng Event: 101 </p>

Output: