Latihan - Pemilih

  • 6 menit

Dalam latihan sebelumnya, Anda menerapkan gaya ke elemen seperti html dan h1. Anda akan sering kali harus sedikit lebih sempit dalam menerapkan gaya.

Dalam latihan ini, Anda akan mengatur gaya untuk media sosial dan bagian pengalaman dan tautan di halaman.

Menerapkan Gaya ke Kelas dan ID

Anda akan mulai dengan mengatur gaya untuk media sosial dan bagian pengalaman.

  1. Kembali ke jendela vscode.dev yang Anda gunakan di latihan sebelumnya.

  2. Di dalam index.html, perhatikan section elemen dengan ID media sosial di baris 10; Anda akan menerapkan gaya ke bagian ini untuk mengatur warna menjadi biru.

  3. Di akhir style.css, tambahkan CSS berikut untuk mengatur warna untuk elemen media sosial:

    #social-media {
    color: blue;
}

  4. Halaman akan diperbarui, mengatur konten di bagian media sosial menjadi biru.

  5. Di dalam index.html, perhatikan dua bagian pada baris 28 dan 32 dengan pengalaman kelas; Anda akan menerapkan gaya ke bagian ini untuk memiringkan font.

  6. Di akhir style.css, tambahkan CSS berikut untuk memodifikasi font untuk elemen dengan kelas pengalaman :

    .experience {
    font-style: italic;
}

  7. Halaman akan diperbarui, mengatur font di dalam pengalaman menjadi miring.

Banyak pengembang web mengubah warna dan gaya hyperlink di halaman. Anda akan mengatur warna agar tautan menjadi hijau dan menyoroti tautan saat pengguna mengarahkan mouse ke atasnya.

  1. Di akhir style.css, tambahkan CSS berikut untuk mengatur tautan agar selalu berwarna hijau:

    a:visited {
    color: green;
}

a:link {
    color: green;
}

  2. Halaman diperbarui untuk menampilkan tautan sebagai hijau.

  3. Tambahkan CSS berikut ke akhir style.css untuk menyoroti tautan saat sedang diarahkan ke:

    a:hover {
    background-color: yellow;
}

  4. Arahkan mouse ke atas tautan di halaman dan perhatikan tautan disorot.

Tinjauan

Cuplikan layar berikut menunjukkan hasil CSS yang Anda terapkan. Anda menggunakan kelas, ID, dan kelas pseudo untuk menerapkan gaya ke elemen tertentu dan grup elemen logis.

Cuplikan layar render browser C S yang diterapkan ke kode H T M L.