Tutorial CSS Untuk Pemula - Belajar Menggunakan Property Color Pada CSS
Property color merupakan sebuah property dalam CSS yang berfungsi untuk memberi atau mengubah warna tulisan pada sebuah Tag atau Element HTML.
Dalam menata sebuah tampilan website, memilih dan mengatur warna tulisan dengan tepat merupakan salah satu hal yang sangat penting untuk membuat tampilan website kita menjadi menyenangkan dan nyaman dipandang. Sebab pemilihan warna tulisan yang tidak sesuai bisa membuat pengunjung merasa enggan untuk membaca konten yang kita buat.
Di dalam HTML sebenarnya terdapat Tag atau Element yang berfungsi untuk mengatur warna tulisan yaitu <font>, hanya saja dalam penggunaannya kita harus menuliskan kode tersebut pada setiap kata atau kalimat yang ingin kita ubah warnanya, contohnya 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>
Sehingga menghasilkan tulisan seperti ini :
ini adalah sebuah teks berwarna merah
ini adalah sebuah teks berwarna hijau
ini adalah sebuah teks berwarna merah lagi
ini adalah sebuah teks berwarna blue
ini adalah sebuah teks berwarna hijau lagi
Namun, jika harus menuliskan kode tersebut secara berulang maka hal itu tentu akan merepotkan kita bukan?
Oleh karena itu di sini kita akan belajar untuk menggunakan property yang terdapat pada CSS khususnya properti color untuk memudahkan kita dalam memberi atau mengubah warna huruf pada sebuah Tag atau Element HTML.
Sebelum kita masuk ke pembasahan, silahkan siapkan teks editor dan browser anda dan pastikan keduanya bisa berfungsi dengan baik, lalu buatlah sebuah folder didesktop anda dengan nama belajar_property_color_css untuk kita gunakan sebagai tempat untuk menyimpan file yang akan kita buat nanti.
Jika sudah maka kita langsung saja ke pembahasan.
Macam-Macam Nilai Yang Bisa Digunakan Pada Property Color
Setelah kita memahami bahwa property color berfungsi untuk memberikan warna pada tulisan, maka selanjutnya kita akan membahas nilai apa saja yang bisa digunakan pada property tersebut.
Property color memiliki empat macam nilai yang bisa kita gunakan, yaitu warna, initial, inherit dan transparent.
- warna : yaitu nilai warna sebagaimana yang telah kita bahas pada tutorial sebelumnya untuk memberikan warna yang kita suka.
- initial : berfungsi untuk memberikan nilai default pada sebuah Tag atau Element HTML.
- inherit : berfungsi untuk memberikan sifat turunan sehingga secara otomatis memiliki nilai yang sama dengan Tag atau Element HTML yang memuatnya (induk).
- transparent : berfungsi untuk membuat efek transparan pada sebuah Tag atau Element HTML.
Untuk lebih jelas tentang fungsi dari keempat nilai atau value diatas mari kita buat sebuah file HTML baru beserta kode CSSnya.
Pertama kita akan mempraktekkan cara memberi atau mengubah warna dengan property color ini. cara penulisannya adalah seperti ini :
selector {
color : nilai_warna;
}
Untuk prakteknya silahkan buka teks editor anda (buat file baru) dan ketikkan atau copy-paste kode dibawah ini :
<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>
Kemudian simpan dengan nama color_css.html didalam folder belajar_property_color_css lalu jalankan dibrowser anda, maka hasilnya kira-kira seperti ini:
Pada contoh diatas kita menggunakan ID selector untuk melakukan modifikasi. Jadi untuk mengubah warna pada sebuah Tag atau Element kita hanya perlu memasukkan ID tersebut kedalamnya dengan menggunakan atribut id seperti pada contoh diatas.
Bagaimana? lebih simple bukan? kita hanya perlu menuliskan kode cssnya sekali saja dan kita bisa menggunakannya berkali-kali.
Selanjutnya kita akan melakukan perbandingan antara empat nilai yang bisa digunakan pada property color ini, sehingga dengan perbandingan tersebut anda akan lebih mudah untnuk memahami masing-masing fungsi nilai tersebut.
Kita langsung saja, silahkan buka teks editor anda (buat file baru) lalu ketikkan 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 diatas kita membuat lima buah class selector yang salah satunya akan kita gunakan sebagai warna induk untuk membandingkan hasil dari keempat class selector lain yang mengandung keempat 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 diatas kita menggunakan Tag atau Element HTML <div> untuk kita jadikan sebagai induk yang memuat beberapa Tag atau Element <p>, dan kita letakkan class selector warna_induk didalamnya.
Lalu kita buat empat buah paragraf dengan Tag atau Element <p> , lalu kita terapkan empat selector lainnya kedalam masing-masing paragraf tersebut dengan masing-masing paragraf memiliki satu class selector yang berbeda-beda satu sama lain dan kita letakkan paragraf tersebut diantara Tag atau Element<div class="warna_induk"> dan </div>.
Kemudian simpan dengan nama perbandingan_empat_nilai_css.html didalam folder belajar_property_color_css kemudian jalankan dibrowser anda maka hasilnya kira-kira seperti ini :
Perhatikan baik-baik hasil di atas,
- Pada contoh hasil di atas tulisan "ini adalah dengan warna asal" berwarna hitam, yang itu berarti warna asal font pada Tag atau Element paragraf adalah hitam.
- Lalu pada tulisan "ini adalah tulisan dengan warna asal didalam Tag atau Element div yang memiliki class selector warna_induk" berubah menjadi hijau. Kenapa bisa seperti itu ? Bukankah seharusnya warnanya tetap hitam?
Jawabannya adalah karena disamping font pada Tag atau Element paragraf memiliki warna default atau warna asal hitam, dia juga memiliki sifat dasar yaitu inherit atau sifat turunan yang itu menyebabkan warna asal font pada Tag atau element paragraf yang memiliki nilai default akan berubah mengikuti warna font pada Tag atau Element yang memuatnya (induknya).
Pada contoh diatas warna font Tag atau Element div sudah kita ubah menjadi warna "green" melalui class selector warna_induk, sehingga hal itu menyebabkan warna default Tag atau Element paragraf yang memiliki nilai default juga berubah menjadi warna hijau.
Coba saja anda perhatikan tulisan "ini adalah tulisan dengan menggunakan nilai inherit", warna yang dimilikinya sama dengan tulisan diatas yaitu hijau, hal itu karena warna hijau tersebut merupakan warna turunan dari Tag atau Element div.
- Kemudian perhatikan tulisan "ini adalah tulisan dengan menggunakan nilai_warna", tulisan tersebut tidak berwarna hijau sebagaimana dua tulisan diatas, kenapa? karena kita sudah menetapkan nilai untuknya yaitu lightblue, sehingga sifat dasar inherit tidak lagi berlaku padanya.
- Lalu perhatikan juga tulisan "ini adalah tulisan dengan menggunakan nilai initial", warna tulisan tersebut adalah hitam. Hal itu karena fungsi nilai initial adalah mengembalikan nilai sebuah property kembali ke nilai defaultnya dan nilai default dari warna font adalah hitam.
- Dan yang terakhir adalah tulisan, "ini adalah tulisan dengan menggunakan nilai transparent". Tulisan tersebut tidak tampak secara langsung karena sebagaimana telah kita ketahui pada penjelasan diatas bahwa transparent berfungsi untuk memberi efek transparan, sehingga tulisan tersebut menjadi "tidak terlihat", namun tetap bisa ditemukan dengan memblok seluruh konten dengan menekan tombol
ctrl+Adi keyboard pada halaman tersebut sehingga hasilnya seperti ini :
Nah, itulah penjelasan tentang Belajar Menggunakan Property Color Pada CSS.
Bagaimana? Sangat jelas dan sangat mudah untuk dipahami bukan?
Alhamdulillah, sekarang kita telah mengerti cara menggunakan property color pada CSS.
Selanjutnya kita akan belajar tentang Cara Menggunakan Property Background Pada CSS. Untuk membaca tutorialnya silahkan klik link disini.
Semoga bermanfaat.