How to Create Web Page Headings


Very Basic HTML code TRY This SiteBuilder FREE! - No Credit Card

The very simple HTML code shown below can be used to create some interesting web page headings.

The real beauty of it is that you don't need to change the HTML code for different looks.

You can change the complete appearance by making changes to the style sheet attached to your web page.

The code:
<div id="ex1">
<h1>Site Heading Text</h1>
<p>This would be slogan text.</p>
</div>

You may want a very plain heading on the pages of your site or you may want something more appealing.

We'll demonstrate several examples and supply the HTML code and CSS for each.

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


First Determine Your Web Page Width

We recommend a web page width of 1000 pixels. 20% of your visitors still use a 1024 pixel monitor resolution.

See: Resolution Example for an explanation.

Our examples will use a 700 pixel width setting, so that they fit on our page.

Note: These examples would be centered on a normal web page. They appear to be off center because of the columns on our page.

Site Heading Examples

Maybe you want something very simple. You may want a plain white or colored box to place site heading text and a slogan.


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="ex1">
<h1>Site Heading Text</h1>
<p>This would be slogan text.</p>
</div>
 
#ex1 {
width: 700px;
height: 100px;
margin-left: auto;
margin: right: auto;
background-color: #99ccff
}
#ex1 h1 {
font-family: arial, verdana, serif;
font-size: 16pt;
float: left;
color: #000000;
background-color:transparent;
padding: 25px 0 0 20px
}
#ex1 p {
font-family: arial, verdana, serif;
font-size: 12pt;
float: right;
color: #ffffff;
background-color:transparent;
padding: 30px 20px 0 0
}

In the following series of examples we'll completely change the appearance of the heading without changing the HTML code.

Next Example