X
    Categories: HTML

ID dan CLASS dalam CSS

Ads

ID dan CLASS dalam pemrograman CSS Adalah selector yang dibuat oleh seorang webmaster dalam memanipulasi pada satu elemen pada halaman HTML / web.
ID didefinisikan dengan menggunakan tanda ” # ” dan CLASS didefinisikan dengan menggunakan tanda titik ” . ” .
Kalau CLASS digunakan untuk memanipulasi banyak elemen dengan satu selector.

Contoh Penulisan ID pada elemen HTML

<div id=”selector”>
ISI Elemen dengan ID selector</div>

Syntak CSS nya menjadi

#selector{properti: value;}

Contoh Penulisan CLASS pada elemen HTML

<div class=”selector”>
ISI elemen pada class selector</div>

Syntak CSS nya menjadi

.selector{properti: value;}

Nah,bedanya hanya pada pemberian tanda psgsr  “#” dan titik “.” diawal penulisan.

Contoh penerapan ID dan CLASS pada suatu template HTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <title>ID dan Class</title>

        <style type=”text/css”>
           body{background: #f1f1f1;
                     text-align: center
                     font family: arial;
                     font-size: 12px
                      }
            #slelect-wrapper {width: 500px;
                           font-size: 93%;border: 1px solid #000;  
                            }
            .select-1a{background: #ccc;
                          border: 1px solid red;
                          font-style: italic;
                           width: 300px;
                           }
            .select-1b{width: 300px;
                          background: #ccc;
                          border: 1px solid red;
                          font-style: italic;
                          }                  </style>
</head>
<body>
<div id=”select-wrapper”>
 <div class=”select-1a”>
 Isi dari CLASS select-1a
<div>
<div class=”select-1b”>
Isi dari CLASS select-1b
</div>
<div><!– End select-wrapper –>
    </body>
</html>

———————————Tambahan———————————————-
Descendant Selector
Apa lagi itu Descendant Selector?…
Descendant Selector adalah selector yang memanfaatkan elemen diatasnya , untuk dimanipulasi kemudian.

Lihat contoh saja,biar mudah 😀

Misalnya kode HTMLnya begini;

<div class=”post-body”>
<h1>Contoh judul postingan</h1>
<p>Contoh paragraf contoh paragraf disini paragraf<p>
</div>

p dan h1 adalah selector turunan dari selector “.post-body”
Jadi,isi “<p>” dan “<h1>”adalah memiliki style huruf yang sama,baik font-family,font weight,text decoration dll dengan manipulasi CSS CLASS dari post-body.

<h1> dan <p> adalah descendant selector yang bisa kita atur / manipulasi dengan memanfaatkan elemen diatasnya yaitu CLASS post-body

Jika post-body mendeklarasikan text warna merah,maka text pada h1 dan <p> juga memiliki warna merah , termasuk jika mendeklarasikan  style font yang lain.
Lalu bagaimana cara agar kita memberi satu perbedaan pada style font pada masing ,masing  h1 dan p dimana itu merupakan descendant delector dari “.post-body” ….

Begini cara dan contoh penulisannya;

.post-body h1{ font-size: 25 px}
.post-body p{font-color: blue}

Artikel di Update pada Februari 17, 2021 11:59 am

Ads
Ed:
Ads

Website ini menggunakan kukis

Baca selengkapnya
Ads