Cara Mengubah Warna Teks Situs Web Anda Dengan CSS

Memiliki kendali atas situs web Anda adalah elemen penting dari desain web. Di dunia yang ideal, Anda harus dapat mengubah setiap aspek desain situs Anda tanpa harus berkompromi pada produk jadi.

Namun, tentu saja, situs web sering kali keras kepala. Tidak selalu mungkin untuk mencapai hasil yang Anda inginkan tanpa mempelajari dunia CSS. Mari kita lihat bagaimana Anda dapat mengubah warna teks dengan CSS di situs web Anda untuk memberi Anda gambaran tentang bagaimana Anda dapat mencapai lebih banyak dengan kekuatan CSS.

Mengubah Warna Teks Situs Web Dengan CSS

CSS telah dirancang dengan hati-hati untuk memastikan bahwa itu memberi desainer kekuatan atas proyek situs web mereka. Sangat mudah untuk mengubah warna teks dengan CSS di situs web Anda; Anda hanya perlu satu aturan untuk melakukannya.

warna biru;

Tentu saja, aturan CSS tidak bekerja dengan baik dengan sendirinya. Anda perlu memasangkannya dengan kelas elemen, ID, dan pengidentifikasi untuk memastikan bahwa browser web mengetahui gaya yang diterapkan. Anda dapat melihat contoh aturan ini yang digunakan dengan judul H1, paragraf P, dan tombol di bawah.

h1 { warna: biru; }
p { warna: merah; }
tombol { warna: merah; }

Ini akan memberi Anda pemahaman dasar tentang apa yang perlu dilakukan untuk mengubah warna teks situs web Anda dengan CSS. Biasanya dibutuhkan lebih dari ini, terutama jika Anda ingin memberikan warna berbeda pada teks yang berbeda di situs web Anda.

Terkait: Model Kotak CSS Dijelaskan Dengan Contoh

Menemukan Kelas CSS yang Tepat

Sebelum Anda dapat mengubah teks tertentu di situs web Anda, Anda perlu tahu cara mengidentifikasinya di dalam CSS Anda. Sebagian besar browser web memiliki seperangkat alat yang dirancang untuk membantu pengembang, dan kemungkinan yang Anda gunakan memiliki sesuatu yang disebut Inspektur. Ini dapat digunakan untuk mengintip ke dalam HTML dan kode lain yang membangun sebuah situs web.

Pembukaan Inspektur

Pembukaan inspektur berbeda di setiap browser di pasar. Kami telah membahas beberapa browser paling populer di bawah ini untuk memberi Anda permulaan:

• Google Chrome: CTRL + Shift + C atau Titik Menu > Lebih Banyak Alat > Alat pengembang
• Microsoft Edge: CTRL + Shift + C atau Titik Menu > Lebih Banyak Alat > Alat pengembang
• Mozilla Firefox: CTRL + Shift + C atau Titik Menu > Lebih Banyak Alat > Alat Pengembang Web
• Safari apel: Preferensi > Canggih > Tampilkan menu Kembangkan di bilah menu lalu Mengembangkan > Tampilkan Inspektur Web

Menemukan Gaya Teks CSS yang Tepat

Ini bisa membingungkan ketika Anda pertama kali membuka Inspektur di browser Anda. Akan ada banyak hal yang mungkin tidak Anda pahami, tetapi Anda tidak perlu khawatir tentang hal ini untuk saat ini. Anda hanya perlu menemukan nama gaya teks yang ingin Anda ubah.

Sebagai contoh, kita akan menemukan dan mengubah gaya teks CSS yang digunakan untuk header utama pada bagian MakeUseOf Programming. Anda dapat memulai proses ini dengan memeriksa elemen yang perlu diubah.

• Google Chrome: Klik kanan > Memeriksa
• Microsoft Edge: Klik kanan > Memeriksa
• Mozilla Firefox: Klik kanan > Memeriksa atau Q
• Safari apel: Klik kanan > Memeriksa elemen

Melakukan ini akan membuat konsol/jendela inspektur situs web Anda fokus pada elemen yang ingin Anda ubah. Di Chrome, Safari, Edge, dan Firefox, Anda akan melihat bagian berlabel Gaya yang berisi semua kode CSS untuk elemen yang Anda periksa.

Anda juga akan melihat elemen HTML Anda disorot di panel di sebelah ini. Ini dapat digunakan untuk mengetahui kelas atau ID elemen yang Anda ubah. Dalam kasus kami, kami melihat judul H1 utama di halaman kami, dan ini milik kelas yang disebut .listing-title.

Pada titik ini, Anda dapat menguji gaya teks CSS yang akan Anda tambahkan ke situs web Anda. Bagian atas bagian gaya CSS di konsol situs web dapat digunakan untuk menerapkan aturan ke elemen tertentu yang Anda targetkan. Tentu saja, ini tidak permanen.

Terkait: Cara Membuat Bilah Navigasi Responsif Menggunakan HTML dan CSS

Menambahkan CSS Baru Anda

Sekarang saatnya menambahkan CSS baru Anda ke situs web Anda. Cara Anda melakukannya akan bergantung pada jenis platform situs web yang Anda gunakan, dengan opsi seperti Shopify yang memerlukan ekstensi untuk memungkinkan Anda menambahkan CSS tanpa mengubah file Anda.

Bagaimanapun Anda menambahkan kode CSS Anda, Anda perlu memastikan bahwa itu benar. Menggunakan aturan CSS gaya teks tidak terlalu sulit, tetapi bisa membuat frustasi ketika Anda tidak tahu cara mengubah warna teks Anda. Sebagai contoh kami, ini adalah kode yang perlu kami tambahkan ke situs web kami.

.listing-title {
warna biru;
}

Bagaimana jika Warna Teks Anda Tidak Berubah?

Setelah Anda mengedit file CSS Anda, Anda seharusnya dapat melihat perubahan yang Anda buat segera setelah Anda me-refresh halaman Anda. Ini tidak selalu sesederhana ini. CSS bisa lebih kompleks daripada yang diperkirakan orang, dan Anda mungkin perlu melakukan lebih banyak pada tahap ini.

• Mengosongkan cache: Situs web sering menggunakan caching untuk mengurangi waktu pemuatan. Cache Anda dapat mencegah Anda melihat perubahan situs web, dan Anda harus mengosongkannya saat membuat perubahan pada CSS.
• Lebih tinggi dalam style sheet: CSS memuat gaya secara berurutan, dan ini berarti bahwa aturan pertama di lembar gaya Anda akan menjadi aturan yang ditampilkan di situs web Anda. Gaya bergerak bisa menjadi cara yang baik untuk memberi mereka prioritas di atas gaya lain.
• Menggunakan tag penting: Opsi berikutnya ini tidak dianggap sebagai praktik terbaik dan paling baik dicadangkan ketika Anda tidak punya pilihan lain. Anda dapat menambahkan tag penting ke gaya teks CSS Anda untuk memberi mereka prioritas di atas semua gaya lainnya, dan ini dapat dilihat di bawah:

.listing-title {
warna: biru !penting;
}

Kesenangan CSS Gaya Teks Lainnya

CSS adalah alat yang sangat kuat, memberi Anda akses ke sejumlah opsi berbeda saat Anda bekerja dengan teks dan elemen lain di situs web Anda. Ini tidak hanya berhenti pada warna teks CSS, dan Anda dapat melakukan banyak hal dengan teks Anda ketika Anda memilih untuk mempelajari sedikit CSS. Anda dapat menemukan beberapa aturan gaya teks CSS dasar di bawah ini:

• Ukuran huruf: Ini mengubah ukuran teks di situs web Anda, mis., ukuran font: 12px;
• berat font: Berat mengacu pada ketebalan font, dengan tebal berarti berat tinggi dan teks tipis berarti rendah, misalnya, berat font: 400;
• Perataan teks: Ini mengubah perataan teks yang sedang Anda kerjakan, mis., text-align: right;
• Bayangan teks: Ini memungkinkan Anda untuk menambahkan bayangan ke teks Anda dengan berbagai atribut, mis., text-shadow: 2px 2px 3px black;
• Transformasi teks: Ini mengubah huruf besar/kecil dari teks yang sedang Anda kerjakan, misalnya, text-transform: uppercase;
• Dekorasi teks: Ini memungkinkan Anda untuk menambahkan garis bawah, tanda hubung, dan dekorasi lainnya ke teks, misalnya, dekorasi teks: garis bawah;

Ini hanya menggores permukaan dari apa yang dapat Anda lakukan dengan gaya teks di CSS. Ada banyak panduan di web yang dapat membantu Anda dalam proses ini, dan itu selalu merupakan ide yang baik untuk melakukan riset saat Anda memulai.

Terkait: Cara Mengubah Teks Situs Web Anda Dengan Properti font-family CSS

Pelajari Lebih Dari Warna Teks CSS

Latihan, eksperimen, dan coba-coba adalah cara terbaik untuk mempelajari alat seperti CSS. Lembar gaya mungkin tampak menakutkan saat Anda pertama kali mulai bekerja dengannya, tetapi sangat mudah digunakan setelah Anda menghabiskan waktu dengannya.

10 Contoh Kode CSS Sederhana yang Dapat Anda Pelajari dalam 10 Menit

Butuh bantuan dengan CSS? Cobalah contoh kode CSS dasar ini untuk memulai, lalu terapkan ke halaman web Anda sendiri.

Baca Selanjutnya

Tentang Penulis