Syntax dan Selector CSS

1 66

Sintaks CSS

Aturan CSS terdiri dari pemilih dan blok deklarasi:

Pemilih menunjuk ke elemen HTML yang ingin Anda gaya.

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.

Dalam contoh berikut semua elemen <p> akan berada di tengah-tengah, dengan warna teks merah:

Contoh


p
{
color: red;text-align: center;}

Coba Layout Editor »


Selector CSS

Penyeleksi CSS digunakan untuk “menemukan” (atau memilih) elemen HTML berdasarkan nama elemen, id, kelas, atribut, dan lainnya.


Pemilih elemen

Elemen pemilih memilih elemen berdasarkan nama elemen.

Anda dapat memilih semua elemen

pada halaman seperti ini (dalam hal ini, semua elemen

akan menjadi center-aligned, dengan warna teks merah):

Contoh


p
{
text-align: center;color: red;}

Coba Layout Editor »


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;color: red;}

Coba Layout Editor »

Catatan: Nama id tidak bisa dimulai dengan angka!

Pemilih 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;
color: red;
}

Coba Layout Editor »

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 akan menjadi center-aligned:

Contoh


p.center {
text-align: center;
color: red;
}

Coba Layout Editor »

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”>This paragraph refers to two classes.</p>

Coba Layout Editor »

Catatan: Nama kelas tidak bisa dimulai dengan angka!


Pengelompokan pemilih

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;
}

Akan lebih baik mengelompokkan pemilih, untuk meminimalkan kode.

Untuk menyeleksi penyeleksi, pisahkan setiap pemilih dengan koma.

Pada contoh di bawah ini kita telah mengelompokkan pemilih dari kode di atas:

Contoh


h1, h2, p
{
text-align: center;
color: red;}

Coba Layout Editor »


Komentar CSS

Komentar digunakan untuk menjelaskan kode, dan mungkin membantu saat Anda 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
{
color: red;

/* This is a single-line comment */

text-align: center;

}/* This is
a multi-line
comment */

Coba Layout Editor »

Get real time updates directly on you device, subscribe now.

1 Comment
  1. […] Penjelasan CSS Syntax » […]

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.