Name: Galeri Cuci Mata
Address: Jl Asano RT 02 Tanah Hitam, Abepura, Jayapura, Papua, 98415, Indonesia
Telephone: WA 082248262925
Price range: $$

Perhatikan 3 contoh elemen dibawah ini, yang didalam setiap elemen terdapat 4 elemen paragraf.
Ke 3 elemen ini menggunakan tag yang sama dan berisi elemen yang sama, tapi ditampilkan dengan warna yang berbeda.

Paragraf paragraf paragraf

Amati cara penggunaan atribut pada masing-masing tag dalam kode HTML asal dari contoh elemen tersebut beserta penulisan style CSS nya dibawah ini :

<!--tag div menggunakan 2 class dalam 1 atribut.-->
<div class='bingkai kolom-1'>
  <p>Paragraf paragraf paragraf</p>
  <p id='ke-2'>Paragraf paragraf paragraf</p>
  <p>Paragraf paragraf paragraf</p>
  <p id='ke-4'>Paragraf paragraf paragraf</p>
</div>
<br><!--tag br untuk membuat baris baru.-->
<div class='bingkai kolom-2'>
  <p>Paragraf paragraf paragraf</p>
  <p id='ke-2'>Paragraf paragraf paragraf</p>
  <p>Paragraf paragraf paragraf</p>
  <p id='ke-4'>Paragraf paragraf paragraf</p>
</div>
<br>
<div class='bingkai kolom-3'>
  <p>Paragraf paragraf paragraf</p>
  <p id='ke-2'>Paragraf paragraf paragraf</p>
  <p>Paragraf paragraf paragraf</p>
  <p id='ke-4'>Paragraf paragraf paragraf</p>
</div>

<style>
    /*-- menyeleksi semua elemen dengan
    class bingkai --*/
    .bingkai{
      border:2px solid; /*membuat garis tepi setebal 2 piksel*/
      color: grey; /* menetapkan warna abu-abu pada teks*/
      padding-left: 10px /* menetapkan jarak tepi dalam sebanyak 10 piksel */
    }
    /*-- menyeleksi elemen dengan class kolom-1
    dan menetapkan warna merah pada garis bingkai--*/
    .kolom-1{border-color:red}
    /*-- menyeleksi elemen dengan  class kolom-2
    dan menetapkan warna hijau pada garis bingkai--*/
    .kolom-2{border-color:green}
    /*-- menyeleksi elemen dengan  class kolom-3
    dan menetapkan warna biru pada garis bingkai--*/
    .kolom-3{border-color:blue}
    /*-- menyeleksi elemen dengan id ke-2
    dan menetapkan warna teks cokelat--*/
    #ke-2{color:brown}
    /*-- menyeleksi elemen dengan id ke-4
    dan menetapkan warna teks oranye--*/
    #ke-4{color:orange}
</style>

HTML Demo

Atribut class