CIS 371

CSS

Winter 2023

(This assignment originally designed by Prof. Engelsma.)

Objective

Provide practice using CSS

Instructions

Craft CSS code for the following scenarios. You must craft your CSS by hand Do not use any third party CSS or JavaScript libraries in your solutions. Avoid duplicating CSS rules when possible. Style the scenarios using CSS only. Don't modify the HTML. You may use any development environment of your choice. One option is to use https://jsfiddle.net.
Problem 1

HTML Source:

<h1> Example 1 </h1>
<div class="important">
<p> <span class="bigtext">C</span>urabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </p>
</div>
<p id="signature">Mad Tertulous</p>

Specifications:

Problem 2

HTML Source:

<p> Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. </p>
<div class="fancy_quote">Posuere erat a ante venenatis dapibus! onec ullamcorper nulla non metus auctor</div>

<p> Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>

Specifications:

Problem 3

HTML Source:

<div class="redbox"> Get ready!
</div>
<div class="yellowbox">
Get set! </div>
<div class="greenbox"> Go!!
</div>

Specifications:

Problem 4

HTML Source:

<div id='states'>
<p class='listHeader'>States:</p>
<ul>
<li>Michigan </li>
<li>Indiana</li>
<li>Illinois</li>
</ul>

<ol>
<li>California</li>
<li>Alaska</li>
<li>Texas</li>
</ol>

</div>


<div id='cities'>
<p class='listHeader'>Cities:</p>
<ul>
<li>Detroit</li>
<li>Muncie</li>
<li>Chicago</li>
</ul>
</div>

Specifications:

Problem 4b
Make the last element on each list red (without touching the HTML). Your first attempt may turn only the last numbered state red. Why? (Be sure to take time to think about the "why". It is this type of unexpected behavior that I want to be sure you have the tools to handle when you finish this course.)
Problem 5

HTML Source:

<p id="topleft"> I am top left </p>
<p id="bottomleft"> I am bottom left </p> <p id="topright"> I am top right </p>
<p id="bottomright"> I am bottom right </p> <div class="centered_green_box">

<p class="centered"> Centered </p> </div>

Specifications:


Updated Wednesday, 25 January 2023, 1:09 PM

W3c Validation