CSS - Sintaks

CSS terdiri dari aturan gaya yang diinterpretasikan oleh browser dan kemudian diterapkan ke elemen terkait dalam dokumen Anda. Aturan gaya dibuat dari tiga bagian -

Selector- Selektor adalah tag HTML tempat gaya akan diterapkan. Ini bisa berupa tag apa pun seperti <h1> atau <table> dll.
Property- Properti adalah jenis atribut dari tag HTML. Sederhananya, semua atribut HTML diubah menjadi properti CSS. Bisa berupa warna , batas , dll.
Value- Nilai ditetapkan ke properti. Misalnya, properti warna dapat memiliki nilai merah atau # F1F1F1 dll.

Anda dapat menempatkan Sintaks Aturan Gaya CSS sebagai berikut -

selector { property: value }

Example - Anda dapat menentukan batas tabel sebagai berikut -

table{ border :1px solid #C00; }

Di sini tabel adalah selektor dan perbatasan adalah properti dan nilai yang diberikan 1px solid # C00 adalah nilai properti itu.

Anda dapat menentukan pemilih dengan berbagai cara sederhana berdasarkan kenyamanan Anda. Biarkan saya menempatkan selektor ini satu per satu.

Type Selectors

Ini adalah selektor yang sama yang telah kita lihat di atas. Sekali lagi, satu contoh lagi untuk memberi warna pada semua heading level 1 -

h1 {
   color: #36CFFF; 
}

The Universal Selectors

Daripada memilih elemen dari jenis tertentu, pemilih universal cukup cocok dengan nama jenis elemen apa pun -

* { 
   color: #000000; 
}

Aturan ini membuat konten setiap elemen dalam dokumen kita menjadi hitam.

The Descendant Selectors

Misalkan Anda ingin menerapkan aturan gaya ke elemen tertentu hanya jika itu terletak di dalam elemen tertentu. Seperti yang diberikan dalam contoh berikut, aturan gaya akan diterapkan ke elemen <em> hanya jika berada di dalam tag <ul>.

ul em {
   color: #000000; 
}

Para Penyeleksi Kelas

Anda dapat menentukan aturan gaya berdasarkan atribut kelas elemen. Semua elemen yang memiliki kelas tersebut akan diformat sesuai dengan aturan yang ditentukan.

.black {
   color: #000000; 
}

Aturan ini membuat konten berwarna hitam untuk setiap elemen dengan atribut class disetel menjadi hitam di dokumen kami. Anda bisa membuatnya sedikit lebih khusus. Misalnya -

h1.black {
   color: #000000; 
}

Aturan ini membuat konten menjadi hitam hanya untuk elemen <h1> dengan atribut class disetel ke hitam .

Anda dapat menerapkan lebih dari satu pemilih kelas ke elemen tertentu. Perhatikan contoh berikut -

<p class = "center bold">
   This para will be styled by the classes center and bold.
</p>

Pemilih ID

Anda dapat menentukan aturan gaya berdasarkan atribut id dari elemen. Semua elemen yang memiliki id tersebut akan diformat sesuai dengan aturan yang ditentukan.

#black {
   color: #000000; 
}

Aturan ini membuat konten berwarna hitam untuk setiap elemen dengan atribut id disetel menjadi hitam di dokumen kami. Anda bisa membuatnya sedikit lebih khusus. Misalnya -

h1#black {
   color: #000000; 
}

Aturan ini membuat konten menjadi hitam hanya untuk elemen <h1> dengan atribut id disetel menjadi hitam .

Kekuatan sebenarnya dari pemilih id adalah ketika mereka digunakan sebagai dasar untuk pemilih keturunan, Misalnya -

#black h2 {
   color: #000000; 
}

Dalam contoh ini, semua judul tingkat 2 akan ditampilkan dalam warna hitam ketika judul tersebut berada dalam tag yang atribut id-nya disetel ke hitam .

The Child Selectors

Anda telah melihat pemilih keturunan. Ada satu jenis selector lagi, yang sangat mirip dengan turunan tetapi memiliki fungsi yang berbeda. Perhatikan contoh berikut -

body > p {
   color: #000000; 
}

Aturan ini akan membuat semua paragraf menjadi hitam jika mereka adalah anak langsung dari elemen <body>. Paragraf lain yang dimasukkan ke dalam elemen lain seperti <div> atau <td> tidak akan mempengaruhi aturan ini.

The Attribute Selectors

Anda juga dapat menerapkan gaya ke elemen HTML dengan atribut tertentu. Aturan gaya di bawah ini akan cocok dengan semua elemen masukan yang memiliki atribut tipe dengan nilai teks -

input[type = "text"] {
   color: #000000; 
}

Keuntungan metode ini adalah elemen <input type = "submit" /> tidak terpengaruh, dan warna hanya diterapkan ke bidang teks yang diinginkan.

Ada aturan berikut yang diterapkan ke pemilih atribut.

p[lang]- Memilih semua elemen paragraf dengan atribut lang .
p[lang="fr"]- Memilih semua elemen paragraf yang atribut langnya memiliki nilai persis "fr".
p[lang~="fr"]- Memilih semua elemen paragraf yang atribut langnya mengandung kata "fr".
p[lang|="en"]- Memilih semua elemen paragraf yang atribut lang-nya berisi nilai yang persis "en", atau dimulai dengan "en-".

Beberapa Aturan Gaya

Anda mungkin perlu menentukan beberapa aturan gaya untuk satu elemen. Anda dapat menentukan aturan ini untuk menggabungkan beberapa properti dan nilai terkait ke dalam satu blok seperti yang ditentukan dalam contoh berikut -

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Di sini semua pasangan properti dan nilai dipisahkan oleh a semicolon (;). Anda dapat menyimpannya dalam satu baris atau beberapa baris. Untuk keterbacaan yang lebih baik, kami menyimpannya di baris terpisah.

Untuk sementara, jangan repot-repot tentang properti yang disebutkan di blok di atas. Properti ini akan dijelaskan di bab selanjutnya dan Anda dapat menemukan detail lengkap tentang properti di Referensi CSS

Pengelompokan Selektor

Anda dapat menerapkan gaya ke banyak pemilih jika Anda suka. Pisahkan saja penyeleksi dengan koma, seperti yang diberikan dalam contoh berikut -

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Aturan mendefinisikan gaya ini akan berlaku untuk elemen h1, h2 dan h3 juga. Urutan daftar tidak relevan. Semua elemen di pemilih akan memiliki deklarasi terkait yang diterapkan padanya.

Anda dapat menggabungkan berbagai pemilih id bersama-sama seperti yang ditunjukkan di bawah ini -

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}