Transform Lives Typography

Stylizing text for the College of Nursing Academic Programs pages.

by mlms13

HTML

<script src="http://fonts.googleapis.com/css?family=Bree+Serif"></script>
<h2><span class="transform">Transform</span> <span class="lives">Lives</span> <span class="through">Through</span> <span class="topic">Research</span></h2>

CSS

body {
    margin: 30px;
}
h2 {
    border-top: 3px solid #ccc;
    border-bottom: 3px solid #ccc;
    float: left;
    font: bold 24px sans-serif;
    text-align: center;
}
h2 span.transform {
    color: #d16;
    font-family: "Bree Serif", sans-serif;
}
h2 span.lives{
    color: #e29d17;
}
h2 span.through {
    color: #555;
    display: block;
    font: italic normal 20px serif;
    text-transform: lowercase;
}
h2 span.topic {
    font-size: 26px;
    text-transform: uppercase;
}