Bicara soal style mungkin diantara teman-teman sudah tidak asing lagi yah dengan kata ini yang akan berkaitan dengan pembahasan sekarang mengenai Cara Menambah Style Sederhana Pada HTML yang akan menjadikan dokumen lebih indah lagi dengan personalisasi yang ingin teman-teman susun.
Dokumen HTML hanya sebuah hypertext yang sebernarnya terpisah dengan dokumen style namun didalam HTML juga tersedia tag <style> khusus untuk dapat mempersonalisasi sebuah dokumen HTML yang akan saya gunakan pada tutorial kali ini. Tag ini biasanya digunakan dan diterapkan pada bagian tag <head> seperti dibawah ini.
<head> <title></title> <style> <!--- Konten style --> </style> </head>
Kode tersebut hanya sebuah struktur jika di jalankan pun
hanya akan menampikan halaman kosong lalu bagimana cara bekerja HTML dengan
style? Untuk cara kerjanya sendiri cukup sederhana teman-teman hanya perlu
memanggil identitas elemen pada HTML berupa nama tag, id, dan class yang harus
ditambahkan dengan kode style dimana jika layout pada HTML sendiri hanya berupa
border maka ketika teman-teman menambahkan style maka akan tampil bewarna dan
lebih elegan dan biasa dilakukan oleh designer ui/ux pemula maupun mahir yang
memang hoby didalam merangkai graphic dan contoh seperti kode sederhana dibawah ini.
<!DOCTYPE>
<html>
<head>
<title>Cara Menambah Style Sederhana Pada HML</title>
<style>
html, body {
margin: 0;
background-color: #ccc;
text-align:center;
}
.header {
height: 20%;
background-color: #00FFFF;
}
#content {
height: 60%;
}
#content .left {
float: left;
width: 20%;
height: 100%;
background-color: #CCCC00;
}
#content .center {
float: left;
width: 60%;
height: 100%;
background-color: #0099CC;
}
#content .right {
float: left;
width: 20%;
height: 100%;
background-color: #CC99CC;
}
.footer{
width: 100%;
height: 20%;
background-color: #99FF66;
}
</style>
</head>
<body>
<div class="header">Header</div>
<div id="content">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
