Aturan CSS terdiri dari Selector dan blok deklarasi:
Selector menunjuk ke elemen HTML yang ingin diatur gaya tampilanya.
Blok deklarasi berisi satu atau lebih deklarasi yang dipisahkan oleh titik koma.
Setiap deklarasi mencakup nama properti CSS dan nilai, dipisahkan oleh titik dua.
Deklarasi CSS selalu berakhir dengan titik koma, dan blok deklarasi dikelilingi oleh kurung kurawal.
Pada contoh berikut semua elemen <p> akan berada di tengah-tengah, dengan warna teks merah:
Contoh
p {
warna merah;
Text-align: center;
}
Selector CSS
Selector CSS digunakan untuk "menemukan" (atau memilih) elemen HTML berdasarkan nama elemen, id, kelas, atribut, dan lainnya.
Selector elemen
Selektor Elemen memilih elemen berdasarkan nama elemen.
Kamu dapat memilih semua elemen <p> pada halaman seperti ini (dalam hal ini, semua elemen <p> akan menjadi center-aligned, dengan warna teks merah):
Contoh
P {
Text-align: center;
warna merah;
}
Pemilih id
Id selector menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu.
Id elemen harus unik di dalam halaman, jadi pemilih id digunakan untuk memilih satu elemen unik!
Untuk memilih elemen dengan id tertentu, tulis karakter hash (#), diikuti oleh id elemen.
Aturan gaya di bawah ini akan diterapkan ke elemen HTML dengan id = "para1":
Contoh
# para1 {
Text-align: center;
warna merah;
}
Catatan Catatan: Nama id tidak dapat dimulai dengan angka!
Selektor Class / Pemilihan Kelas
Selector kelas memilih elemen dengan atribut kelas tertentu.
Untuk memilih elemen dengan kelas tertentu, tulis karakter periode (.), Diikuti dengan nama kelas.
Pada contoh di bawah ini, semua elemen HTML dengan class = "center" akan berwarna merah dan center-aligned:
Contoh
.center {
Text-align: center;
warna merah;
}
Anda juga dapat menentukan bahwa hanya elemen HTML tertentu yang harus dipengaruhi oleh kelas.
Pada contoh di bawah ini, hanya <p> elemen dengan class = "center" yang berada di tengah-tengah:
Contoh
p.center {
Text-align: center;
warna merah;
}
Elemen HTML juga bisa merujuk ke lebih dari satu kelas.
Pada contoh di bawah ini, elemen <p> akan ditata sesuai dengan class = "center" dan ke class = "large":
Contoh
<p class = "center large"> Paragraf ini mengacu pada dua kelas. </ p>
Pengelompokan Selector
Jika memiliki elemen dengan definisi gaya yang sama, seperti ini:
h1 {
Teks-align: center;
warna merah;
}
h2 {
Text-align: center;
warna merah;
}
p {
Text-align: center;
warna merah;
}
Akan lebih baik mengelompokkan pemilih, untuk meminimalkan kode.
Untuk menyeleksi selektor, pisahkan setiap pemilih dengan tanda koma.
Pada contoh di bawah ini kami telah mengelompokkan pemilih dari kode di atas:
Contoh
h1, h2, p {
Text-align: center;
warna merah;
}
Komentar CSS
Komentar digunakan untuk menjelaskan kode, dan mungkin membantu saat mengedit kode sumber di kemudian hari.
Komentar diabaikan oleh browser.
Komentar CSS dimulai dengan / * dan diakhiri dengan * /. Komentar juga bisa mencakup banyak baris:
Contoh
p {
warna merah;
/ * Ini adalah komentar single-line * /
Text-align: center;
}
/* Ini adalah
Sebuah multi line
Komentar * /
Out Of Topic Show Konversi KodeHide Konversi Kode