Sintaks CSS
Satu set aturan CSS terdiri dari Selector dan blok deklarasi:
Selector menunjuk ke elemen HTML yang ingin Anda style.
Blok deklarasi berisi satu deklarasi atau lebih yang dipisahkan oleh titik koma.
Setiap deklarasi menyertakan nama properti CSS dan value, dipisahkan oleh titik dua.
Deklarasi CSS selalu diakhiri dengan titik koma, dan blok deklarasi dikelilingi oleh tanda kurung kurawal.
Dalam contoh berikut, semua elemen
akan diratakan tengah, dengan warna teks merah:
p {
color: red;
text-align: center;
}
Selectors CSS
Selectors CSS digunakan untuk "menemukan" (atau memilih) elemen HTML berdasarkan nama elemen, id, kelas, atribut, dan lainnya.
Element Selector
Element Selector memilih elemen berdasarkan nama elemen.
Anda dapat memilih semua elemen <p> pada halaman seperti ini (dalam hal ini, semua elemen <p> akan diratakan tengah, dengan warna teks merah):
p {
text-align: center;
color: red;
}
id Selector
id Selector menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu.
ID elemen harus unik dalam satu halaman, jadi pemilih id digunakan untuk memilih satu elemen unik!
Untuk memilih elemen dengan id tertentu, tulis karakter hash (#), diikuti oleh id elemen.
Aturan style di bawah ini akan diterapkan ke elemen HTML dengan id = "para1":
#para1 {
text-align: center;
color: red;
}
Catatan: Nama id tidak dapat diawali dengan angka!
class Selector
class Selector memilih elemen dengan atribut kelas tertentu.
Untuk memilih elemen dengan kelas tertentu, tulis karakter periode (.), Diikuti dengan nama kelas.
Dalam contoh di bawah ini, semua elemen HTML dengan class = "center" akan berwarna merah dan di tengah-tengah:
.center {
text-align: center;
color: red;
}
Anda juga dapat menentukan bahwa hanya elemen HTML tertentu yang harus dipengaruhi oleh kelas.
Dalam contoh di bawah ini, hanya elemen <p> dengan class = "center" yang akan di-align-center:
p.center {
text-align: center;
color: red;
}
Elemen HTML juga dapat merujuk ke lebih dari satu kelas.
Pada contoh di bawah ini, elemen <p> akan ditata menurut kelas = "pusat" dan ke kelas = "besar":
<p class="center large">This paragraph refers to two classes.</p>
Catatan: Nama kelas tidak dapat dimulai dengan angka!
Grouping Selectors
Jika Anda memiliki elemen dengan definisi style yang sama, seperti ini:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Akan lebih baik untuk mengelompokkan selectors, untuk meminimalkan kode.
Untuk mengelompokkan selectors, pisahkan setiap selectors dengan koma.
Dalam contoh di bawah ini kami telah mengelompokkan selectors dari kode di atas:
h1, h2, p {
text-align: center;
color: red;
}
Komentar CSS
Komentar digunakan untuk menjelaskan kode, dan dapat membantu ketika Anda mengedit kode sumber di kemudian hari.
Komentar diabaikan oleh browser.
Komentar CSS dimulai dengan / * dan diakhiri dengan * /. Komentar juga dapat menjangkau banyak baris:
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
Lihat Tutorial Lengkap Tentang CSS Disini:
1. Artikel: Tutorial CSS
2. Playlist Youtube: Tutorial CSS Dasar