Pada bahasa pemograman HTML, anda dapat membuat teks/tulisan dan memberi style, misalnya memberi/mengubah warna teks seperti judul artikel ini
Untuk mengubah warna teks pada HTML CSS, Anda perlu memahami / mengetahui warna HEXA atau biasa disebut Hex-Color, silahkan klik disini untuk melihat warna hex-color
Siapkan teks yang ingin diubah warnanya di html, misalnya menggunakan tag
iklan oleh posciety
Sekarang buka file CSS yang telah dibuat/dikaitkan dengan HTML. Pada file CSS ini, silahkan panggil tag p dan isi nilainya dengan (contoh) color: #c41617;
Baca Juga
7 Cara Mudah Membuat Situs WordPress Mobile Friendly
4 Tren Desain UX di 2021
12 Plugin WordPress Gratis & Terbaik 2021 Yang Wajib Anda Miliki
Cara Mengetahui Kata Kunci yang Digunakan Pengunjung pada Fitur…
p { color: #c41617; }Pada nilai #c41617_ silahkan sesuaikan dengan warna yang diinginkan dan jangan lupa beri tanda pagar (#)
Selain itu, ada juga cara cepat menggunakan warna umum dalam bahasa Inggris. Namun warna ini terbatas, tidak semua warna bisa digunakan karena ini hanya warna umum dan bukan warna custom. Cara pakainya seperti ini
p { color: red; }_Tentu Anda harus mengetahui nama-nama warna dalam bahasa Inggris untuk HTML CSS. Harap ubah red di atas dengan warna lain yang diinginkan dalam bahasa Inggris
Warna properti adalah properti di CSS yang berfungsi untuk memberi atau mengubah warna teks pada Tag atau Elemen HTML
Dalam menata tampilan website, memilih dan mengatur warna teks secara tepat merupakan salah satu hal yang sangat penting agar tampilan website kita enak dan nyaman untuk dilihat. Karena pemilihan warna tulisan yang kurang tepat bisa membuat pengunjung merasa enggan untuk membaca konten yang kita buat
Dalam HTML sebenarnya ada Tag atau Element yang berfungsi untuk mengatur warna teks, yaitu <font>, hanya saja dalam menggunakannya kita harus menuliskan kode pada setiap kata atau kalimat yang ingin kita ubah warnanya. , misalnya seperti ini
<font color="red"><p>ini adalah sebuah teks berwarna merah</p></font> <font color="green"><p>ini adalah sebuah teks berwarna hijau</p></font> <font color="red"><p>ini adalah sebuah teks berwarna merah lagi</p></font> <font color="blue"><p>ini adalah sebuah teks berwarna blue</p></font> <font color="green"><p>ini adalah sebuah teks berwarna hijau lagi</p></font>Untuk menghasilkan tulisan seperti ini
ini adalah teks merah
ini adalah teks hijau
ini adalah teks merah lainnya
Ini adalah teks biru
ini adalah teks hijau lainnya
Namun, jika kita harus menulis kode tersebut berulang-ulang tentu akan merepotkan kita bukan?
Oleh karena itu, disini kita akan belajar menggunakan properti yang terdapat pada CSS, khususnya properti color untuk memudahkan kita dalam memberi atau mengubah warna huruf pada Tag atau Elemen HTML.
Sebelum kita masuk ke pembasahan, silahkan siapkan text editor dan browser anda dan pastikan keduanya bekerja dengan baik, lalu buat folder di desktop anda dengan nama belajar_property_color_css untuk kita gunakan sebagai tempat menyimpan file yang akan kita buat nanti
Kalau begitu mari langsung saja ke pembahasannya
Berbagai Nilai Yang Dapat Digunakan Pada Properti Warna
Setelah kita memahami bahwa properti color berfungsi untuk memberi warna pada teks, selanjutnya kita akan membahas nilai apa saja yang dapat digunakan pada properti tersebut.
Property color memiliki empat jenis nilai yang bisa kita gunakan yaitu color, initial, inherit dan transparent
- warna. yaitu color value seperti yang sudah kita bahas pada tutorial sebelumnya untuk memberikan warna yang kita sukai
- awal. berfungsi untuk memberikan nilai default ke Tag atau Elemen HTML
- mewarisi. berfungsi untuk memberikan atribut turunan agar secara otomatis memiliki nilai yang sama dengan Tag HTML atau Elemen yang memuatnya (induk)
- transparan. berfungsi untuk membuat efek transparan pada Tag atau Elemen HTML
Untuk lebih jelas tentang fungsi keempat nilai diatas, mari kita buat file HTML baru dengan kode CSS nya
Pertama kita akan praktekkan cara memberi atau mengubah warna dengan property color ini. cara penulisannya seperti ini
pemilih {
warna. color_value;
}
Untuk latihan silahkan buka text editor anda (buat file baru) dan ketik atau copy-paste kode di bawah ini
Kemudian simpan dengan nama color_css. html di folder belajar_property_color_css lalu jalankan di browser anda, maka hasilnya kurang lebih seperti ini
Pada contoh di atas, kita menggunakan pemilih ID untuk melakukan modifikasi. Jadi untuk merubah warna suatu Tag atau Element kita hanya perlu memasukan ID ke dalamnya dengan menggunakan atribut id seperti pada contoh diatas
Bagaimana?
Selanjutnya kita akan melakukan perbandingan antara keempat nilai yang dapat digunakan pada properti warna ini, sehingga dengan adanya perbandingan tersebut akan memudahkan anda untuk memahami setiap fungsi dari nilai tersebut.
Langsung saja silahkan buka text editor anda (buat file baru) dan ketik atau copy-paste kode dibawah ini
<html> <head> <style> *{ font-size: 24px; font-weight: bold; } .nilai_warna{ color: lightblue; } .initial{ color: initial; } .inherit{ color: inherit; } .transparent{ color: transparent; } .warna_induk { color: green; } </style> </head> <body> <p> Ini adalah warna secara asal </p> <div class="warna_induk"> <p class="nilai_warna"> ini adalah tulisan dengan menggunakan nilai warna </p> <p class="initial"> ini adalah tulisan dengan menggunakan nilai initial </p> <p class="inherit"> ini adalah tulisan dengan menggunakan nilai inherit </p> <p class="transparent"> ini adalah tulisan dengan menggunakan nilai transparent </p> </div> </body> </html>_Penjelasan kode
.nilai_warna{ color: lightblue; } .initial{ color: initial; } .inherit{ color: inherit; } .transparent{ color: transparent; } .warna_induk { color: green; }Pada kode di atas kita membuat lima class selector yang salah satunya akan kita gunakan sebagai warna induk untuk membandingkan hasil dari empat class selector lainnya yang berisi empat nilai yang sedang kita bahas
<div class="warna_induk"> <p class="nilai_warna"> ini adalah tulisan dengan menggunakan nilai warna </p> <p class="initial"> ini adalah tulisan dengan menggunakan nilai initial </p> <p class="inherit"> ini adalah tulisan dengan menggunakan nilai inherit </p> <p class="transparent"> ini adalah tulisan dengan menggunakan nilai transparent </p> </div> _Pada kode HTML di atas, kita menggunakan Tag HTML atau Elemen <div> untuk menjadikannya induk yang berisi beberapa Tag atau Elemen <p>, dan kita menempatkan pemilih kelas warna_induk di dalamnya
Kemudian kita membuat empat paragraf dengan Tag atau Elemen <p>, kemudian kita menerapkan empat penyeleksi lainnya ke dalam masing-masing paragraf tersebut dengan masing-masing paragraf memiliki kelas pemilih yang berbeda satu sama lain dan kita menempatkan paragraf di antara Tag atau Elemen<div class="warna_induk"> dan <html> <head> <style> *{ font-size: 20px; } b{ font-size: 25px; color:green; } p{ color:teal; } #red { color :red; } #fuchsia{ color: fuchsia; } #tomato{ color:tomato; } </style> </head> <body class="qr"> <b>Semua tulisan dibawah ini merupakan tulisan yang dibuat menggunakan<br>Tag atau Element paragraf yang sudah dimodifikasi</b><br> <p>saya adalah tulisan yang sudah diganti warna defaultnya</p> <p>sehingga warna saya menjadi teal</p> <p id="red"> saya tulisan berwarna red</p> <p id="fuchsia"> saya tulisan berwarna fucshia</p> <p id="tomato"> saya tulisan berwarna tomato</p> <p id="red"> saya juga tulisan berwarna red</p> <p id="fuchsia"> saya juga tulisan berwarna fucshia</p> <p id="tomato"> saya juga tulisan berwarna tomato</p> <p>saya adalah tulisan yang sudah diganti warna defaultnya menjadi teal</p> </body> </html> 0
Kemudian simpan dengan nama comparison_four_values_css. html di folder belajar_property_color_css lalu jalankan di browser anda maka hasilnya akan seperti ini
Perhatikan baik-baik hasil di atas,
- Pada contoh hasil di atas, teks “ini dengan warna asli” berwarna hitam, yang berarti warna asli font pada Elemen Tag atau Paragraf berwarna hitam
- Kemudian tulisan “inilah teks dengan warna asli pada div Tag atau Element yang memiliki class selector color_parent” berubah menjadi hijau. Kenapa bisa seperti itu?
Jawabannya karena selain font pada Elemen Tag atau Paragraph memiliki warna default atau warna asli hitam, juga memiliki properti dasar yaitu sifat inherit atau turunan yang menyebabkan warna asli font pada Tag atau paragraf elemen yang memiliki nilai default untuk diubah sesuai dengan warna font pada Tag atau Elemen yang memuatnya (induknya)
Pada contoh diatas kita sudah mengubah warna font div Tag atau Element menjadi "hijau" melalui class selector warna_induk, sehingga menyebabkan warna default paragraf Tag atau Element yang memiliki nilai default juga berubah menjadi hijau
Coba saja perhatikan teks "ini teks menggunakan nilai pewarisan", warnanya sama dengan teks di atas, yaitu hijau, itu karena warna hijau adalah warna turunan dari Tag atau Elemen div
- Lalu perhatikan tulisan “ini tulisan menggunakan color_value”, tulisannya tidak berwarna hijau seperti kedua tulisan di atas, kenapa?
- Kemudian perhatikan juga tulisan “ini ditulis menggunakan nilai awal”, warna tulisannya hitam. Hal tersebut dikarenakan fungsi initial value adalah untuk mengembalikan nilai property kembali ke nilai defaultnya dan nilai default warna font adalah hitam
- Dan yang terakhir adalah tulisan, “ini tulisan menggunakan nilai transparan”. Tulisan tidak langsung terlihat karena seperti yang telah kita ketahui pada penjelasan di atas bahwa transparan berfungsi untuk memberikan efek tembus pandang, sehingga tulisan menjadi “tidak terlihat”, namun tetap dapat ditemukan dengan memblokir seluruh isi dengan menekan tombol <html> <head> <style> *{ font-size: 20px; } b{ font-size: 25px; color:green; } p{ color:teal; } #red { color :red; } #fuchsia{ color: fuchsia; } #tomato{ color:tomato; } </style> </head> <body class="qr"> <b>Semua tulisan dibawah ini merupakan tulisan yang dibuat menggunakan<br>Tag atau Element paragraf yang sudah dimodifikasi</b><br> <p>saya adalah tulisan yang sudah diganti warna defaultnya</p> <p>sehingga warna saya menjadi teal</p> <p id="red"> saya tulisan berwarna red</p> <p id="fuchsia"> saya tulisan berwarna fucshia</p> <p id="tomato"> saya tulisan berwarna tomato</p> <p id="red"> saya juga tulisan berwarna red</p> <p id="fuchsia"> saya juga tulisan berwarna fucshia</p> <p id="tomato"> saya juga tulisan berwarna tomato</p> <p>saya adalah tulisan yang sudah diganti warna defaultnya menjadi teal</p> </body> </html> 1 + <html> <head> <style> *{ font-size: 20px; } b{ font-size: 25px; color:green; } p{ color:teal; } #red { color :red; } #fuchsia{ color: fuchsia; } #tomato{ color:tomato; } </style> </head> <body class="qr"> <b>Semua tulisan dibawah ini merupakan tulisan yang dibuat menggunakan<br>Tag atau Element paragraf yang sudah dimodifikasi</b><br> <p>saya adalah tulisan yang sudah diganti warna defaultnya</p> <p>sehingga warna saya menjadi teal</p> <p id="red"> saya tulisan berwarna red</p> <p id="fuchsia"> saya tulisan berwarna fucshia</p> <p id="tomato"> saya tulisan berwarna tomato</p> <p id="red"> saya juga tulisan berwarna red</p> <p id="fuchsia"> saya juga tulisan berwarna fucshia</p> <p id="tomato"> saya juga tulisan berwarna tomato</p> <p>saya adalah tulisan yang sudah diganti warna defaultnya menjadi teal</p> </body> </html> 2 tombol pada keyboard pada halaman sehingga hasilnya seperti ini
Nah, itulah penjelasan tentang Belajar Menggunakan Properti Warna Pada CSS
Bagaimana?
Alhamdulillah sekarang kita sudah paham bagaimana cara menggunakan properti color di CSS
Selanjutnya kita akan belajar tentang Cara Menggunakan Background Property di CSS. Untuk membaca tutorialnya silahkan klik link disini