Blog Belajar Css: Css: Class dan Id

Halo pembaca! Class di Css ditandai dengan . (titik) sedangkan id ditandai dengan # (tagar). Bedanya, class bisa dipanggil (digunakan) berulang-ulang dalam satu halaman sedangkan id hanya satu kali saja (di halaman yang sama).

Contohnya; Anda mempunyai class warna maka ditulis dengan .warna. Jika id maka #warna. Deklarasi atribut misalnya color untuk mengganti warna tulisan menjadi merah sama saja caranya, yaitu dengan menuliskan: color: red; atau menggantinya dengan kode warna heksa.

Untuk lebih jelasnya, perhatikan contoh berikut: classid.html


<!DOCTYPE HTML>

    <html>

        <head>

            <title>Contoh Css: Class dan Id</title>

            <style type="text/css">

                .warna{

                    color:red;

                }

                #warna{

                    color:red;

                }

            </style>

        </head>

    <body>

        <p class="warna">Ini tulisan warnanya merah</p>

        <p id="warna">Ini tulisan warnanya merah 2</p>

        <p class="warna">Ini tulisan warnanya merah 3</p>

        <p>Ini tulisan warnanya default (hitam)</p>

    </body>

</html>

Output:

Output di Firefox.

Contoh di atas penulis menggunakan elemen HTML <p>, Anda bisa menggantinya dengan elemen HTML lain, misalnya <span>, <div>, <li> atau lainnya.

<span class="warna">teks..</span>
<div class="warna">teks...</div>

Sabtu, 14 Februari 2015

Css: Class dan Id

Tidak ada komentar:

Posting Komentar