HTML/CSS

gaya Teks dan Latar Belakang

Terkait dengan gaya teks dan latar belakang dalam HTML, Anda dapat menggunakan CSS (Cascading Style Sheets) untuk mengatur penampilan elemen-elemen pada halaman web. Dengan CSS, Anda dapat memodifikasi gaya teks, seperti warna, ukuran, jenis huruf, dan gaya latar belakang elemen.

Berikut adalah contoh penggunaan CSS untuk menggaya teks dan latar belakang pada sebuah artikel:

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Judul Halaman</title>
  <style>
    /* CSS untuk gaya teks */
    h1 {
      color: #ff0000; /* Warna teks: merah */
      font-size: 24px; /* Ukuran teks: 24 piksel */
      font-family: Arial, sans-serif; /* Jenis huruf: Arial, tanpa serip */
    }

    p {
      color: #000000; /* Warna teks: hitam */
      font-size: 16px; /* Ukuran teks: 16 piksel */
      font-family: Arial, sans-serif; /* Jenis huruf: Arial, tanpa serip */
      line-height: 1.5; /* Jarak antarbaris */
    }

    /* CSS untuk latar belakang */
    body {
      background-color: #f0f0f0; /* Warna latar belakang: abu-abu muda */
    }

    .container {
      background-color: #ffffff; /* Warna latar belakang: putih */
      padding: 20px; /* Ruang jarak dari tepi elemen */
      border-radius: 5px; /* Melengkungkan sudut elemen */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Efek bayangan elemen */
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Judul Artikel</h1>
    <p>Ini adalah penjelasan tentang artikel ini. Artikel ini berisi konten yang menarik dan informatif.</p>
    <p>Beberapa poin penting yang akan dibahas dalam artikel ini adalah:</p>
    <ul>
      <li>Poin 1</li>
      <li>Poin 2</li>
      <li>Poin 3</li>
    </ul>
  </div>
</body>
</html>

Dalam contoh di atas, CSS disisipkan dalam tag <style> di dalam elemen <head> untuk memodifikasi gaya teks dan latar belakang pada artikel.

  • Untuk gaya teks, kami menggunakan selektor h1 untuk menggaya judul dengan warna merah, ukuran 24 piksel, dan jenis huruf Arial. Kami menggunakan selektor p untuk menggaya paragraf dengan warna hitam, ukuran 16 piksel, jenis huruf Arial, dan jarak antarbaris 1.5 kali ukuran teks.
  • Untuk gaya latar belakang, kami menggunakan selektor body untuk menggaya latar belakang halaman dengan warna abu-abu muda. Kami juga menggunakan selektor .container untuk menggaya latar belakang kontainer artikel dengan warna putih, memberikan jarak dari tepi elemen, melengkungkan sudut, dan memberikan efek bayangan.

Dengan menerapkan CSS ini, judul artikel dan penjelasan akan memiliki gaya teks dan latar belakang sesuai dengan definisi yang ditentukan. Anda dapat menyesuaikan gaya teks dan latar belakang sesuai dengan kebutuhan desain dan preferensi Anda dengan menggunakan properti CSS yang relevan.

Related Articles

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Back to top button