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>
<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:
h1is centered with text color purple.- The element marked with
id='signature'is right-justified in italics. - First character in the paragraph is the Georgia font family and 40px in size.
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>
<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:
- Paragraph text is displayed in default font.
- Quote box measures 200px X 100px.
- The font size of the quoted text is 120% larger than the default font-size.
- The font style of the quoted text is italic.
- There is 5px of space between the main text and the quoted text.
HTML Source:
<div class="redbox"> Get ready!
</div>
<div class="yellowbox">
Get set! </div>
<div class="greenbox"> Go!!
</div>
</div>
<div class="yellowbox">
Get set! </div>
<div class="greenbox"> Go!!
</div>
Specifications:
- Avoid duplicating lines of CSS. Place settings that apply to all three boxes in their own CSS ruleset.
- Use shades of red, yellow, green for the box background and border. Colors do not need to match the example above exactly.
- The boxes are 100px wide.
- Padding, margins and borders are all set to 10px.
- Text should be centered in the containing box.
- The boxes should begin to stack up vertically when the width of the view is reduced.
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>
<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:
- The states in the unordered list should be blue.
- The states in the ordered list should use the default color (i.e., don't let their color change).
- The cities in the list should be green.
- Modify the CSS only. Don't modify the HTML.
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.)
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>
<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:
- Left justified text has a left margin of 5px.
- Right justified text has a right margin of 5px.
- Top/bottom margin is default.
- Size of the box is 100px X 100px, with background color #00FF00.
