Cara Mengubah Warna Teks HTML Dengan CSS

Ibrahim Al Anshor | 4 days ago | css

Mengubah Warna Teks HTML - Warna merupakan salah satu elemen penting dalam desain web.

Warna berfungsi sebagai branding dari sebuah halaman web.

Untuk itu penggunaan warna sangat diperlukan dalam pembuatan halaman web.

Dan pada postingan kali ini, saya akan membagikan postingan mengenai cara mengubah warna teks HTML dengan CSS.

Langsung saja berikut langkah-langkahnya.

Mengubah Warna Dengan CSS

Property yang digunakan untuk mengubah warna adalah color, yang diisi dengan nilai nama/kode warnanya.

body {
  color: red;
}
h1 {
  color: green;
}

Property Color

Jenis Warna Pada CSS

Pada contoh diatas, saya menggunakan nama warna sebagai nilai dari property color. Pada CSS terdapat cara lain selain dengan nama warna untuk mengisi nilai property color.

Berikut jenis warna yang ada pada CSS:

Color Names (Nama warnanya)
RGB Color (Red, Green, Blue)
HEX Color (Warna yang menggunakan bilangan heksadesimal, #RRGGBB)
HSL Color (Hue, Saturation, Lightness)

Untuk penjelasan lebih lanjut mengenai jenis warna akan saya jelaskan pada postingan selanjutnya.

Mengubah Warna Huruf Pertama

Untuk mengubah warna huruf pertama, kita dapat memanfaatkan pseudo-element selector first-letter yang diberikan kepada elemen yang dituju.

body {
  color: blue;
}
h1 {
  color: green;
}
h1::first-letter {
  color: red;
}

First Letter Color

Mengubah Warna Baris Pertama

Untuk mengubah warna baris pertama, kita dapat memanfaatkan pseudo-element selector first-line yang diberikan kepada elemen yang dituju.

body {
  color: blue;
}
h1 {
  color: green;
}
p::first-line {
  color: red;
}

First Line Color

Pada contoh di atas saya menggunakan pseudo-element selector yang penjelasanya ada pada postingan sebelumnya.

Mengenal Pseudo-element Selector Pada CSS

Referensi

Untuk lebih lengkapnya, anda dapat mengunjungi tautan berikut.

CSS Colors

« Mengenal Attribute Selector Pada CSS Cara Mengubah Background HTML Dengan CSS »

Narakode