HTML style tag

HTML elemen <style> adalah tag yang digunakan untuk mendefinisikan CSS dalam dokumen HTML pada website, style tag yang berfungsi untuk menentukan atau memberikan gaya tampilan pada elemen-elemen di halaman web html.

1. html tag <style> contoh

<!DOCTYPE html>
<html>
<head>
<title>html body</title>
<style>
body {color:#454545;font-family:monospace;}
h1 {color:#7F38EC;} 
p {color:coral; font-size:20px; font-weight:bold;}
span {color:#1B8A6B; font-size:16px; font-weight:normal;}
div { background:#43302E; color:#fff; font-size:22px; margin-top:15px; padding:10px; text-align:center; width:200px;}
</style>
</head>
<body>
<h2>Contoh: elemen dibawah adalah tag yang ditentukan oleh style</h2> <hr>
<h1>Ini Adalah Judul</h1>
<p>Ini Adalah Paragraf</p>
<span>Ini Adalah Span</span>
<div>Ini Adalah Div</div>
</body>
</html>

Cicagak Berbagi

2. html tag <style> menggunakan hover pada elemen

<!DOCTYPE html>
<html>
<head>
<title>html body</title>
<style>
body {color:#454545;font-family:monospace;}
h1 {color:#7F38EC;} 
h1:hover {cursor:pointer; margin-left:30px;}
p {color:coral; font-size:20px; font-weight:bold; padding-left:5px; width:220px;}
p:hover {background:#6698FF; color:#fff; padding:4px; }
span {color:#1B8A6B; font-size:16px; font-weight:normal;}
span:hover {cursor:pointer; font-weight:bold; font-size:18px; text-decoration:underline;}
div { background:#007C80; border-radius:2px; color:#fff; font-size:22px; margin-top:15px; padding:10px; text-align:center; width:200px;}
div:hover {background:#fff; border-radius:4px; box-shadow:0 0 4px #000; color:#000;}
</style>
</head>
<body>
<h2>Contoh: elemen dibawah adalah tag yang ditentukan oleh style</h2> <hr>
<h1>Ini Adalah Judul</h1>
<p>Ini Adalah Paragraf</p>
<span>Ini Adalah Span</span>
<div>Ini Adalah Div</div>
</body>
</html>

Cicagak Berbagi

3. html tag <style> untuk gambar

<!DOCTYPE html>
<html>
<head>
<title>html body</title>
<style>
body {color:#454545;font-family:monospace;}
span {font-size:16px; font-weight:bold; color:#1B8A6B; }
img {border:solid 10px white; box-shadow:0 0 2px #000000;}
</style>
</head>
<body>
<h2>Contoh: elemen dibawah adalah tag yang ditentukan oleh style <hr> <br><span>Contoh gambar style</span></h2>
<img src="https://cicagak.my.id/media-posts/images/gambar.jpg" alt="Gambar Pemandangan" width="480" height="300">
</body>
</html>

Cicagak Berbagi

4. html tag <style> gambar aktif

<!DOCTYPE html>
<html>
<head>
<title>html body</title>
<style>
body {color:#454545;font-family:monospace;}
span {font-size:16px; font-weight:bold; color:#1B8A6B; }
img:hover {border:1px solid #fff; box-shadow:0 0 2px #000000; padding:5px;}
img:active {border:1px solid #9E7BFF; border-radius:2px; transform: translateY(10px);}
</style>
</head>
<body>
<h2>Contoh: elemen dibawah adalah tag yang ditentukan oleh style <hr> <br><span>Contoh gambar aktif</span></h2>
<img src="https://cicagak.my.id/media-posts/images/gambar.jpg" alt="Gambar Pemandangan" width="480" height="300">
</body>
</html>

Cicagak Berbagi