Daily Blog with Anik || Exercises on CSS Horizontal Bar
In this video,I explained the Exercises on CSS Horizontal Bar. Feel free to comment. For more, please subscribe and press the BELL icon. Please visit my CSS Playlist. Please link, comment, share and subscribe. The code is as follows -
HTML File -
<html>
<head> <title> Exercises 11 </title>
<link rel="stylesheet" href="exercises11.css">
</head>
<body>
<ul>
<li> <a href="https://www.youtube.com/channel/UCKY176mHESTCI1QderHdOdg/featured"> Home </a> </li>
<li> <a href="https://www.youtube.com/channel/UCKY176mHESTCI1QderHdOdg/videos"> Videos </a> </li>
<li> <a href="https://www.youtube.com/watch?v=_eBkBm4ZM94&list=PLuxTWd0ziEhpfOPBK-CuyZcxviDkEIdvZ"> HTML Playlist </a> </li>
<li> <a href="https://www.youtube.com/watch?v=gvPr-dJwHZ0&list=PLuxTWd0ziEhocpvrx7kvVPQDFaMnz6mzQ"> CSS Playlist </a> </li>
<li> <a href="https://www.youtube.com/channel/UCKY176mHESTCI1QderHdOdg/about"> About </a> </li>
</ul>
</body>
</html>
CSS File -
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: lightpink;
overflow: hidden;
}
li { float: left; }
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 15px 15px;
}
li a:hover {
font-size: 20px;
color: green;
background-color: lightblue;
text-decoration: underline;
font-family: Monotype Corsiva;
}
body {
background-color: lightgreen;
}
HTML File -
<html>
<head> <title> Exercises 11 </title>
<link rel="stylesheet" href="exercises11.css">
</head>
<body>
<ul>
<li> <a href="https://www.youtube.com/channel/UCKY176mHESTCI1QderHdOdg/featured"> Home </a> </li>
<li> <a href="https://www.youtube.com/channel/UCKY176mHESTCI1QderHdOdg/videos"> Videos </a> </li>
<li> <a href="https://www.youtube.com/watch?v=_eBkBm4ZM94&list=PLuxTWd0ziEhpfOPBK-CuyZcxviDkEIdvZ"> HTML Playlist </a> </li>
<li> <a href="https://www.youtube.com/watch?v=gvPr-dJwHZ0&list=PLuxTWd0ziEhocpvrx7kvVPQDFaMnz6mzQ"> CSS Playlist </a> </li>
<li> <a href="https://www.youtube.com/channel/UCKY176mHESTCI1QderHdOdg/about"> About </a> </li>
</ul>
</body>
</html>
CSS File -
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: lightpink;
overflow: hidden;
}
li { float: left; }
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 15px 15px;
}
li a:hover {
font-size: 20px;
color: green;
background-color: lightblue;
text-decoration: underline;
font-family: Monotype Corsiva;
}
body {
background-color: lightgreen;
}
Comments
Post a Comment