Berikut adalah contoh penggunaan CSS untuk mengubah warna teks dan latar belakang pada artikel:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<style>
/* CSS untuk gaya teks */
h1 {
font-size: 32px; /* Ukuran teks: 32 piksel */
font-family: Arial, sans-serif; /* Jenis huruf: Arial, tanpa serip */
color: #FF0000; /* Warna teks: merah */
}
p {
font-size: 16px; /* Ukuran teks: 16 piksel */
font-family: Arial, sans-serif; /* Jenis huruf: Arial, tanpa serip */
color: #333333; /* Warna teks: abu-abu gelap */
}
/* CSS untuk latar belakang */
body {
background-color: #F5F5F5; /* Warna latar belakang: abu-abu terang */
}
.container {
background-color: #FFFFFF; /* Warna latar belakang: putih */
padding: 20px; /* Ruang jarak dari tepi elemen */
}
</style>
</head>
<body>
<div class="container">
<h1>Judul Artikel</h1>
<p>Ini adalah artikel yang menarik dan informatif.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum facilisis leo, et semper turpis consequat at. Mauris aliquam ultrices enim id feugiat. Aliquam quis fringilla nisl, vel malesuada sapien. Nullam sed ligula tellus.</p>
</div>
</body>
</html>Dalam contoh di atas, CSS disisipkan dalam tag <style> di dalam elemen <head> untuk mengatur gaya teks dan latar belakang pada artikel.
- Untuk gaya teks, kami menggunakan selektor
h1untuk mengubah warna teks judul menjadi merah (#FF0000) dan selektorpuntuk mengubah warna teks paragraf menjadi abu-abu gelap (#333333). - Untuk gaya latar belakang, kami menggunakan selektor
bodyuntuk mengubah warna latar belakang halaman menjadi abu-abu terang (#F5F5F5) dan selektor.containeruntuk mengubah warna latar belakang kontainer menjadi putih (#FFFFFF).
Dengan menerapkan CSS ini, teks pada judul dan paragraf akan memiliki warna yang ditentukan, sedangkan latar belakang halaman dan kontainer akan memiliki warna yang sesuai. Anda dapat menyesuaikan properti CSS sesuai dengan preferensi desain dan kebutuhan Anda, seperti mengubah warna teks dan latar belakang sesuai dengan skema warna yang diinginkan.
