BLOGS BY TOPIC
BLOGS BY AUTHOR
BLOGS BY YEAR
This is the second of a three-part online training series of blogs on CSS style sheets. This blog shows how to create styles for specific HTML tags (the first part covers the principles of CSS style sheets, and the third part gives a worked example of CSS).
- CSS Styles for Specific HTML Tags
- Block Elements (Heading, Div and Paragraph Tags)
- Inline Tags - Span, Em and Strong
- Styling Images - the IMG Tag
- Styles for Ordered and Unordered Lists - ul, ol and li
- Hyperlinks (the A Tag) (this blog)
- Table Styles
- Setting CSS for Other Tags in HTML
Posted by Andy Brown on 16 May 2012
You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.
Hyperlinks (the A Tag)
Here's a simple HTML hyperlink tag, and what it produces:
|The <a> hyperlink tag.||What it would show.|
Thus the title tag gives the pop-up yellow caption, and the href tag tells you where to go to when you click on the link.
Although hyperlinks are easy to create in HTML, they are one of the more complicated tags to style effectively - read on!
You can set 5 classes for a hyperlink and its pseudo-classes (as they are called, weirdly):
|a||The basic hyperlink (setting the default font size, for example).|
|a:link||Additional effect when the hyperlink hasn’t already been used.|
|a:visited||Additional effect for a link to a page which has already been visited.|
|a:hover||Set how the hyperlink appears when you hover over it.|
|a:active||Set how the hyperlink appears when you click on it and hold the mouse down.|
Examples of Styles for Hyperlinks
Here are some styles that you could set:
/* hyperlinks appear without underlining by default */
/* unvisited links show in red */
/* links which have previously been used in green */
/* hover over link to change cursor and underline */
/* colour when someone clicking on link */
You must specify these tags in your CSS style sheet in a certain order (the order shown above works, and is as good a one to use as any).