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 - Your Text Here

			   html 

			   <h1>Heading 1 - Your Text Here</h1>

Style Sheet Coding

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

Heading 2 - Your Text Here

			   html 

			   <h2>Heading 2 - Your Text Here</h2>

Style Sheet Coding

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

Heading 3 - Your Text Here

			   html 

			   <h3>Heading 3 - Your Text Here</h3>

Style Sheet Coding

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 - Your Text Here

			   html 

			   <h4>Heading 4 - Your Text Here</h4>

Style Sheet Coding

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

Heading 5 - Your Text Here

			   html 

			   <h5>Heading 5 - Your Text Here</h5>

Style Sheet Coding

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

Heading 6 - Your Text Here

			   html 

			   <h6>Heading 6 - Your Text Here</h6>

Style Sheet Coding

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

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.

			   html 

			    <p>Coding shown is a <span class="lead">Lead</span> class used on one word</p>

Coding shown is a lead class used on the entire sentence.

			   html 

			    <p class="lead">Coding shown is a lead class used on the entire sentence.</p>

Style Sheet Coding

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

Author class - The text appears in italics, gray color and wider letter spacing

			   html 

			   <p class="author2">Author class - The text appears in italics, gray color and wider letter spacing</p>

Style Sheet Coding

.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.

			   html 

			   <p>To add yellow highlighting to a<span class="highlight">word(s)</span>, 
					 add a span class</p>

Style Sheet Coding

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

Submitted by Marsha Bryant

Updated by AB June 2021

Quick Links

Contact Us

The USGenWeb Project, Free Genealogy Online

Contact the National Coordinator for administrative-type comments, suggestions, questions, and concerns about the USGenWeb Project. When applicable, please provide the location of a specific website within the USGenWeb Project.

Contact the USGenWeb Web Management Team for technical comments, suggestions, questions, and concerns about the USGenWeb Project website. When applicable, please provide the location of a specific page of the USGenWeb Project website.