How to Decorate your Web Pages with Red Hearts in CSS

No Need for Images

❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤

The following CSS tip provides instructions on how to decorate your web pages with red hearts and other symbols, using special character entities, instead of images.

Character entities are provided in HTML to represent certain characters and symbols such as

copyright: ©
a registration mark: ®
the Trademark symbol: ™
and even Hearts: ❤ *

You can resize these character entities, color them different colors and use for decorations on your web pages, eliminating the need for images.

Set up a class in your CSS file as follows:

.redheart {color:#ff0000;
font-size:14px; }

Then include this class in your HTML in a div, paragraph or span tag.

<div class="redheart">❤</div>

The above code should produce this red heart: ❤. If the heart is not large enough just enter a larger font size.

( * hearts are part of the playing card suit characters including a heart, diamond, spade and clover).

Web sites with lists of HTML entities are W3Schools.com and Webmaster Tool Kit. You can find the code for Hearts, arrows, Geometric shapes and more here: Sweeting.org

Return to HTML TIPS