Select A State

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.

Heading Tags Used In The USGenWeb Project Web

Heading 1

html
  1. <h1>Your Text Here</h1>

Style Sheet

h1 {
font: 38px 'Lora', Verdana, Helvetica, sans-serif;
color: #272646;
margin: .3em 0 .3em 0;
letter-spacing: -1px;
}

Heading 2

html
  1. <h2>Your Text Here</h2>

Style Sheet

h2 {
font: 34px 'Lora', Arial, Verdana, Helvetica, sans-serif;
color: #302f59;
margin: .3em 0;
letter-spacing: 1px;
text-align: center;
}

Heading 3

html
  1. <h3>Your Text Here</h3>

Style Sheet

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;
}

Heading 4

html
  1. <h4>Your Text Here</h4>

Style Sheet

h4 {
font: normal 28px 'Jura', Verdana, Helvetica, sans-serif;
color: #404040;
margin: .3em 0;
}

Heading 5
html
  1. <h5>Your Text Here</h5>

Style Sheet

h5 {
font: normal 24px 'Raleway', Verdana, Helvetica, sans-serif;
color: #404040;
margin: .3em 0;
}

Heading 6
html
  1. <h6>Your Text Here</h6>

Style Sheet

h6 {
font: normal 20px 'Raleway',Verdana, Helvetica, sans-serif;
color: #302f59;
margin: .3em 0;
}

Below are some styles we used in this site to style text:

Lead

html
  1.  <p>This is a <span class="lead">Lead</span>lead class</p> - Use for one or more words in a sentence

Above is a lead class used on one word.

html
  1.  <p>This is a <span class="lead">Lead</span>lead class</p> - Use for one or more words in a sentence
  2.  <p><span class="lead">Lead</span></p>

Above is a lead class used on the entire sentence.

Style Sheet

.lead {font-size: 1.4em; line-height: 1.5em; font-variant: small-caps; padding-top: 5px; padding-bottom: 5px;}


Author class

html
  1. <p class="author2">Your Text Here</p>

Style Sheet

.author2 {color: #777; font-style: italic; letter-spacing: 2px;}


Highlighting Words or Sentences

To add yellow highlighting a word, highlight the word and apply the .highlight style. To have an entire sentence highlighted, add the class .highlight to the paragraph tag.

html
  1. <p>Your Text Here Goes Here, word(s) or the entire sentence can be highlighted.</p>

.highlight {background-color: #ffff00; color: #000000;}

Submitted by Marsha Bryant


Quick Links
Contact Us

The USGenWeb Project, Free Genealogy OnlineComments and administrative-type problems should be emailed to the National Coordinator. For suggestons, concerns or complaints regarding a specific web site within the USGenWeb Project, please use the Contact Form.

Direct comments, technical difficulties or suggestions about this web site to the Webmaster.