Add Background Color to a Heading

By Stephen Bucaro

One way to highlight your webpage heading is to add a background color. This is very simple to do using the background-color style property, but since a heading element, <h1>, is a block element, the background color will extend beyond the length of your heading.

• Remember a block element is a box that takes up a horizontal section of its containing element, in other words it acts like its preceded by and followed by carriage-return line-feed control characters.

This can easily be fixed by placing a <span> element within the heading tags and applying the background-color style property to the <span>. The code for this is shown below.

<h1><span style="padding:4px; background-color:tomato;">Add Background Color to a Heading</span></h1>

Note that I added the padding property so the heading text doesn't touch the sides of the background color box.

In the above code, the background-color property value is set to tomato. This is an official w3c color name. You can find other color names here.

• Remember, in CSS there are two ways to specify color; color name and color code. And there are six different ways to specify color with codes; using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

More Easy Cascading Style Sheets:
• Code for Horizontal Drop-down Menu Bar
• CSS Arts and Crafts - Create a Graphic Cube Using the CSS3 Transform Property
• How to Overlay Text on an Image
• Add Drop Shadows to Your Pictures
• The CSS Box Model
• How to Center a DIV
• Setting a Larger First Letter
• Make a Fixed-width Variable-height Round Cornered Box
• How to Use a Starburst on Your Web Page
• Using Google Fonts

RSS Feed

 Follow @Stephen Bucaro

 General Web Design
 HTML Quick Reference
 CSS Quick Reference
 Java Script Quick Reference
 HTML Design
 Graphics Design
 Easy Cascading Style Sheets
 Easy Java Script Code
 Web Design Tools
 Coding Issues