Setelah mengenal tentang CSS, kali ini saya akan menjelaskan mengenai penulisan syntax dan selector dalam CSS. Dalam bahasa pemrograman, stylesheet dan semacamnya, pasti memiliki penulisan syntaxnya masing-masing. Dalam CSS, penulisan syntaxnya sebagai berikut.
body{ background-color: green; }
Keterangan :
- Selector, digunakan untuk mencari bagian web yang ingin diubah tampilannya. Selector bisa berupa tag HTML itu sendiri, nama class tertentu dan sebagainya. Dalam script diatas, bagian web yang ingin diubah adalah yang memiliki tag <body>.
- Declaration, baris perintah untuk mendeklarasi script code yang ingin diubah menggunakan CSS yang diapit dengan kurung kurawa. Terdiri dari property dan value. Dalam script diatas, deklarasi yang digunakan adalah { background-color: green; }.
- Property, jenis tampilan yang ingin digunakan. Dalam script diatas, menggunakan property "background-color: ".
- Value, nilai yang diberikan kepada property. Dalam script diatas, menerapkan value "green: pada property "background-color: ".
Jenis-Jenis Selector CSS
1. Selector Sederhana
Selector ini memilih elemen tag, id ataupun class dalam HTML. Misalnya ada tag <p> yang ingin diubah tampilannya menjadi tebal, berukuran 14 piksel dan menggunakan rata tengah. Maka script kode yang ditulis sebagai berikut :
Script HTML.
<body>
<p>Ini Contoh Paragraf</p>
</body>
Script CSS.
p {
font-weight: bold;
font-size: 14px;
text-align: center;
}
Hasil di browser :
.png)
Selector ID dan Class
Jika ingin menerapkan selector pada ID dan class, maka diperlukan tambahan simbol hash (#) pada ID dan dot / titik (.) pada class. Misal untuk mengubah tag <p> dengan id "p1" dan <div> dengan class "bagian_1", maka script yang digunakan adalah sebagai berikut:
Script HTML.
<body>
<p id="p1">Ini Contoh Paragraf</p>
<div class="bagian_1">
<h3>Bagian Teks 1</h3>
<p>Paragraf</p>
</div>
</body>
Script CSS.
#p1 {
font-weight: bold;
font-size: 15px;
text-align: center;
}
.bagian_1 {
width: 100%;
background-color: red;
color: white;
}
Hasil di browser.
.png)
Universal Selector
Selector ini akan mengubah tampilan website secara keseluruhan. Simbol yang digunakan adalah * (bintang). Misalnya sebagai berikut :
Script HTML.
<body>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
</body>
Script CSS.
* {
font-weight: bold;
background-color: gray;
}
Hasil di browser.
.png)
Grouping Selector
Selector ini akan menggabungkan lebih dari satu selector sekaligus. Misalnya sebagai berikut :
Script HTML.
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
Script CSS yang biasa ditulis seperti ini.
h1 {
color: red
}
h2 {
color: red
}
h3 {
color: red
}
h4 {
color: red
}
h5 {
color: red
}
h6 {
color: red
}
Namun dengan grouping selector, script diatas bila digabungkan akan menjadi seperti ini.
h1, h2, h3, h4, h5, h6 {
color: red
}
Hasil di browser.
.png)
2. Selector Combinator
Selektor combinator digunakan untuk memilih suatu elemen yang memiliki hubungan dengan elemen lain.
Descendant Selector
Descendant selector merupakan selektor untuk memilih elemen di dalam elemen (sampai kedalaman tak terhingga). Sehingga selector ini hanya akan memengaruhi elemen di dalamnya saja. Misalnya elemen tag <p> didalam elemen <div> ditulis sebagai berikut.
<body>
<h1>Heading 1</h1>
<div>
<h1>Heading 1</h1>
</div>
</body>
Maka untuk memberitahu tag <h1> yang ada didalam elemen tag <div> tanpa mengubah tag <h1> diluar elemen tag <div>, dapat ditulis sebagai berikut.
div h1 {
text-align: center;
}
Hasil di browser :
.png)
Child Selector
Mirip dengan descendant selector, bedanya selector ini harus benar-benar spesifik tingkat elemen levelnya. Misalnya sebagai berikut.
<body>
<div>
<p>Contoh Paragraf 1</p>
<p>Contoh Paragraf 2</p>
<p>Contoh Paragraf 3</p>
<section><p>Contoh Paragraf 4</p></section>
<p>Contoh Paragraf 5</p>
</div>
</body>
Terdapat 2 level disini, yaitu <p> didalam <div> (2 level), lalu <p> didalam <section> yang juga didalam <div> (3 level). Jika menggunakan descendant selector, yakni cukup menulis div p {} saja yang dimana semua tag <p> didalam <div> akan berubah. Meskipun tag <p> yang didalam <section> dan <div>, maka <p> tersebut akan terkena efeknya. Jika menggunakan child selector, maka kita bisa memilih tag <p> di level yang telah ditentukan seperti berikut.
div p {
color: blue;
}
div > p {
color: red;
}
Hasil di browser.
.png)
Dimana yang akan terpengaruh hanyalah <p> di level kedua karena div > p {} akan langsung merujuk pada <div> dan <p> yang mengabaikan tag <section>.
Adjacent Sibling Selector
Selector ini akan memilih elemen tertentu yang dipanggil setelah elemen sebelumnya. Dengan menggunakan simbol + (plus). Misalnya sebagai berikut.
Script HTML.
<body>
<div>
<p>Contoh Paragraf 1</p>
<p>Contoh Paragraf 2</p>
<p>Contoh Paragraf 3</p>
</div>
<div>
<h3>Contoh Heading 3</h3>
</div>
<p>Contoh Paragraf 1 diluar tag div</p>
<p>Contoh Paragraf 2 diluar tag div</p>
<p>Contoh Paragraf 3 diluar tag div</p>
</body>
Dimana terdapat <p> didalam <div> dan <p> diluar <div>. Dengan sibling selector, maka akan diambil <p> yang berada diluar <div>.
Script CSS.
div + p {
font-weight: bold;
background-color: red;
}
Hasil di browser.
General Sibling Selector
Jika adjacent sibling selector hanya memilih satu elemen <p> saja setelah elemen <div>, maka general sibling selector akan memilih semua <p> setelah <div> dengan menggunakan simbol ~. Misalnya sebagai berikut.
Script CSS.
div ~ p {
font-weight: bold;
background-color: red;
}
Hasil di browser.
Dimana semua teks "Contoh Paragraf ... diluar tag div" akan terbaca oleh CSS.
Kesimpulan
Untuk menguasai pemrograman CSS, maka diperlukan pemahaman terhadap syntax dan selector didalamnya. Dengan memahami selector ini, anda dapat membuat script code menjadi lebih rapih dan terstruktur.
0 Komentar