Cara menggunakan css warna teks

Question

Cascading Style Sheets (CSS) adalah cara terbaik untuk mengubah font pada halaman web Anda daripada menggunakan HTML

Table of Contents Show

Mengubah Atribut Font Dengan CSS untuk Menyesuaikan Font Anda
Proses Pencetakan 4 Warna, 6 Warna, dan 8 Warna
Berbagai Nilai Yang Dapat Digunakan Pada Properti Warna
warna. color_value;
Bagaimana cara mengubah warna teks di CSS?
Bagaimana cara mengatur warna teks?
Gaya apa yang digunakan untuk mengubah warna teks?
Properti CSS apa yang digunakan untuk mengubah warna teks suatu elemen?

Mengubah Atribut Font Dengan CSS untuk Menyesuaikan Font Anda

CSS adalah cara yang efektif untuk menyesuaikan font pada halaman web Anda. Anda dapat mengontrol jenis font, ukuran, warna, berat, dan banyak aspek tipografi lainnya

Proses Pencetakan 4 Warna, 6 Warna, dan 8 Warna

CMYK adalah proses pencetakan warna yang paling umum, tetapi di sini Anda dapat menjelajahi berbagai jenis pencetakan warna 4C, 6C, dan 8C, termasuk Hexachrome

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

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

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 diatas, kita menggunakan HTML Tag atau Element <div> untuk menjadikannya induk yang berisi beberapa Tag atau Element <p>, dan kita tempatkan class selector warna_induk didalamnya

Kemudian kita buat empat paragraf dengan Tag atau Elemen <p>, lalu kita terapkan empat penyeleksi lainnya ke dalam masing-masing paragraf tersebut dengan masing-masing paragraf memiliki kelas pemilih yang berbeda satu sama lain dan kita tempatkan 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

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

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?

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. Heksadesimal.

kode css