Links can be displayed in different ways, but to be effective, the CSS stylesheet must contain the names of the pseudo-classes in this order:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
a:link { color: #FF0000; } /* unvisited link in RED */ a:visited { color: #00FF00; } /* visited link in GREEN */ a:hover { color: #FF00FF; } /* mouse-over in PINK */ a:active { background-color: yellow; } /* active link hasYELLOW background */ </style> <body> <p><a href="text_hey.html" target="_blank">Do not touch this link!</a>: All unvisited link will be red if untouched.</p> <p><a href="../html_beg/index.html" target="_blank">HTML Lessons.</a>: Whenever the mouse cursor hovers on this link, the color changes to pink.</p> <p><a href="index.html" target="_blank">CSS Lessons.</a>: After clicking on any link, it becomes a visited link and turn green.</p> <p><a href="../index.html" target="_blank">Home Page.</a>: The moment you click on any link, it becomes active and will be momentarily highlighted in yellow.</p> </body> |
Do not touch this link!: All unvisited link will be red if untouched. HTML Lessons.: Whenever the mouse cursor hovers on this link, the color changes to pink. CSS Lessons.: After clicking on any link, it becomes a visited link and turn green. Home Page.: The moment you click on any link, it becomes active and will be momentarily highlighted in yellow. |
Note: Pseudo-class names are not case-sensitive. Click here to see more anchor pseudo-classes at work.
