How to Make a CSS Element Blink
Blinking text is nothing new to Web pages. In the 1990s, Netscape added the "<blink>" tag to its browser though the W3C (World Wide Web Consortium) did not recommend its use. This tag lives on in Firefox -- a descendent of the now-defunct Netscape browser -- and Opera. Due to efforts to remove visual effects from HTML and put them in style sheets, Cascading Style Sheets now include "blink" as an option for the "text-decoration" property. This option only works on Firefox and Opera, just like the tag. When you want blinking text on all browsers, you will need to use a JavaScript.
Other People Are Reading
Instructions
-
-
1
Open the Web page in Notepad or a code editor and find the "<style>" tags in the head of the code. If you do not find these tags, add this code between the "<head>" tags:
<style type="text/css">
</style>
-
2
Add a style rule that targets a class called "blink" between your "<style>" tags. Set the "text-decoration" property to "blink":
.blink {
text-decoration: blink;
}
-
-
3
Find the words that you want to make blink and wrap them in a pair of "<span>" tags with the "class" attribute set to "blink":
<span class="blink">Call Us at 1-800-555-5555!</span>
-
1
Tips & Warnings
Use a JavaScript fallback to make text blink in browsers that do not support "text-decoration: blink;".
Avoid use of blinking text on Web pages as much as possible. Site visitors may find blinking text difficult on the eyes or distracting.
