Div Class
Now that we have modified blocks of existing content, and modified a span of content within an existing block, let's look at creating a new class which will wrap around a block of content all on it's own.
These "blocks" are referred to as divisions, which is abbreviated to div. We will work with two types of divs: div class and div id. Let's start with div class, which effects a division and can be used over and over again in a document (like the <p> or <h1> tags).
The div class is a good choice to modify the breaks in the heading breaks that have the names: "Upwind", "Ambition", "Corruption", "Curiosity", and "Now".
Let's create a class called "breaks" and set font-size, color, and font-family properties; and transform all the text to uppercase letters:
<!--
body {background-color: #cccccc; color:#FFFF33; font-family: Trebuchet MS, Verdana, Arial, sans-serif; margin-top: 20px; margin-left: 10%; margin-right: 10%; font-size:100.1%;}
h1 {font-size:2em; color:#FFFFFF; font-family: Verdana, Arial, sans-sefif; text-align: center; text-transform: capitalize; font-weight:normal;}
p {font-size: 1em; color: #000000; text-align: justify; line-height: 1.2;}
p:first-letter {color: inherit; font-size: 2em; font-weight: 100;}
.notes {font-size: .8em;}
.footnote {font-size: .6em; vertical-align: text-top;}
.breaks {font-size:2em; color:#FF6600; font-family:Arial, sans-serif; text-transform: uppercase}
-->
</style>
Wrapping the div class around a selection is as easy as span class:
So, let's replace the paragraph tags wrapping around those headings with the div class tag. Also, if there is a <b> tag in the markup, get rid of that as well. The first one looks like this, including the lines that precede and follow:
</p>
<div class="breaks">Upwind</div>
<p>
I think the solution is to work
The resulting page looks like this:
