Mengenal Jenis Selector CSS

Jenis Selector

Sintak CSS terdisi atas tiga bagian, Yaitu :

1. Selector,
2. Property, dan
3. Value Selector {Property: value}.

Selector merupakan tag yang ingin diberikan style. Property merupakan atribut yang ingin didefinisikan dan value merupakan nilai dari atribut. Antara property dan value dipisahkan oleh tanda titik dua ( : ). mari kita lihat penjelasn ini dengan detail.

Contoh :

 body { color: black }

Jika value terdiri atas beberapa kata, maka value tersebut di apit dengan tanda kutip (" ").

Contoh :

p { font: "sans serif" }

Mendefinisikan Lebih Dari Satu Property

Untuk mendefinisikan lebih dari satu property, digunakan pemisah dengan tanda titik-koma ( ; ).

Contoh :

p { text-align: center; color: red }

Contoh di atas untuk menampilkan paragraph dengan alignment center dan warna text merah.

Grouping

Untuk mendefinisikan beberapa selector dengan style yang sama, kita dapat melakukan pengelompokkan (grouping) selector.  Setiap selector dipisahkan dengan menggunakan tanda koma ( , ).

Contoh :

h1, h2, h3, h4, h5, h6 { color: green }

Contoh diatas melakukan pengelompokkan semua element header. Setiap element header memiliki warna hijau.

Selector Class

Atribut class digunakan untuk mendefinisikan style yang dipakai untuk element HTML. Class juga dapat digunakan untuk mendefinisikan style yang berbeda untuk satu type element yang sama.

sebagai contoh, kita ingin mendefinisikan dua tipe paragraf, yaitu : satu dengan alignment kanan dan satu dengan alignment kiri :

p.right { text-align: right }

p.center { text-align: center }

Untuk menggunakan style paragraph di atas, digunakan atribut class di dalam element HTML.

Contoh :

<p class="right">

     Paragraph ini memiliki alignment kanan.

</p>

<p class="center">

     Paragraph ini memiliki alignment Kiri.

</p>

Kita dapat mendefinisikan style dengan memilih selector tanpa menggunakan element tag HTML. sehingga style tersebut dapat digunakan oleh beberapa element HTML.

Contoh :

center { text-align: center }

Style di atas dapat digunakan untuk element <h1> dan element <p> dengan menggunakan atribut class.

Contoh :

<h1 class="center">

       Header text ini akan memiliki alignment tengah.

</h1>

<p class="center">

     Paragraph ini akan memiliki alignment tengah.

</p>

Selector ID Class

Atribut id dapat didefinisikan dengan dua cara. Atribut id ini dapat didefinisikan pada semua element tag yang bersesuaian dengan suatu id tertentu, atau hanya pada satu element tag yang bersesuaian dengan suatu id tertentu.

Contoh :

<p id="intro">

      Paragraph ini akan memiliki alignment tengah.

</p>

Dalam contoh dibawah ini atribut id akan menyesuaikan semua element tag dengan id="intro" :

#intro

      {

        font-size: 110%;

        font-weight: bold;

        color: #0000ff;

        background-color: transparent;

       }

Dalam contoh dibawah ini atribut id hanya akan menyesuaikan element tag <p> dengan id="intro" :

p#intro

        {

          font-size: 110%;

          font-weight: bold;

          color: #0000ff;

         }

Demikian penjelasan jenis-jenis selector di CSS yang berbeda dari kekurangan serta keuntungan dari masing-masing selector tersebut.

Tweet

Postingan terkait:

— Senin, 20 Juni 2016 — Add Comment — CSS