Latihan - Pemilih

  • 6 menit

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

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

Menerapkan gaya ke kelas dan ID

Anda mulai dengan mengatur gaya untuk bagian media sosial dan 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 menerapkan gaya ke bagian ini untuk mengatur warna ke biru.

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

    #social-media {
    color: blue;
}

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

  5. Di dalam index.html, perhatikan dua bagian di baris 28 dan 32 dengan pengalaman kelas; Anda menerapkan gaya ke bagian-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 diperbarui, mengatur pengalaman font inside ke miring.

Banyak pengembang web mengubah warna dan gaya hyperlink di halaman. Anda mengatur warna tautan menjadi hijau dan menyorot tautan saat pengguna mengarahkan kursor 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.