Dengan CSS , mudah untuk mengatur warna teks dalam dokumen. Jika Anda ingin paragraf di halaman Anda dirender dalam warna tertentu, Anda cukup menentukan bahwa dalam style sheet eksternal Anda dan browser akan menampilkan teks Anda dalam warna yang dipilih. Apa yang terjadi kemudian ketika Anda ingin mengubah warna hanya satu kata (atau mungkin hanya beberapa kata) dalam satu paragraf teks? Untuk itu, Anda harus menggunakan elemen inline seperti tag.
Pada akhirnya, mengubah warna satu kata atau sekelompok kecil kata dalam sebuah kalimat adalah mudah menggunakan CSS, dan tagnya adalah HTML yang valid, jadi jangan khawatir tentang ini menjadi semacam peretasan. Dengan pendekatan ini, Anda juga menghindari penggunaan tag dan atribut yang tidak digunakan lagi seperti "font", yang merupakan produk dari era HTML sebelumnya.
Artikel ini untuk memulai pengembang web yang kemungkinan baru untuk HTML dan CSS. Ini akan membantu Anda mempelajari cara menggunakan tag HTML dan CSS untuk mengubah warna teks tertentu di halaman Anda. Yang sedang berkata, ada beberapa kelemahan untuk metode ini, yang akan saya bahas di bagian akhir artikel ini. Untuk saat ini, baca terus untuk mempelajari langkah-langkah untuk mengubah warna teks ini! Ini sangat mudah dan harus memakan waktu sekitar 2 menit.
Langkah demi Langkah Instruksi
- Buka halaman web yang ingin Anda perbarui dalam editor HTML teks favorit Anda. Ini bisa berupa program seperti Adobe Dreamweaver atau editor teks sederhana seperti Notepad, Notepad ++, TextEdit, dll.
- Di dokumen, temukan kata-kata yang ingin Anda tampilkan dengan warna berbeda di halaman. Demi tutorial ini, mari gunakan beberapa kata yang berada dalam paragraf teks yang lebih besar. Teks itu akan terkandung dalam pasangan tag. Temukan satu dari dua kata yang warna yang ingin Anda edit.
- Tempatkan kursor Anda sebelum huruf pertama di kata atau kelompok kata yang ingin Anda ubah warnanya. Ingat, jika Anda menggunakan editor WYSIWYG seperti Dreamweaver, Anda bekerja dalam "tampilan kode" sekarang.
- Biarkan membungkus teks yang warnanya ingin kita ubah dengan tag, termasuk atribut kelas. Seluruh paragraf mungkin terlihat seperti ini: Ini adalah teks yang difokuskan pada sebuah kalimat.
- Kami baru saja menggunakan elemen inline, yang, untuk memberikan teks tertentu "hook" yang dapat kami gunakan dalam CSS. Langkah selanjutnya adalah melompat ke file CSS eksternal kami untuk menambahkan aturan baru.
- Di file CSS kami, mari tambahkan:
- .focus-text {
- warna: # F00;
- }
- Aturan ini akan mengatur bahwa elemen inline, yang, untuk ditampilkan dalam warna merah. Jika kami memiliki gaya sebelumnya yang mengatur teks dokumen kami menjadi hitam, gaya inline ini akan menyebabkan teks rentang difokuskan dan menonjol dengan warna yang berbeda. Kita juga bisa menambahkan gaya lain ke aturan ini, mungkin membuat teks miring atau berani untuk menekankannya lebih banyak lagi?
- Simpan halaman Anda.
- Uji halaman di browser web favorit Anda untuk melihat perubahan yang berlaku.
- Perhatikan bahwa selain itu, beberapa profesional web memilih untuk menggunakan elemen lain seperti atau pasangan tag. Tag ini digunakan untuk "bold" dan "italics" khususnya, tetapi tidak digunakan lagi dan diganti dengan dan. Namun, tag tetap berfungsi di peramban modern, sehingga banyak pengembang web menggunakannya sebagai pengait gaya dalam. Ini bukan pendekatan terburuk, tetapi jika Anda ingin menghindari elemen-elemen yang tidak digunakan lagi, saya sarankan untuk tetap menggunakan tag untuk jenis-jenis kebutuhan styling ini.
Tips dan Hal-Hal yang Harus Diperhatikan
Meskipun pendekatan ini berfungsi dengan baik untuk kebutuhan styling kecil, seperti jika Anda perlu mengubah hanya satu bagian kecil dari teks dalam dokumen, itu bisa dengan cepat menjadi tidak terkendali. Jika Anda menemukan bahwa halaman Anda dikotori dengan elemen inline, yang semuanya memiliki kelas unik yang Anda gunakan dalam file CSS Anda, Anda mungkin salah melakukannya, Ingat, semakin banyak tag yang ada di halaman Anda, semakin sulit kemungkinan akan mempertahankan halaman itu untuk seterusnya. Selain itu, tipografi web yang baik jarang memiliki banyak varian warna, dll. Di seluruh halaman!