Fancy CSS Headlines - Examples
- Standard Headline
- Style the Text
- Add Decorative Borders
- Styled Headline with Decorative Background Image
Standard Headline
A standard HTML h1 headline looks like this in HTML:
<h1>This Isn't Very Fancy - Just Ugly</h1>
And like this without any styling:
Note: this is displayed as an image because the H1 tag is styled by default in About.com templates.
And an Unstyled DIV Headline
An unstyled DIV looks like any other paragraph text. For example, this HTML:
<div>This is My Page Title</div>
Looks like this without any styles applied:
Return to CSS Headlines Article
Style the Text
Fun in the Sun
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<h4>Fun in the Sun</h4>
h4 {
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;
margin: 0;
padding: 0;
color: #e7ce00;
}
p { margin: 0; }
Return to CSS Headlines Article
Add Decorative Borders
Fun in the Sun
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<h4>Fun in the Sun</h4>
h4 {
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;
margin: 0;
padding: 0;
border-top: solid #e7ce00 medium;
border-bottom: dotted #e7ce00 thin;
width: 600px;
color: #e7ce00;
}
p { margin: 0; }
Return to CSS Headlines Article
Styled Headline with Decorative Background Image
Fun in the Sun
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<h4>Fun in the Sun</h4>
h4 {
font: bold italic 3em/1em "Times New Roman", "MS Serif", "New York", serif;
background: #fff url("fancyheadline.jpg") repeat-x bottom;
padding: 0.5em 0 90px 0;
text-align: center;
margin: 0;
border-bottom: solid #e7ce00 0.25em;
color: #e7ce00;
}
p { margin: 0; }
Return to CSS Headlines Article
Ugly headline image courtesy J Kyrnin.
Flowers image courtesy weirdvis from StockXchng #774442.
