Exercises 3 - CSS Images - Part 1
In this video,I explained the CSS Images with some effects. 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> Exercises3 </title>
<link rel="stylesheet" href="exercises3.css">
</head>
<body>
<table border=1 cellpadding=0 cellspacing=0 align=center>
<caption> CSS Images </caption>
<tr> <td> <img src="html.png" id="i1"> </td> <td class="td1"> HTML Image </td> </tr>
<tr> <td> <img src="css.png" id="i2"> </td> <td class="td1"> CSS Image </td> </tr>
<tr> <td> <img src="htmlcss.png" id="i3"> </td> <td class="td1"> HTML & CSS Image </td> </tr>
</table>
</body>
</html>
CSS File -
#i1 {
height: 150px;
width: 150px;
border-radius: 18px;
display: block;
margin-left: auto;
margin-right: auto;
}
#i2 {
height: 150px;
width: 150px;
border-radius: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
#i3 {
height: 150px;
width: 150px;
border: 1px solid green;
padding: 5px;
display: block;
margin-left: auto;
margin-right: auto;
}
#i3:hover {
background-color: cyan;
}
table {
height:500px;
width: 500px;
background-color: lightpink;
}
.td1 {
text-align: center;
}
body {
background-color: lightblue;
}
HTML File -
<html>
<head> <title> Exercises3 </title>
<link rel="stylesheet" href="exercises3.css">
</head>
<body>
<table border=1 cellpadding=0 cellspacing=0 align=center>
<caption> CSS Images </caption>
<tr> <td> <img src="html.png" id="i1"> </td> <td class="td1"> HTML Image </td> </tr>
<tr> <td> <img src="css.png" id="i2"> </td> <td class="td1"> CSS Image </td> </tr>
<tr> <td> <img src="htmlcss.png" id="i3"> </td> <td class="td1"> HTML & CSS Image </td> </tr>
</table>
</body>
</html>
CSS File -
#i1 {
height: 150px;
width: 150px;
border-radius: 18px;
display: block;
margin-left: auto;
margin-right: auto;
}
#i2 {
height: 150px;
width: 150px;
border-radius: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
#i3 {
height: 150px;
width: 150px;
border: 1px solid green;
padding: 5px;
display: block;
margin-left: auto;
margin-right: auto;
}
#i3:hover {
background-color: cyan;
}
table {
height:500px;
width: 500px;
background-color: lightpink;
}
.td1 {
text-align: center;
}
body {
background-color: lightblue;
}
Comments
Post a Comment