HTML & CSS: Hyperlinks and Lists
Hyperlinks (or just 'links' for short) are basically just click-able links to a location - whether that be another webpage or a resource of some sort. Links basically make up the web (and if you think about it, it gives a sense to calling it "the web" - since the links make everything reference everything else). Links are necessary so the user can go to different pages in a website and to go to different websites with ease. Search engines are most basically just a big list of links.
Links are accomplished in HTML by using the anchor (
a) element (which is always started and ended using anchor tags). Setting the
href attribute defines the location that the link links to. Any text inside the
a element is then used as anchor text for that link (the text that you have to click on to 'jump' to the location that the link points to).
href (which stands for "Hypertext REFerence" by the way) value can be a fixed path (for example a URL such as http://www.dev-hq.net) or a relative path (for example, something in the same folder as your HTML document - such as
page_two.html). An example of a fixed path link would be a link from your website, to this website:
We can then style all links on the page very easily, by using the
a selector. Note that CSS selectors can be more specific to certain areas of the page by using a space in the selector - for example the
body a selector would refer to all anchor elements inside the
body - however in this example doing such a thing would be seemingly pointless (as all anchor elements should be in the body). It's very common to simply change the link text colour using the
1 2 3
Remember that we are putting the
body in the selector to specify that the stylings apply to all anchor elements in the body section.
We can also use the
:active pseudo-classes (which sound so much scarier than they actually are) to set the style when the user hovers over the link or when the link has previously been visited by the user. Note that the
:hover pseudo-class isn't exclusive to
a, it can be used on a variety of elements (while
:active are just for links). Pseudo-classes are used in CSS by simply adding them to the end of the element you want the class action (for example
:hover) to apply to in the selector. For example we want to target the
a - so we'd want
a:hover as the CSS selector for when links are hovered over. So if we wanted the link to be red normally, green on hover, and blue once visited we would do something like the following:
1 2 3 4
Notice that because there is only one rule in each ruleset, we are simply condensing the rulesets down to one line each -- it's another one of those formatting things, it's personal choice.
Lists are used in HTML, as you would expect, for displaying related data (and in some areas you might not expect, like navigation bars). You can have ordered lists where the points in the list should be ordered in a specific way (for example
1, 2, 3, 4, 5) or unordered lists where the points don't have a specific order (for example a bullet point list).
To do unordered lists - you start with the
ul element (which stands for unordered list), and then wrap each point you want to put in your unordered list in
li (list) tags. For example:
1 2 3 4
Ordered lists are pretty much exactly the same, apart from we use the
ol (ordered list) element as a parent to our
li elements instead of the
1 2 3 4
You can style lists very easily in CSS by simply targeting the elements as you would with any other element - for example using
li as selectors.
One of the things that is often customised is the "bullet point" type. With ordered lists this defaults to numbers (1, 2, 3, 4 etc) and with unordered lists this defaults to bullet points, but we can change is using the
list-style-type property. There are a variety of values this property can be set to:
none– No marker.
disc– Default - A filled circle.
circle– An 'empty' circle.
square– A square.
armenian– Traditional Armenian numbering.
decimal– Default - A 'regular', decimal number.
decimal-leading-zero– A 'regular' number with a 0 preceding it (01, 02, etc).
georgian– Traditional Georgian numbering (an, ban, gan, etc).
lower-alpha– Lowercase alphabet (a, b, c, etc).
upper-alpha– Uppercase alphabet (A, B, C, etc).
lower-greek– Lowercase greek (alpha, beta, gamma, etc).
lower-latin– Lowercase latin (a, b, c, etc).
upper-latin– Uppercase Latin (A, B, C, etc).
lower-roman– Lowercase Roman (i, ii, iii, etc).
upper-roman– Uppercase Roman (I, II, III, etc).
Some example usage of this is as follows:
1 2 3