HTML Link Rectangle

Introduction
You might have noticed that some link elements on web pages have rectangular borders. Examples of these are those that lead you to the next or previous web page. The link element actually exists with a rectangle around it. In this article I show you things you can do with the rectangle.

You need basic know in HTML and CSS to understand this article.

Note: If you cannot see the code or if you think anything is missing (broken link), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what has been typed.

HTML Element Rectangle
Actually, every HTML element exists as a rectangular box. Surrounding any element is the margin, which is always transparent; the user sees through this margin to know the element that is behind. The width of the margin may be zero. Immediately inside this margin is a border. The border can have a color. The border may be transparent. The width of the border can be zero. The Link element can have a border and/or a margin around it. The link element we are talking about in this article is the A element. When the mouse pointer goes inside the rectangle, it turns into a hand.

Illustration
Try the following code to appreciate what I am talking about:

Previous <<
Next >>

The first link should have the content "Previous " with also a red border.

Giving the Link Element a Border
In this section, I explain how to give a link element a border like the ones above. It is simple. By default, the browser does not show the border of an A element. All you have to do is to indicate that a border has to be present and type the characteristics you want for the border (using CSS). In the above example, I did that in the style attribute. The value of the style attribute, begins with the word, "border". This indicates that a border has to be present. The word border is followed by a colon. After the colon, you have the characteristics of the border. The characteristics of the border above are, "solid 1px red". These consist of the border-style, the border-with and the border-color. These characteristics are separated by spaces. And that is how you give a border to an A element.

Link and a Background Image
The story continues. You can give a link element a background image. To do this, you add the following CSS property and value to the style attribute value (declaration block of the link element rule):

background-image: url('myImage.gif')

The property name is "background-image". The value of the property is, "url('myImage.gif')". Replace 'myImage.gif' with the URL of your image file, in your own project.

The following is a modified version of the above code, this time with background image.

Previous <<
Next >>

So, if you did not know that an A element can have a background image, today you have known so.

Link and a Background Color
Instead of giving your link rectangle a background image, you can give it a background color. Just add something like the following to the value of the style attribute (declaration block of the CSS rule):

background-color:green

Here the CSS property is background-color; the value is green. You can give whatever color you want.

The Looks of a button
Hey, you can make the rectangle have the looks of an HTML button. I show you how. First of all, look at any button on your computer screen. That button has an overall color. That overall color is the background color. Some buttons may have background images, but most have just a background color. The top and left edge of the button you are seeing have a color that is slightly lighter than the background color. The right and bottom edges of the button have a color that is slightly darker than the background color. These edges you are seeing are actually the borders of the button.

So, to make the link rectangle have the looks of a button, give it a background color; give the top and left borders, a color that is slightly lighter than the background color; give the right and bottom borders a color that is slightly darker than the background color. The following code illustrates this. Read through the code, paying particular attention to the value of the style attributes.

Previous <<
Next >>

Try the above code.

The story does not end there. You can add the " " entities (spaces) as content to the A element to increase its length.

Other CSS properties
Do not forget the other CSS properties that you might have already been using with the A element. For example, in many cases the link is only underlined when the mouse pointer goes over it. This is achieved using the link and hover pseudo classes. Check this out:

A:link {text-decoration:none}
A:hover {text-decoration:underline}

Previous <<
Next >>

That is it. You can manipulate the link rectangle in many ways as you would manipulate elements that are known to have obvious rectangles.

Chrys