bewoksatukosong.com | Halo Balik Lagi dengan Om bewok, Kali ini om bewok bakal ngeborong semua tutorial, Tutorial nya apa ? TUTORIAL CSS PART 4 : SELEKTOR CSS, COLOR CSS DAN BACKGROUND CSS. Yeahh, soalnya kenapa harus diborong ? karena memang materinya tidak terlalu banyak jadinya om bewok langsung sikat semuanya dan semoga mudah di mengerti ya, kalau ada yang belum mengerti kamu boleh bertanya kok dikomentar.
Oke langsung aja, ini tutorial awal banget sebenernya mengenai selektor.
Selektor adalah elemen yang ingin di berikan style. ya jadi ini sebenernya perantaralah dari html ke css untuk mengubah sesuatu. Oh iya penggunaan selektor ini tanpa menggunakan <> tidak seperti HTML ya.
Jika tag html kamu memberikan id maka di cssnya kamu bisa memberikan tanda # atau disebut juga kress#semoga bener tulisanya
Kalau misalnya tag html kamu berikan class maka di css nya kamu berikan tanda (.) titik ya, tanpa tanda kurung.
APA KAMU GATAU TAG HTML ?
Hmm kalau masih ga ngerti id dan class kamu bisa liat tutorial nya di html. inti nya om bewok kasih tau deh, ID di gunakan tag yang tidak sama maksud nya tidak boleh sama, tapi untuk class boleh sama.
Untuk menghemat waktu marilah untuk memulai codinganya
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belaja Selektor Bersama Om Bewok</title>
<style>
#om {
max-width: 100%;
height: 90px;
color: red;
background: black;
}
.tante {
max-width: 70%;
height: 50px;
color: white;
background: green;
}
</style>
</head>
<body>
<div id="om">
<h1>Om bewok ngantuk mau tidur udah jam 2.12 bikin tutorial ini padahal besok gawe.huahhh</h1>
</div>
<div class="tante">
<h2>Pantau terus ya www.bewoksatukosong.com bakal ada tutorial web-series stay tune ya</h2>
</div>
</body>
</html>
Maka hasilnya seperti dibawah ini
 |
| Gambar 1.1 Tampilan belajar menggunakan selektor |
Oke om bewok akan menjelaskan arti kodingan di atas seperti dibawah ini
#om {
max-width: 100%;
height: 90px;
color: red;
background: black;
}
Hmm oke satu - satu, seperti om bilang tanda pagar # digunakan untuk tag html ID, jadi setelah kita tulis pagar, kita masukin nama ID nya ya, lalu kita isi apa aja yang ingin di buat.
Max-width : untuk lebar
heihgt: tinggi dongg
color : nah ini untuk warna font nya ya
background : warna latar belakang nya ya, untuk bagian #om nya aja ya
.tante {
max-width: 70%;
height: 50px;
color: white;
background: green;
}
Nah untuk ini kita membuat nya (.) titik, karena kita membuat tag htmlnya menjadi class, seperti yang satunya lagi perintah nya yaitu max-width untuk lebar maksimal-nya.
height nya adalah tinggi dari class nya si tante
color : nah sudah di sebutin tadi untuk mengganti warna font
background behh udah di bilangin berkali - kalli untuk mengubah background warna si tante, nanti bakal ada tutorialnya mengganti background menggunakan foto full page, atau yang berubah - berubah stay tune terus ya.
Itu saja TUTORIAL CSS PART 4 : SELEKTOR CSS, COLOR CSS DAN BACKGROUND CSS, Selanjutnya kita akan membuat TUTORIAL CSS PART 5 : MENGENAI WIDTH DAN HEIGHT PADA CSS.
No comments:
Post a Comment