Uncategorized

Lesson 6 – CSS3 Links And Borders

Links are an important part of every webpage. CSS3 allows you to format links, usually in the form of coloring changes, to make them prominent, easy to locate and use for the visitors. We will look into the four main CSS3 pseudo classes to format hyperlinks.

  • The :link pseudo class denotes the unvisited link on your webpage.
  • The :visited pseudo class denotes a visited link on your webpage.
  • The :hover pseudo class comes into play when a mouse pointer is hovering over a link.
  • The :active pseudo class denotes a link which is being clicked by the visitor.

Now let us see how to use these properties one by one.

Setting the color of unvisited hyperlinks.

Please note that blue is the default color of unvisited links in HTML5.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>CSS3 Hyperlinks</title>
    <style>
        a:link {
            color: #000;
        }
    </style>
</head>
<body>
    

[block]0[/block]

</body> </html>

The final output will be as under.

For Setting color of visited hyperlinks, you will use the following code.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>CSS3 Hyperlinks</title>
    <style>
        a:visited {
            color: #fa29bc;
        }
    </style>
</head>
<body>
    

[block]1[/block]

</body> </html>

Output of above code will be as under.

The following is the markup and CSS3 for changing text color when link is hovered.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>CSS3 Hyperlinks</title>
    <style>
        a:hover {
            color: #fabc29;
        }
    </style>
</head>
<body>
    

[block]2[/block]

</body> </html>

The browser will produce the following result.

Here is the code for setting colors of active hyperlinks.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>CSS3 Hyperlinks</title>
    <style>
        a:active {
            color: #bacc66;
        }
    </style>
</head>
<body>
    

[block]3[/block]

</body> </html>

The browser will render the above code as under.

CSS3 Borders

The border properties are also commonly used properties in CSS3. They allow you to determine how the border of the element should appear to the visitors. There are three main border properties that are as follows.

  • The border-color property sets the border color.
  • The border-style property sets the border style.
  • The border-width property sets the border’s width.

Now we learn how to setting the border’s color.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>CSS3 Borders</title>
    <style>
       .box1 {
           height: 100px;
           width: 400px;
           border: 1px solid red;
       }
	    .box2 {
           height: 100px;
           width: 400px;
           border: 1px solid;
           border-top-color: green;
           margin-top: 20px;      
        }

    </style>
</head>
<body>
    

This is an example of border on all sides of the box

This is an example of border on top of the box only

</body> </html>

The following is the visual rendition of the above style rules.

It is also very easy to set border’s style.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>CSS3 Borders</title>
    <style>
       div {
           height: 100px;
           width: 400px;
           border: 1px dashed yellowgreen;
       }
    </style>
</head>
<body>
    

Setting Border's Style

</body> </html>

Now, you will have a dashed border as shown in the following figure.

You can also assign other style values to the border such as dotted, double, groove, ridge, and inset, etc.

It is also a breeze to set a border’s width.

<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>CSS3 Borders</title>
    <style>
       div {
           height: 100px;
           width: 400px;
           border: 4px dotted orangered;
       }
    </style>
</head>
<body>
    

Setting Border's Width

</body> </html>

Now, the h1 element have a thicker border.

In the next lesson, we will through some light on CSS3 Paddings and Margins