Sintaks CSS Beserta Penjelasannya
Juli 16, 2021
Add Comment
Apa CSS itu ?
CSS adalah singkatan dari Cascading Style Sheets. Berfungsi untuk mendefinisikan dan mengatur style atau gaya tampilan pada website yang kita buat agar lebih menarik, termasuk desain, tata letak dan variasi tampilan untuk berbagai perangkat dan ukuran layar.
Bagaimana Sintaks CSS itu ?
Format penulisan CSS umumnya terdiri dari tiga elemen, yaitu Selector, Property dan Value.
- Selector : Tag HTML yang kita pilih untuk diatur stylenya. misalnya <body> , <form>, <table>, <h1> dan lain sebagainya.
- Property : Jenis atribut Tag HTML. Dalam hal ini, semua atribut pada HTML dapat digunakan sebagai Property CSS, seperti color, border, font-size, margin dan lain sebagainya.
- Value : Pemberian nilai sesuai properti yang kita deklarasikan. Misal property color dapat memiliki value white atau #fff, property margin dapat memiliki value 10px, 10% atau auto, dan lain-lain.
Jadi, format penulisan/sintaks CSS adalah sebagai berikut :
selector { property: value }
Penjelasan : table adalah selector, border adalah property dan 1px solid #C00 adalah value dari property tersebut.
Kita dapat menentukan selector dengan berbagai cara sederhana sesuai keinginan kita. Berikut berbagai contoh cara menentukan selector.
Type Selectors
ini adalah cara menentukan selector yang sama dengan contoh yang saya jelaskan di atas. Berikut contoh lainnya.
h1 {
color: #F1F1F1;
}Penjelasan : CSS tersebut merubah warna seluruh Headings level 1 menjadi warna merah.
Universal Selectors
Dengan cara ini, kita dapat mengatur seluruh tampilan web hanya dengan 1 selector.
* {
color: #000000;
}Penjelasan : CSS di atas mengatur tampilan web menjadi warna hitam semuanya. Karena dengan selector universal(*), kita dapat mengatur seluruh elemen web yang kita buat.
Descendans Selectors
Selector tipe digunakan apabila kita ingin mengatur style ke elemen tertentu hanya jika berada di dalam elemen tertentu. Seperti yang di tunjukkan pada contoh di bawah ini :
ul em {
color: #000000;
}Penjelasan : Style/CSS hanya akan berlaku untuk elemen <em> saat berada di dalam tag <ul>.
Class Selectors
Kita dapat menentukan style berdasarkan atribut class dari elemen. Semua elemen yang memiliki class tersebut akan diformat sesuai dengan aturan yang telah ditetapkan.
.white{
color: #ffffff;
}Penjelasan : CSS diatas membuat konten berwarna putih untuk setiap elemen dengan atribut class yang bernama white dalam dokumen html kita. Kita dapat membuat sedikit lebih khusus. Sebagai contoh:
h1.white {
color: #000000;
}Penjelasan : CSS diatas membuat konten berwarna putih hanya pada elemen <h1> dengan atribut kelas yang disetel menjadi white.
Kita dapat menerapkan lebih dari satu selector pada sebuah class ke elemen yang diberikan, Perhatikan contoh berikut ini.
<p class="center bold">
This para will be styled by the classes center and bold.
</p>Penjelasan : Kita dapat mengatur elemen <p> pada dokumen HTML tersebut dengan menggunakan class center dan bold.
ID Selectors
Kita dapat menentukan style berdasarkan atribut id dari elemen. Semua elemen yang memiliki id tersebut akan diformat sesuai style yang kita tentukan.
#black {
color: #000000;
}Penjelasan : Style diatas membuat konten berwarna hitam untuk setiap elemen dengan atribut id yang disetel ke black dalam dokumen HTML kita. Kita juga bisa membuatnya sedikit lebih khusus. Misalnya:
h1#black {
color: #000000;
}Penjelasan : Style diatas membuat konten berwarna hitam hanya elemen <h1> dengan atribut id disetel menjadi black.
Kekuatan sejati dari selector id adalah ketika digunakan sebagai pondasi untuk descendant selectors, misalnya:
#black h2 {
color: #000000;
}Penjelasan : Dalam contoh diatas, semua headings level 2 akan ditampilkan dalam warna hitam saat judul tersebut berada pada tag yang memiliki atribut id yang disetel menjadi black.
Child Selectors
Kita telah mengetahui descendant selectors. Ada satu lagi jenis selector, yang sangat mirip dengan descendant selectors namun memiliki fungsi yang berbeda. Perhatikan contoh berikut:
body > p {
color: #000000;
}Penjelasan : Contoh CSS diatas akan membuat semua paragraf berwarna hitam jika mereka menjadi child/anak langsung dari elemen <body>. Paragraf lain yang dimasukkan ke dalam elemen lain seperti <div> atau <td> tidak akan terkena efek dari CSS diatas.
Attribute Selectors
Kita juga dapat menerapkan style ke elemen HTML dengan atribut tertentu. Aturan style di bawah ini akan cocok dengan semua elemen input yang memiliki atribut tipe text.
input[type = "text"]{
color: #000000;
}Penjelasan : Keuntungan dari metode ini adalah elemen <input type = "submit"/> tidak terpengaruh, dan warnanya hanya diterapkan pada bidang teks yang diinginkan.
Berikut contoh attribute selectors lainnya.
p [lang] - Memilih semua elemen paragraf dengan atribut lang.
p [lang = "fr"] - Memilih semua elemen paragraf yang atribu lang nya memiliki value persis "fr".
p [lang ~ = "fr"] - Memilih semua elemen paragraf yang atribut lang berisi kata "fr".
p [lang | = "en"] - Memilih semua elemen paragraf yang atribut lang berisi value yang persis "en", atau dimulai dengan "en-".
Multiple Style Rules
Kita mungkin perlu mendefinisikan beberapa aturan style untuk satu elemen. Kita dapat menentukan aturan ini untuk menggabungkan beberapa property dan value yang sesuai ke dalam satu blok seperti yang didefinisikan pada contoh berikut:
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}Penjelasan : Di sini semua pasangan property dan value dipisahkan oleh tanda titik koma (;). Kita dapat menulisnya dalam satu baris atau beberapa baris. Agar mudah dibaca, maka kita sebaiknya menyimpannya dalam garis yang terpisah.
Grouping Selectors
Kita bisa menerapkan style pada banyak selectors jika dibutuhkan. Pisahkan saja selectors dengan koma, seperti yang diberikan pada contoh berikut.
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}Penjelasan : ini mendefinisikan aturan style akan berlaku untuk elemen h1, h2 dan h3 juga. Urutan penulisan tidak berpengaruh. Semua elemen dalam selectors akan memiliki style sesuai property dan value yang kita tentukan.
Kita juga dapat menggabungkan berbagai selectors id bersamaan seperti yang ditunjukkan di bawah ini:
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}Penjelasan : CSS di atas hanya akan berlaku pada setiap elemen yang memiliki salah satu atau semua selectors class yang dipilih, yaitu class content, footer dan supplement.
Alhamdulillah, itulah beberapa sintaks/format penulisan CSS yang dapat saya jelaskan.
Semoga penjelasan sederhana di atas bermanfaat dan dapat menambah wawasan temen-temen semua.
Apabila temen-temen ingin belajar lebih banyak dan detail, berikut saya sertakan link referensi untuk belajar CSS. Silakan klik => Referensi Belajar CSS.
0 Response to "Sintaks CSS Beserta Penjelasannya"
Posting Komentar