Anak Males – Sintaks dasar CSS terdiri dari tiga bagian utama yaitu selector, aturan (rule) dan properti (property). Aturan CSS menentukan elemen HTML mana yang akan diberi gaya, sedangkan properti menentukan gaya apa yang akan diterapkan pada elemen tersebut.
Mari kita bahas apa aja yang ada didalam sintaks css.
Struktur Dasar CSS
CSS (Cascading Style Sheets) memiliki beberapa struktur dasar yang bisa kamu gunakan untuk menata gaya halaman webmu.
Ini adalah beberapa struktur dasar CSS yang sering dipakai:
- Selector
- Rule
- Property
Mari kita bahas satu persatu.
Apa Itu Selector ?
Jadi CSS selector itu seperti cara kita menentukan elemen HTML mana yang mau kita beri gaya. Kita bisa pakai tag HTML, kelas, atau ID elemen untuk bikin selector.
Contohnya, kalau kita mau nge-set warna merah untuk semua elemen h1, kita bisa tulis kode CSS kayak gini:
h1 {
color: red;
}
Kita juga bisa pakai kelas atau ID untuk nentuin elemen yang lebih spesifik. Misalnya, kalau ada elemen div dengan kelas “container”, kita bisa bikin gaya untuk elemen itu dengan nulis kode CSS kayak gini:
.container {
background-color: blue;
}
Atau kalau ada elemen div dengan ID “header”, kita bisa bikin gaya untuk elemen itu dengan nulis kode CSS kayak gini:
#header {
font-size: 20px;
}
CSS selector itu keren karena bisa bikin kita gampang ngubah tampilan seluruh situs web dengan ngubah gaya elemen HTML yang udah kita pilih.
Macam Macam Selector
Sebenarnya ada 6 jenis selector di CSS yaitu :
- tag selector, seperti yang kita bahas diatas yang menggunakan elemen html, seperti h1
- class selector, yang ada diatas
- id selector, sudah dijelaskan diatas juga sih.
- universal selector, ini untuk menentukan gaya untuk semua elemen
- attribute selector, untuk menentukan gaya untuk elemen dengan atribut yang sesuai
- pseudo-class selector, menentukan gaya untuk elemen dengan kondisi khusus
- pseudo-element selector, menentukan gaya untuk bagian khusus dari elemen
Kita bahas sisanya aja.
1. Universal Selector
Universal selector itu seperti cara kita menentukan gaya untuk semua elemen di halaman web. Kita bisa pakai tanda bintang * untuk bikin universal selector.
Contohnya, kalau kita mau ngeset margin 0 untuk semua elemen, kita bisa tulis kode CSS kayak gini:
* {
margin: 0;
}
Jadi, kode di atas akan nge-set margin 0 untuk semua elemen di halaman web, mulai dari elemen div, p, h1, h2, dan seterusnya.
Universal selector ini bisa jadi keren kalau kita mau ngeset gaya yang sama untuk semua elemen di halaman web.
Tapi, kita harus hati-hati sama universal selector karena bisa ngeset gaya yang tidak sesuai dengan yang kita mau. Jadi, lebih baik pakai selector yang lebih spesifik kalau bisa.
2. Attribute Selector
Jadi attribute selector itu seperti cara kita menentukan gaya untuk elemen dengan atribut yang sesuai. Atribut itu fitur tambahan dari elemen HTML yang bisa ngasih tau kita informasi tambahan tentang elemen.
Buat pakai attribute selector, kita harus nentuin nama atribut yang kita mau di dalam tanda kurung kotak []. Kita juga bisa nentuin nilai atribut yang kita mau dengan nambahin operator sama dengan (=) setelah nama atribut.
Contohnya, kalau kita mau nge-set warna hijau untuk semua elemen tautan yang punya atribut href dengan nilai “https://google.com“, kita bisa tulis kode CSS kayak gini:
a[href="https://google.com"] {
color: green;
}
Kita juga bisa pakai operator tidak sama dengan (!=) atau masukin daftar nilai atribut yang diizinkan pakai operator tanda pipe (|). Misalnya, kalau kita mau nge-set warna merah untuk semua elemen input dengan atribut type yang tidak sama dengan “checkbox” atau “radio”, kita bisa tulis kode CSS kayak gini:
input[type!="checkbox"][type!="radio"] {
color: red;
}
Attribute selector itu keren karena bisa bikin kita gampang nentuin gaya untuk elemen dengan atribut yang spesifik. Ini bisa berguna banget kalau kita mau nentuin gaya yang beda-beda untuk elemen dengan atribut yang beda-beda.
3. Pseudo-class Selector
Oke, jadi pseudo-class selector itu seperti cara kita menentukan gaya untuk elemen dengan kondisi khusus. Kondisi khusus ini bisa jadi seperti elemen yang di-hover, di-klik, atau di-fokus.
Buat pakai pseudo-class selector, kita harus nulis nama pseudo-class setelah nama elemen yang kita mau, diikuti tanda titik dua (:). Contohnya, kalau kita mau nge-set garis bawah untuk semua elemen tautan ketika cursor diatasnya, kita bisa tulis kode CSS kayak gini:
a:hover {
text-decoration: underline;
}
Ada banyak pseudo-class yang bisa kita pakai, seperti :hover, :active, :focus, dan :visited. Kita juga bisa pakai pseudo-class yang lebih kompleks seperti :nth-child, :first-of-type, dan :last-of-type.
Pseudo-class selector ini keren karena bisa bikin kita gampang nentuin gaya untuk elemen dengan kondisi khusus. Ini bisa berguna banget kalau kita mau nentuin gaya yang beda-beda untuk elemen ketika di-klik, di-hover, atau di-fokus.
4. Pseudo-element Selector
Oke, jadi pseudo-element selector itu seperti cara kita menentukan gaya untuk bagian khusus dari elemen. Bagian khusus ini bisa jadi seperti baris pertama dari elemen paragraf, atau karakter pertama dari elemen tautan.
Buat pakai pseudo-element selector, kita harus nulis nama pseudo-element setelah nama elemen yang kita mau, diikuti tanda titik dua dua (::). Contohnya, kalau kita mau nge-set tebal untuk baris pertama dari semua elemen paragraf, kita bisa tulis kode CSS kayak gini:
p::first-line {
font-weight: bold;
}
Ada banyak pseudo-element yang bisa kita pakai, seperti ::before, ::after, ::first-line, dan ::first-letter. Kita juga bisa pakai pseudo-element yang lebih kompleks seperti ::selection, ::placeholder, dan ::backdrop.
Pseudo-element selector merupakan sintaks css yang bisa bikin kita gampang nentuin gaya untuk bagian khusus dari elemen. Ini bisa berguna banget kalau kita mau nentuin gaya yang beda-beda untuk bagian khusus dari elemen.
Apa Itu Rules CSS ?
Jadi rules CSS itu seperti aturan yang kita bikin untuk ngubah tampilan elemen HTML. Rules ini terdiri dari selector CSS yang menentukan elemen yang akan diberi gaya, diikuti dengan deklarasi gaya dalam tanda kurung kurawal {}.
Contohnya, kalau kita mau nge-set warna merah untuk semua elemen h1, kita bisa tulis kode CSS kayak gini:
h1 {
color: red;
}
Di atas itu contoh rules CSS yang sederhana. Kita bisa bikin rules yang lebih kompleks dengan menambahkan lebih banyak deklarasi gaya, atau dengan menggunakan selector yang lebih spesifik seperti kelas atau ID.
Rules CSS adalah sintaks yang bisa bikin kita gampang ngubah tampilan elemen HTML di halaman web. Kita bisa nentuin gaya yang sama untuk elemen yang sama, atau nentuin gaya yang beda-beda untuk elemen yang beda-beda.
Kamu bisa menggunakan satu blok deklarasi untuk lebih dari satu selektor. Contohnya, kamu bisa memberikan warna yang sama untuk semua tag <h1> sampai <h6> dengan menuliskannya seperti ini:
h1, h2, h3, h4, h5, h6 {
color: teal;
}Kamu juga bisa memisahkan selektor dengan koma, seperti ini:
h1,
h2,
h3,
h4,
h5,
h6 {
color: teal;
}Apa Itu Property CSS ?
Property CSS itu seperti fitur yang bisa kita atur untuk ngubah tampilan elemen HTML. Property ini bisa jadi seperti warna, ukuran font, jarak margin, atau posisi elemen.
Contohnya, kalau kita mau nge-set warna merah untuk elemen paragraf, kita bisa tulis kode CSS kayak gini:
p {
color: red;
}
Di atas itu contoh property CSS yang sederhana. Property ini bisa jadi lebih kompleks dengan menambahkan nilai tambahan, seperti ukuran font atau margin.
Property CSS ini salah satu sintaks yang bisa bikin kita gampang ngubah tampilan elemen HTML di halaman web. Kita bisa nentuin gaya yang sama untuk elemen yang sama, atau nentuin gaya yang beda-beda untuk elemen yang beda-beda.
Setiap properti CSS harus diakhiri dengan titik koma. Namun, jika hanya ada satu properti, kamu bisa mengabaikan titik koma tersebut. Selain itu, pastikan untuk menuliskan properti di dalam blok deklarasi yang sesuai.
Nilai untuk properti CSS bisa diapit dengan tanda petik atau tidak tergantung pada jenis nilainya. Nilai yang berupa teks biasanya diapit dengan tanda petik agar lebih mudah dibedakan dengan nilai lainnya.
Namun, jika nilai tersebut merupakan angka atau kata kunci, tanda petik tidak perlu digunakan. Contohnya:
p {
font-size: 16px; /* Nilai angka, tidak perlu diapit dengan tanda petik */
color: red; /* Nilai kata kunci, tidak perlu diapit dengan tanda petik */
content: 'Hello, World!'; /* Nilai teks, diapit dengan tanda petik */
}
Kenapa harus dikasih tanda petik ? Tentu saja karena ada spasi disitu.
Cara Menulis Komentar Di CSS
Oke, jadi komentar CSS itu seperti catatan yang kita tulis di dalam kode CSS untuk ngasih tau atau ngingetin tentang apa yang terjadi di sana. Komentar ini gak akan terlihat di halaman web, tapi bisa bantu kita atau orang lain yang liat kode CSS kita ngeh apa yang terjadi di sana.
Buat nulis komentar CSS, kita harus nulis tanda slash dan asterisk di depan komentar kita, diikuti tanda asterisk dan slash di belakang komentar kita. Contohnya, kalau kita mau nulis komentar tentang warna elemen h1, kita bisa tulis kode CSS kayak gini:
/* Ini adalah komentar tentang warna elemen h1 */
h1 {
color: red;
}
Di atas itu contoh komentar CSS yang sederhana. Komentar ini bisa jadi lebih panjang dengan menulis lebih banyak kata di dalamnya.
Komentar CSS ini salah satu sintaks yang keren karena bisa bantu kita atau orang lain yang liat kode CSS kita ngeh apa yang terjadi di sana. Kita bisa nulis komentar tentang apa yang terjadi di sana, atau ngingetin kita atau orang lain tentang apa yang harus diubah di sana.
Penutup
Baiklah, mungkin tutorial css kali ini, kita cukupkan sampai disini aja dulu, sampai jumpa di tutorial css lainnya.