Styling Text with CSS
There are a number of styles that can be used to add some pazazz to your headings, special texts and more. Below are some of the styles we used in this web.
h1 {
font: 38px 'Lora', Verdana, Helvetica, sans-serif;
color: #272646;
margin: .3em 0 .3em 0;
letter-spacing: -1px;
}
h2 {
font: 34px 'Lora', Arial, Verdana, Helvetica, sans-serif;
color: #302f59;
margin: .3em 0;
letter-spacing: 1px;
text-align: center;
}
h3 {
font: 28px 'Jura', Verdana, Helvetica, sans-serif;
color: #302f59;
padding: 0;
text-transform: uppercase;
letter-spacing:
-1px;
margin: 30px 0 25px 0;
padding: 5px 0;
border-bottom: 1px solid #302f59;
}
h4 {
font: normal 28px 'Jura', Verdana, Helvetica, sans-serif;
color: #404040;
margin: .3em 0;
}
h5 {
font: normal 24px 'Raleway', Verdana, Helvetica, sans-serif;
color: #404040;
margin: .3em 0;
}
h6 {
font: normal 20px 'Raleway',Verdana, Helvetica, sans-serif;
color: #302f59;
margin: .3em 0;
}
Lead
Coding shown is a lead class used on one word. A span class is used to apply the style. Use this code for one or more words in a sentence.
Coding shown is a lead class used on the entire sentence.
.lead {font-size: 1.4em; line-height: 1.5em; font-variant: small-caps; padding-top: 5px; padding-bottom: 5px;}
.author2 {color: #777; font-style: italic; letter-spacing: 2px;}
Highlighting Words
To add yellow highlighting to a word(s), add a span class of .highlight. To have an entire sentence highlighted, add the class .highlight to the paragraph tag.
.highlight {background-color: #ffff00; color: #000000;}
Updated by AB June 2021
Comments and administrative-type problems should be emailed to the
National Coordinator. For
suggestions, concerns or complaints regarding a specific web site within
the USGenWeb Project, please email the
National Coordinator.
Direct comments, technical difficulties or suggestions about this web site to the Webmaster.