karenak Crown

Here's the Categorian Beginner's First Aid Kit - Part Ten


Blogging without linking is only half the fun !

What do I need links for ?

With links you can take your visitors to places you have been and liked. If you reblog an image, just link back to the blog where you got it from. If there's a video on a page that doesn't offer embedding, just take a screenshot and link that back to the page.

The Basic Code

<a href=" ... path to the page... " > Text or image to click </a>

The Style Sheet determines the basic formatting of links. You can easily change it. But links can also be formatted indiviually.

Adjust the Style Sheet

In the Style Sheet look for a line that starts with

a { ... }

This is the definition for the links as such - if you want all the links to look alike, then adjust only this one line.

In order to change the looks of your review links, add this line to your style sheet:

.review a { ... }


.review a { font-size: 12pt; color: orange; text-decoration: none; }

You can also specify background, border, padding, margin etc.
If you read the previous tutorials all this will look familiar.

text-decoration can be none, underline, overline, line-through and blink. Please note that "blink" is not supported in Internet Explorer, Chrome and Safari (...and probably drives away visitors more quickly than the blink-frequency...).

Get fancy

Unlike other CSS/HTML code, the link can be made sensitive to the cursor ie. you can specify that it changes its appearance when the cursor hovers over it.

To achieve this, you merely add a line to your style sheet:

a:hover { ... }

and / or

.review a:hover { ... }


.review a:hover { font: Arial; font-size: 14pt; color: orange; text-decoration: underline; }

With this line you can make the link look completely different, thus catching your visitor's attention.

In addition to :hover you can also specify the looks for :active and :visited.

How to use it

Now that you have adjusted the Style Sheet, it's time to look at the HTML you need to add a link to your post.

Example for link with text

<a href="https://categorian.com/perm/post/id/1074940">Link to this post</a>

Link to this post

Example for link with image

<a href="https://categorian.com/perm/post/id/1074940"><img src="http://..."></a>

Example for individual formatting

<a href="https://categorian.com/perm/post/id/1074940"><span style="color: green; border: 1px dashed red; padding-left: 5px; padding-right: 5px;"> Link to this post </span></a>

Link to this post

Example for link with confirmation

This is a nice gimmick but not really useful to us bloggers. It's usually used to confirm a deletion. But it can also be used to warn the visitor that s/he will now leave this page. Still, just so you know it's there, here's an example.

<a onclick="return confirm('Are you sure you want to follow this link ?');" href="https://categorian.com/perm/post/id/1074940"> Link with confirmation </a>

Link with confirmation

>>>> Part 11