Styling Text with CSS

There are a number of styles that can be used to add some pizazz to your headings, special texts and more. Below are some of the styles we used in this web.

Before using text styles you will need to add the classes (code shown near the bottom of this page) to your CSS file. Then you can refer to these classes with the HTML tags as shown in the examples below.

Heading Tags Used In The USGenWeb Project Web

Heading 1 - Your Text Here

			   html 

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

Heading 2 - Your Text Here

			   html 

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

Heading 3 - Your Text Here

			   html 

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

Heading 4 - Your Text Here

			   html 

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

Heading 5 - Your Text Here

			   html 

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

Heading 6 - Your Text Here

			   html 

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

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

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>

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>

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>

CSS coding for the text styles above

H1 Style Sheet Coding

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

H2 Style Sheet Coding

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

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

H4 Style Sheet Coding

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

H5 Style Sheet Coding

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

H6 Style Sheet Coding

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

Author Style Sheet Coding

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

Lead Style Sheet Coding

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

Highlighting Style Sheet Coding

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

Submitted by Marsha Bryant

_____
Page content reviewed and/or updated by the Advisory Board 2023 Jan

Quick Links

Contact Us

The USGenWeb Project, Free Genealogy Online

Contact the National Coordinator with Project questions, suggestions, or concerns.

Contact any Web Management Team member for usgenweb.org website questions, suggestions, or concerns.

Please include a link if your inquiry is about a specific page or Project website.