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

Quick Links

Contact Us

The USGenWeb Project, Free Genealogy Online 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 use the Contact Form.

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