How to Create Web Page Headings


Site Heading Example #3 TRY This SiteBuilder FREE! - No Credit Card

This example uses a textured background.

Because it is a small image and needs to be repeated some slight changes are made to the CSS settings from the last example.

background-image : URL(images/bk18d.gif);
background-repeat : repeat;

The only change we made to replace the background image was changing the image name and no-repeat to repeat

We also changed size of text, color of slogan text and adjusted the top padding on site name.

No changes were made to the HTML code.

Note: Because we used transparent for the background color on the h1 and p tags, we didn't have to make a change to those background-color settings.

Create beautiful,professional websites
WITHOUT Learning to Code!!

Use this NEXT GENERATION builder
to make blogs, portfolios or
full blown websites in minutes.
No Experience Needed!

Check out these Example websites
created by people just like you,
with no knowledge of HTML coding.

SquareSpaceSquareSpace

Start Your Website Now!SquareSpace



Site Heading Text

This would be slogan text.


The actual HTML code and CSS for creating this heading is shown here:

HTML CodeCSS
<div id="ex3">
<h1>Site Heading Text</h1>
<p>This would be slogan text.</p>
</div>
 
#ex3 {
width: 700px;
height: 100px;
margin-left: auto;
margin: right: auto;
background-image : URL(images/bk18d.gif);
background-repeat : repeat;
}

#ex3 h1 {
font-family: arial, verdana, serif;
font-size: 20pt;
float: left;
color: #000000;
background-color:transparent;
padding: 20px 0 0 20px
}
#ex3 p {
font-family: arial, verdana, serif;
font-size: 14pt;
font-weight: 600;
float: right;
color: #ffdd00;
background-color:transparent;
padding: 30px 20px 0 0
}

We pulled this background from the collection on our main website. Visit: Free Web Site Backgrounds

We'll demonstrate adding a real picture background in the next example.


Next Example