Beri warna teks pada css

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

Beri warna teks pada css

Beri warna teks pada css

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

Beri warna teks pada css
buat folder learn_property_color_css

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

<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 di folder belajar_property_color_css lalu jalankan di browser anda, maka hasilnya kurang lebih seperti ini

Beri warna teks pada css
hasil penerapan nilai warna dari properti warna

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

Beri warna teks pada css
hasil penerapan berbagai nilai pada properti warna

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
Beri warna teks pada css
menemukan tulisan transparan

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

Bagaimana cara mengubah warna teks di CSS?

Warna (color) teks di CSS dapat diubah dengan menggunakan properti color . Properti ini menerima nilai dalam berbagai bentuk seperti nama warna standar HTML dan CSS (nama warna) yang berjumlah 140 buah, nilai warna dalam bentuk kode heksadesimal, kode warna RGB(A) dan warna HSL(A) kode.

Bagaimana cara mengatur warna teks?

Buka Format > Font > Font . + D untuk membuka kotak dialog Font . Pilih panah di samping Warna font , lalu pilih warna . Pilih Default, lalu pilih Ya untuk menerapkan perubahan ke semua dokumen baru berdasarkan template.

Gaya apa yang digunakan untuk mengubah warna teks?

Cara terbaik untuk mengubah warna teks adalah dengan menggunakan CSS . Atribut HTML lama

Properti CSS apa yang digunakan untuk mengubah warna teks suatu elemen?

Warna . color adalah properti CSS yang dapat digunakan untuk mewarnai karakter. Nilai untuk properti ini bisa menggunakan kata kunci seperti. nama warna, seperti. merah, hijau, biru, dll.