COLORING PARA USING FIRST-CHILD
EXERCISE ON CSS
EXERCISE II
THIS IS HWO YOU CAN COLOR ONLY THE FIRST PARAGRAPH IN A DIV CONTANING MANY PARAGRAPHS.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div:nth-child(1)>p:nth-child(1){
background-color: yellow;
color: red;
}
div>p{
background-color: blue;
color: white;
}
</style>
<body>
<!-- Write html and css code to style a paragraph inside a div which contains 5 other paragraphs. The first paragraph must have background color yellow and text color red. The other paragraphs must have background color blue and text color white. The HMTL is written below for your reference. Do not change this html -->
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita explicabo consectetur dicta fuga ea at vitae suscipit, repellendus illum deleniti laboriosam ipsa distinctio.</p>
<p>I am another para</p>
<p>I am also another para</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita explicabo consectetur dicta fuga ea at vitae suscipit, repellendus illum deleniti laboriosam ipsa distinctio.</p>
<p>I am another para</p>
<p>I am also another para</p>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div:nth-child(1)>p:nth-child(1){
background-color: yellow;
color: red;
}
div>p{
background-color: blue;
color: white;
}
</style>
<body>
<!-- Write html and css code to style a paragraph inside a div which contains 5 other paragraphs. The first paragraph must have background color yellow and text color red. The other paragraphs must have background color blue and text color white. The HMTL is written below for your reference. Do not change this html -->
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita explicabo consectetur dicta fuga ea at vitae suscipit, repellendus illum deleniti laboriosam ipsa distinctio.</p>
<p>I am another para</p>
<p>I am also another para</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita explicabo consectetur dicta fuga ea at vitae suscipit, repellendus illum deleniti laboriosam ipsa distinctio.</p>
<p>I am another para</p>
<p>I am also another para</p>
</div>
</body>
</html>
Comments
Post a Comment