Latihan CSS
Nama : Ikromul Abid
NPM : 20312082
Kelas : IF20Dx
Latihan 2
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red anf center-aligned paragraph.</p>
</body>
</html>
Setelah itu hasilnya akan seperti ini :
Latihan 3 :
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
border: none;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
}
.success {background-color: #4caf50;}
.success:hover; {background-color: #46a049;}
.info {background-color: #2196f3;}
.info:hover; {background-color: #0b7dda;}
.Warning {background-color: #ff9800;}
.Warning:hover; {background-color: #e68a00;}
.danger {background-color: #f44336;}
.danger:hover; {background-color: #da190b;}
.default {background-color: #e7e7e7; color: black;}
.default:hover; {background-color: #ddd;}
</style>
</head>
<body>
<h1>Alert Buttons</h1>
<button class="btn success">Success</button>
<button class="btn info">Info</button>
<button class="btn Warning">Warning</button>
<button class="btn danger">Danger</button>
<button class="btn default">Default</button>
</body>
</html>
Berikut hasilnya akan seperti gambar di bawah ini :
Latihan 4 :
<!DOCTYPE html>
<html>
<style>
input[typetext], select {
wiidth: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit]{
width: 20%;
background-color: #4caf50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
<body>
<h3>Using CSS to style an HTML</h3>
<div>
<form action="/action_page.php">
<label for="fname">First Name</label><br>
<input type="text" id="fname" name="firstname" placeholder="Your Name.."> <br><br>
<label for="lname">Last Name</label><br>
<input type="text" id="lname" name="lastname" placeholder="Your last name.."><br><br>
<label for="country">Country</label><br>
<select id="country" name="country">
<option value="austrualia">Austraulia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select><br><br>
<input type="submit" value="submit">
</form>
</div>
</body>
</html>
Berikut hasilnya akan seperti gambar yang ada di bawah ini :
Latihan 5 :
<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: arial;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {float: ;left;}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active){
background-color: #111;
}
.active {background-color: #4caf50;}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="contact">Contact</a></li>
<li style="float:center;"><a class="active" href="#about">About</a></li>
</ul>
</body>
</html>
Latihan 6 :
<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: arial;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {float: left;}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown.content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown.content a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown.content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown.content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown"></a>
<div class="dropdown-content">
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu</p>
</body>
</html>
Hasilnya akan sepeti gambar yang di bawah ini:
Komentar