Ubah Warna Word Dengan Tag SPAN di CSS

Anda dapat menentukan warna font, ukuran, dan parameter lainnya dalam stylesheet CSS eksternal. Namun, jika Anda ingin mengubah warna hanya satu kata atau frasa, cara termudah dan paling sederhana adalah menggunakan tag sebaris. CSS sebaris seperti yang terdengar: Itu ditambahkan di HTML halaman, bukan di stylesheet eksternal.

Hindari penggunaan tag, yang sudah tidak digunakan lagi.

Berikut cara mengubah warna kata menggunakan tag:

  1. Dengan menggunakan editor teks atau HTML pilihan Anda dalam mode tampilan kode, tempatkan kursor Anda sebelum huruf pertama dari kata atau kelompok kata yang ingin Anda warnai.

  2. Mari bungkus teks yang warnanya ingin kita ubah dengan tag, termasuk atribut class. Seluruh paragraf mungkin terlihat seperti ini: Ini adalah teks yang difokuskan dalam sebuah kalimat.

  3. Berikan teks tertentu "pengait" yang dapat kita gunakan di CSS. Langkah kita selanjutnya adalah melompat ke file CSS eksternal kita untuk menambahkan aturan baru.

    Di file CSS kita, mari tambahkan:

    .fokus-teks {

    instagram viewer

     warna: #F00;

    }

    Aturan ini akan mengatur elemen sebaris itu, the, untuk ditampilkan dalam warna merah. Jika kita memiliki gaya sebelumnya yang mengatur teks dokumen kita menjadi hitam, gaya sebaris ini akan menyebabkan teks rentang menjadi fokus dan menonjol dengan warna yang berbeda. Kami juga dapat menambahkan gaya lain ke aturan ini, mungkin membuat teks miring atau tebal untuk lebih menekankannya?

  4. Simpan halaman Anda.

    Uji halaman di browser web favorit Anda untuk melihat perubahan yang berlaku.

    Perhatikan bahwa selain dari, beberapa profesional web memilih untuk menggunakan elemen lain seperti pasangan tag atau. Tag ini dulunya khusus untuk huruf tebal dan miring, tetapi tidak digunakan lagi dan diganti dengan dan. Tag masih berfungsi di browser modern, namun, begitu banyak pengembang web menggunakannya sebagai pengait gaya inline. Ini bukan pendekatan terburuk, tetapi jika Anda ingin menghindari elemen yang tidak digunakan lagi, kami sarankan untuk tetap menggunakan tag untuk kebutuhan gaya seperti ini.

Tips dan Hal yang Harus Diwaspadai

Meskipun pendekatan ini berfungsi dengan baik untuk kebutuhan gaya kecil seperti jika Anda hanya perlu mengubah satu bagian kecil teks dalam dokumen, pendekatan ini dapat dengan cepat lepas kendali. Jika Anda menemukan bahwa halaman Anda dipenuhi dengan elemen sebaris, yang semuanya memiliki kelas unik yang Anda gunakan dalam file CSS, Anda dapat melakukannya dengan salah, Ingat, semakin banyak tag ini ada di halaman Anda, semakin sulit untuk mempertahankan halaman itu meneruskan. Selain itu, tipografi web yang baik jarang memiliki banyak varian warna, dll. di seluruh halaman.