Tutorial Belajar CSS Part 4: Aturan dan Cara Penulisan Kode CSS
Halo kawan-kawan,
Setelah mempelajari pengertian selector, property dan value dari CSS pada tutorial sebelumnya, dalam tutorial CSS kali ini kita akan mempelajari aturan dan cara penulisan kode CSS itu sendiri.
Aturan dan Cara Penulisan Kode CSS
Untuk lebih mudah memahami aturan dan cara penulisan kode CSS, dibawah ini adalah contoh kode HTML + CSS sederhana yang akan kita bahas secara lebih mendalam:
Ketik code berikut dan simpan sebagai aturan.css:
body {
font-size: 14px;
color: navy;
}
p {
font-family: calibri, helvetica, sans-serif;
}
h1, h2 {
text-decoration: underline;
font-size: 23px;
color: green;
}
Buka lagi teks editor ketik code dibawah, simpan sebagai aturancss.html pada halaman yang sama dengan file aturan.css diatas:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Penulisan CSS</title>
<link rel="stylesheet" type="text/css" href="aturan.css">
</head>
<body>
<h1>Belajar Aturan dan Cara Penulisan Kode CSS</h1>
<h2>Pengertian CSS</h2>
<p>CSS merupakan bahasanya desainer web
Namun sebenarnya, apa itu CSS?,
CSS adalah kumpulan kode yang digunakan
untuk mendefenisikan desain dari bahasa markup,
salah satunya adalah HTML.</p>
<p>Jadi dapat disimpulkan HTML ditujukan untuk membuat struktur,
atau konten dari halaman web.
Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut.
Istilahnya, “HTML for content, CSS for Presentation”.</p>
<h2>Menginput Kode CSS</h2>
<p>Secara garis besar, terdapat 3 cara menginput kode CSS ke dalam HTML,
yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.</p>
</body>
</html>
Hasil Code:
Kode HTML di atas memiliki kode CSS pada bagian head yang diinput menggunakan metode external style sheets dengan menggunakan tag <link>. Kita akan fokus pada bagian CSS saja:
body {
font-size: 14px;
color: navy;
}
p {
font-family: calibri, helvetica, sans-serif;
}
h1, h2 {
text-decoration: underline;
font-size: 23px;
color: green;
}
Seperti yang dapat dilihat dari contoh diatas, aturan penulisan CSS adalah sebagai berikut:
- Selector di tempatkan pada awal penulisan CSS. Dalam contoh diatas, body, p, h1 dan h2 adalah selector. Khusus untuk selector yang lebih dari 1 (seperti pada contoh selector terakhir: h1,h2) untuk memisahkan kedua selector tersebut, digunakan tanda koma (,)
- Setelah penulisan selector, seluruh isi dari property dan valuenya (nilainya), berada di antara kurung kurawal “{“ dan “}”.
- Diantara property satu dengan yang lainnya, dipisahkan dengan tanda titik koma (;)
- Diantara property dengan value (nilai), dipisahkan dengan anda titik dua (:).
- Untuk property yang memiliki 2 kata , spasi diantaranya digantikan dengan tanda hubung (-), contohnya: background-color dan border-left.
- Untuk properti yang berada pada baris terakhir, kita boleh mengabaikan tanda ‘;’ sebagai tanda tutup, tetapi disarankan agar tetap menggunakan tanda ‘;’, karena bisa saja kita lupa menuliskan tanda titik koma pada saat menambahkan properti lainnya. Contoh property tanpa tanda ‘;’ dapat di lihat pada contoh “text-decoration: underline”.
Untuk tutorial CSS berikutnya, kita akan membedah secara detail tentang Selector CSS dalam tutorial jenis-jenis dan arti dari selector CSS.