Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Add Background Color to a Heading

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:
• Easy Three-level Expanding Menu Code
• Easy CSS 3D Mouse-over Pressed Text Effect
• Create Animated Glowing Text
• Easy CSS Animated Flaming Text
• Spice Up Your Web Forms with Color and Graphics
• How to Center a DIV
• Code for Horizontal Drop-down Menu Bar
• How to Use a Starburst on Your Web Page
• Code to Move the Scrollbar to the Left Side
• Understanding CSS Positioning

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268