Aturan Dasar dan Cara Penulisan Kode CSS
Setelah kita mempelajari universal selector dan element pada CSS pada tutorial sebelumya, pada tutorial CSS ini kita akan mempelajari aturan dan cara penulisan kode CSS itu sendiri.
Agar lebih mudah memahami aturan dan cara penulisan CSS di bawah ini ada contoh kode HTML dan CSS sederhana yang kita akan bahas secara mendalam buat file latihan2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Latihan CSS</title>
<style type="text/css">
body {
font-size: 14px;
color: green;
}
p {
font-family: arial, calibri;
}
h1, h2 {
text-decoration: underline;
font-size: 16px;
color: brown;
}
</style>
</head>
<body>
<h1>Belajar CSS Tata Cara Aturan Penulisan Kode CSS</h1>
<h2>Untuk Pemula</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni fugit, nesciunt labore molestias voluptate asperiores consectetur inventore commodi reprehenderit tenetur cum, cumque facere accusantium nobis accusamus est, autem suscipit nostrum!</p>
<h2>Belajar CSS + HTML</h2>
</body>
</html>
Kode HTML dan CSS diatas pada bagian head diinput dengan menggunakan metode Internal Style Sheets, jadi disini kita akan fokus pada bagian CSS:
body {
font-size: 14px;
color: green;
}
p {
font-family: arial, calibri;
}
h1, h2 {
text-decoration: underline;
font-size: 16px;
color: brown;
}
Pada contoh diatas dapat dilihat aturan penulisan CSS sebagai berikut :
- Selector ditempatkan di awal penulisan CSS, pada contoh diatas body, p, h1, h2 adalah selector. Untuk selector lebih dari satu dipisahkan dengan tanda koma ( , ) .
- Setelah penulisan selector, isi dari property dan value atau nilai berada dalam kurung kurawal { } .
- Pada akhir property dipisahkan dengan titik koma ( ; )
- Bagi property yang memiliki dua kata spasi diganti dengan tanda hubung ( – ) sebagai contoh text-decoration.
- Untuk property pada baris akhir kita bisa mengabaikan tanda titik koma ( ; ) sebagai tanda tutup, tapi disarankan menggunakan tanda titik koma untuk mencegah apabila kita lupa menuliskan tanda titik koma pada saat menambahkan property lainya.
1 Response
[…] sebelumnya kita mempelajari aturan dasar dalam penulisan tag CSS, maka pada tutorial kali ini kita akan mempelajari cara mengatur fotn dengan class HTML dengan […]