Daily Video Blog with Anik || CSS Links || CSS Properties in Links
In this video,I explained the CSS Links. Feel free to comment. For more, please subscribe and press the BELL icon. Please visit my CSS Playlist. The code is as follows -
HTML File -
<html>
<head> <title> CSS Links </title>
<link rel="stylesheet" href="csslinks.css">
</head>
<body>
<table>
<tr> <th> Description </th>
<th> Link </th>
</tr>
<tr>
<td> Link </td>
<td> <a id="a1" href="example1.html"> Example 1 </a> </td>
</tr>
<tr>
<td> Link 1 </td>
<td> <a id="a2" href="example2.html"> Example 2 </a> </td>
</tr>
<tr>
<td> Link 2 </td>
<td> <a id="a3" href="example3.html"> Example 3 </a> </td>
</tr>
<tr>
<td> Link 3 </td>
<td> <a id="a4" href="example4.html"> Example 4 </a> </td>
</tr>
</table>
</body>
</html>
CSS File -
table {
border: 1px solid black;
}
#a1{
color: red;
text-decoration: none;
}
#a2{
color: green;
text-decoration: underline;
}
body {
background-color: lightgreen;
}
#a2:hover{
color: yellow;
text-decoration: none;
font-size: 20px;
font-family: "Arial";
}
#a3 {
background-color: yellow;
}
#a4 {
background-color: red;
color: white;
padding: 15px 20px;
text-align: center;
text-decoration: underline;
display: inline-block;
}
#a4:hover {
background-color: green;
color: cyan;
text-align: center;
text-decoration: none;
font-size: 15px;
}
HTML File -
<html>
<head> <title> CSS Links </title>
<link rel="stylesheet" href="csslinks.css">
</head>
<body>
<table>
<tr> <th> Description </th>
<th> Link </th>
</tr>
<tr>
<td> Link </td>
<td> <a id="a1" href="example1.html"> Example 1 </a> </td>
</tr>
<tr>
<td> Link 1 </td>
<td> <a id="a2" href="example2.html"> Example 2 </a> </td>
</tr>
<tr>
<td> Link 2 </td>
<td> <a id="a3" href="example3.html"> Example 3 </a> </td>
</tr>
<tr>
<td> Link 3 </td>
<td> <a id="a4" href="example4.html"> Example 4 </a> </td>
</tr>
</table>
</body>
</html>
CSS File -
table {
border: 1px solid black;
}
#a1{
color: red;
text-decoration: none;
}
#a2{
color: green;
text-decoration: underline;
}
body {
background-color: lightgreen;
}
#a2:hover{
color: yellow;
text-decoration: none;
font-size: 20px;
font-family: "Arial";
}
#a3 {
background-color: yellow;
}
#a4 {
background-color: red;
color: white;
padding: 15px 20px;
text-align: center;
text-decoration: underline;
display: inline-block;
}
#a4:hover {
background-color: green;
color: cyan;
text-align: center;
text-decoration: none;
font-size: 15px;
}
Comments
Post a Comment