CSS Syntax
Sebuah CSS aturan-set terdiri dari pemilih dan blok deklarasi:
Pemilih poin ke elemen HTML Anda ingin bergaya.
Blok deklarasi berisi satu atau lebih deklarasi dipisahkan oleh titik koma.
Setiap deklarasi termasuk CSS nama properti dan nilai, yang dipisahkan oleh titik dua.
Sebuah deklarasi CSS selalu berakhir dengan titik koma, dan blok deklarasi dikelilingi oleh kurung kurawal.
Pada contoh berikut semua <p> elemen akan pusat-blok, dengan warna teks merah:
CSS Selectors
CSS digunakan untuk "find" (atau pilih) elemen HTML berdasarkan mereka nama elemen, id, kelas, atribut, dan banyak lagi.
Unsur Pemilih
Pemilih elemen memilih elemen berdasarkan nama elemen.
Anda dapat memilih semua <p> elemen pada halaman seperti ini (dalam hal ini, semua <p> elemen akan pusat-blok, dengan warna teks merah):
Id Selector
Pemilih id menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu.
Id dari elemen harus unik dalam sebuah halaman, sehingga pemilih id digunakan untuk memilih salah satu elemen yang unik!
Untuk memilih elemen dengan id tertentu, menulis hash (#) karakter, diikuti oleh id dari elemen.
Gaya aturan di bawah ini akan diterapkan pada elemen HTML dengan id="para1" :
 | Catatan: Sebuah nama id tidak dapat memulai dengan angka! |
|---|
Kelas Selector
Pemilih kelas memilih elemen dengan atribut kelas khusus.
Untuk memilih elemen dengan kelas tertentu, menulis period (.) Karakter, diikuti dengan nama kelas.
Pada contoh di bawah, semua elemen HTML dengan class="center" akan merah dan pusat-blok:
Anda juga dapat menentukan bahwa elemen HTML hanya khusus harus dipengaruhi oleh kelas.
Pada contoh di bawah, hanya <p> elemen dengan class="center" akan center-aligned:
elemen HTML juga dapat merujuk ke lebih dari satu kelas.
Pada contoh di bawah ini, <p> elemen akan ditata sesuai dengan class="center" dan class="large" :
| Catatan: nama kelas tidak dapat memulai dengan angka! |
|---|
pengelompokan Selectors
Jika Anda memiliki elemen dengan definisi gaya yang sama, seperti ini:
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}Ini akan lebih baik untuk kelompok pemilih, untuk meminimalkan kode.
Untuk pemilih kelompok, memisahkan setiap pemilih dengan koma.
Pada contoh di bawah kita telah dikelompokkan pemilih dari kode di atas:
CSS Komentar
Komentar digunakan untuk menjelaskan kode, dan dapat membantu ketika Anda mengedit kode sumber di kemudian hari.
Komentar diabaikan oleh browser.
Sebuah komentar CSS dimulai dengan /* and ends with */ . Komentar juga dapat span beberapa baris:
Contoh
p
{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
Cobalah sendiri " Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»