Periksa pemilih
Pemilih CSS digunakan untuk memilih elemen untuk menerapkan gaya. Pemilih menawarkan banyak fleksibilitas dan daya. Pemilih memungkinkan Anda menerapkan gaya ke semua elemen atau ke satu elemen tertentu, dan bahkan satu huruf tertentu.
Ada tiga jenis inti pemilih:
- Elemen
- Kelas
- ID
Dengan menggunakan pemilih ini, Anda dapat menerapkan gaya ke banyak elemen atau beberapa elemen.
Pemilih Elemen
Pemilih elemen berlaku untuk semua elemen dengan tag tersebut. Elemen HTML apa pun dapat digunakan sebagai pemilih elemen. Menggunakan h1 memungkinkan Anda mengubah semua h1 elemen di halaman.
h1 {
/* style */
}
Pemilih Kelas
Semua elemen HTML memungkinkan Anda menambahkan class atribut. class digunakan untuk mengelompokkan elemen bersama-sama dan memungkinkan Anda menandainya untuk menerapkan pengaturan CSS.
Saat membuat resume, Anda kemungkinan akan memiliki bagian untuk riwayat pendidikan dan pekerjaan Anda. Menggunakan kelas akan memungkinkan Anda memformat elemen-elemen tersebut dengan gaya yang sama.
<div class="history">
<h2>Employer name</h2>
<h3>Job title</h3>
<h3>3 Jun 19 - 8 Jun 21</h3>
</div>
<div class="history">
<h2>School name</h2>
<h3>Major</h3>
<h3>Sep 2014 - May 2018</h3>
</div>
Dalam contoh sebelumnya, Anda mungkin ingin pemformatan untuk masing-masing div sama dengan yang menampilkan jenis informasi yang sama. Dengan menandai dua div elemen dengan kelas yang sama, Anda dapat menerapkan gaya CSS yang sama untuk masing-masing elemen.
Untuk mengidentifikasi kelas di CSS, Anda mengawali . di depan nama. Dalam contoh kami, Anda akan menggunakan .history.
.history {
/* your styles */
}
Jika menggunakan file CSS, Anda akan menulis definisi gaya kelas dalam file CSS. Atribut kelas dalam HTML mereferensikan definisi dari file CSS.
Kelas Pseudo
Kelas Pseudo memungkinkan Anda mengidentifikasi elemen berdasarkan lokasinya di halaman atau bagaimana pengguna berinteraksi dengan mereka.
Saat pengguna berinteraksi dengan halaman web, status berbagai elemen akan berubah. Pengguna dapat mengarahkan mouse mereka ke atas item, dan Anda ingin warna berubah saat mengarahkan kursor. Atau pengguna mungkin telah mengklik tautan. Setelah mereka mengunjungi tautan tersebut, Anda mungkin ingin memberi tahu mereka dengan mengubah gaya. CSS mendukung banyak kelas pseudo, yang diterapkan secara dinamis berdasarkan apa yang dilakukan atau telah dilakukan pengguna. Kelas Pseudo diawali oleh :, dan ditempatkan setelah pemilih lain.
Misalnya, untuk mengatur warna latar belakang tautan ke kuning saat pengguna mengarahkan kursor ke atasnya, Anda dapat menggunakan CSS berikut:
a:hover {
background-color: yellow;
}
Beberapa kelas pseudo yang paling umum tercantum dalam tabel berikut:
| Kelas Pseudo | Deskripsi |
|---|---|
hover |
Pengguna mengarahkan kursor mereka ke atas item |
visited |
Tautan yang telah diklik sebelumnya |
link |
Tautan yang tidak diundang |
first-child |
Anak pertama yang cocok dengan pemilih dalam hierarki |
last-child |
Anak terakhir yang cocok dengan pemilih dalam hierarki |
Penting
Dengan menggunakan elemen pseudo dan CSS, Anda bisa menghapus garis bawah dari hyperlink. Sebagai aturan umum, yang terbaik adalah meninggalkan garis bawah untuk tujuan aksesibilitas. Teks bergaris bawah memungkinkan pengguna mengidentifikasi tautan dengan cepat di halaman.
Pemilih ID
Mirip dengan kelas, ID memungkinkan Anda menerapkan gaya ke elemen. Tetapi, sementara kelas dapat diterapkan ke beberapa elemen, ID harus unik dan hanya merujuk ke satu elemen.
Pada resume, Anda mungkin memiliki bagian untuk media sosial, seperti X, GitHub, atau blog Anda. Jika Anda menginginkan gaya kustom untuk bagian tersebut, Anda dapat mengatur ID:
<div id="social-media">
<!-- list of links -->
</div>
ID diawali dengan # dalam CSS:
#social-media {
/* style */
}
Catatan
Konvensi penamaan standar untuk kelas dan ID adalah menggunakan "skewer-casing." Setiap kata adalah huruf kecil, dan dipisahkan dengan -. Nama skewer-case berasal dari bagaimana kata-kata muncul seolah-olah mereka bisa berada di skewer.