In: Computer Science
Using this code snippet: Answer the following questions
<div id=”mainContent”>
<p>I’m a cool paragraph
<span>
that has some
<span class=”coolClass”>yellow</span>
text
</span>
</p>
<p class=”blue”>
I’m just some blue text
</p>
<p class=”coolClass”> I should be un-touched text </p>
</div>
<div id=”footer”>
<p class=”tagLine”>Copyright © 2014</p>
</div>
1. Write the CSS rule (selector/declaration) to change all elements with a class of ‘blue’ to have blue foreground text. Hint: color
2. Write the CSS rule to change just the span with a class of “coolClass” to have a text color of yellow.
3. Write the CSS rule to change the element with and id of ‘footer’ to have a font size of 12px. Hint: font-size
4. Write the CSS needed to make all paragraphs in the document have a font weight of bold. Hint: font-weight
Please find the answer below.
SOURCE CODE:
*Please follow the comments to better understand the code.
**Please look at the Screenshot below and use this code to copy-paste.
***The code in the below screenshot is neatly indented for better understanding.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- Write the styles here -->
<style>
/* 1.Blue class should have blue color */
.”blue” {
color: blue;
}
/* 2. coolClass of span text yellow color */
span.”coolClass” {
color: yellow;
}
/* 3. footer id should have font size 12px */
#”footer” {
font-size: 12px;
}
/* 4. all <p> paragraphs should have a bold font weight */
p {
font-weight: bold;
}
</style>
</head>
<body>
<div id="”mainContent”">
<p>
I’m a cool paragraph
<span>
that has some
<span class="”coolClass”">yellow</span>
text
</span>
</p>
<p class="”blue”">
I’m just some blue text
</p>
<p class="”coolClass”">I should be un-touched text</p>
</div>
<div id="”footer”">
<p class="”tagLine”">Copyright © 2014</p>
</div>
</body>
</html>
===========
OUTPUT:
CSS CODE: