In: Computer Science
Look at the HTML below ( do NOT modify the HTML),
Outer paragraph, outer list, div with 2 inner paragraphs and one inner list ,
create a CSS which will:
Red , green,blue,red ( in that order)
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle98_d.css">
</head>
<body>
<p>
I'm a paragraph, what color am I ?
</p>
<ul>
<li id = "fix"> I'm a list item;what color am I? </li>
</ul>
<div class = "central1">
<p class ="above">
I'm a paragraph; what color am I?
</p>
<p>
I'm another paragraph, what color am I ?
</p>
<ol>
<li id = "fix1"> I'm another list item;what color am I? </li>
</ol>
</div>
</body>
</html>
In the following output:
if tag name is written like p or ul it will set the properties of all tags with the css. But later in the code if two tags are written together like div p which means paragraph inside a div tag so the css will overwrite from just p to more specific like div p tag and so on.
If div p:nth-child(2) is written it means inside the div tag the second paragraph
comma (,) between two elements is same as writing the same thing twice for two elements for e.g:
ul, p {
color: blue
}
is same as the below:
ul {
color: blue
}
p {
color: blue
}
.above is used for calling css elements of class name above
First case:
ul, p{
color: blue;
}
div ol {
color: pink;
}
.above {
color: green;
}
Output:
Second case:
p {
color:cyan;
}
.central1 {
color: red;
}
div p:nth-child(2) {
color: blue;
font-style: italic;
}
Output:
Third case:
p {
color:blue;
}
li {
color: red;
}
.above {
color: green;
}
Fourth case:
p {
color: red;
}
div p{
color: cyan;
}