How to Create Web Page Headings
Very Basic HTML code
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:
<header class="ex1">
<h1>Site Heading Text</h1>
<p>This would be slogan text.</p>
</header>
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.
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:
<header class="ex1">
<h1>Site Heading Text</h1>
<p>This would be slogan text.</p>
</header>
header.ex1 {
max-width: 1000px;
margin: 0 auto !important;
background: #99ccff;
border-radius: 20px 20px 0 0;
box-shadow: 5px 5px 10px #010101
}
header.ex1 h1 {
font-family: arial, verdana, serif;
font-size: 30px;
float: left;
color: #000000;
padding: 5% 1.5%
}
header.ex1 p {
font-family: arial, verdana, serif;
font-size: 22px;
float: right;
color: #ffffff;
padding: 5% 1.5%;
text-shadow: 1px 1px 1px #010101
}
In the following series of examples we'll completely change the appearance of the heading without changing the HTML code.