Anchor link or A Tag Style Example

Anchor tag is hyperlink, some people say link, in html page design we often link content from webpage using a tag (anchorlink) like example below.

<a href="url or path">Text</a>

a
{
    font-size: 15px;
    text-decoration: none;
    color: #808080;
}

Anchor or a href tag for Hyperlink in HTML
The anchor element is used to create hyperlinks between a source and a destination.

The source can be image, button or plain text that links to another resource, and the destination is also a type of resource (like page, document, images, different website, or some position on same page) that the source anchor links to.

Css for Hyperlink A Tag Style

Hyperlinks are one of the fundamental technologies that you will be using very often in web designing and development, by linking web information to information (content), so you need to understand how to use anchor elements, and how you can apply different style on hyperlink .

Anchor or ahref tag <a href="pageurl.html" /> is used when we want to link some content on same page or to a different page

<a href="pagename.html" > Click Here </a>

Anchor tag or a tag often termed as hyperlink.

• href

  here you need to set the destination url, incase want to link something on same page, use #id example: <a href="#dvShortinfo">Link on same page</a>

• target

  indicate how you want the destination to be open, "_blank" | "_top" | "_self" | "_parent"

• title

  this is optional, but very useful for SEO

This is how you can create a proper hyperlink tag

<a href="destination_resource_location" target="_blank" title="SEO freindly title text"> Click Here </a>

When we create a hyperlink, the default Anchor or A Tag <a>my link</a> color is blue, and when we hover the mouse pointer there will always be an underline.

But in real-time webpage designing we need to change the color and the style to match with web page layout.

Here is an example of how we can customise the hyperlink look and feel, change font color, background, font size for every mouse event like hover , mouse out etc.

a
{
    font-size: 15px;
    text-decoration: none;
    color: #808080;
}
            
a:hover
{
    font-size: 15px;
    color: #f00;
    text-decoration: underline;
}
            
a:active
{
    font-size: 15px;
    text-decoration: none;
    color: #000;
}

We can apply many other style attribute to hyperlink CSS using CSS Style Properties