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
• 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:
• Create a No Image Rollover Button or Badge
• Flat Design and Ghost Buttons
• Create Animated Glowing Text
• Easy Oval Image Mask With CSS
• Add Style to Your Blockquotes
• Code to Move the Scrollbar to the Left Side
• Easy Three-level Expanding Menu Code
• Setting a Larger First Letter
• Create Custom Horizontal Rules
• Easy CSS Buttons