Mengenal Jenis Jenis Selector CSS Design Web

jenis selector css – Mengenal Jenis Jenis Selector CSS Design Web – css merupakan singkatan dari Cascading Style Sheet, yaitu bahasa stylesheet yang digunakan untuk merubah tampilan dokumen yang terulis dalam HTML atau XML. Code Css dapat digunakan untuk memodifikasi tampilan html dengan mudah terstruktur dan rapi.

Seperti kata web paling banyak saya kunjungi yang membahas tentang design web dan pemrograman, yaitu si w3school.  Css itu adalah :

CSS is a language that describes the style of an HTML document.
CSS describes how HTML elements should be displayed.

mengenal menggunakan selector css design web

Mengenal macam-macam selector dalam css

Nah Css itu begitulah arti dan tujuannya dia di buat, merubapakan sebuah bahasa yang mendeskripsikan style dari sebuah dokumen html, css juga mendeskripsikan bagaimana sebuah element html ditampilkan.

Untuk memodifikasi element html tersebut, sebagai dasar ada baiknya kita mengenal jenis selector yang sering di gunakan dalam html. Selector tersebut banyak sekali jenisnya, namun ada beberapa jenis selector css yang sering di gunakan diantaranya:

  • Selector Universal

Selector Universal atau disebut selector keseluruhan/umum, artinya selector ini merupakan selector yang di tujukan untuk seluruh tag html. Selector universal ditandai dengna tanda bintang  ( * ). Contoh penggunaan selector universal ( * ).

* {padding:0;margin:0}
  • Selector ID

Selector ID selector css yang menggunakan tanda # , dimana selector ini bisa di panggil sekali saja. contoh penggunaan selector ID

#content{margin:0 auto}

 

  • Selector Class

Selector Class mirip dengan selector id, namun berbeda tanda penggunaannya dalam document css, selector class ditandai dengan tanda titik atau dot.

Yang paling mencolok pembeda antara selector id dan selector class  yakni, selector class dapat di panggil berulang-ulang didalam document css.

Contoh penggunaan selector class.

.container {background:#dedede}

 

  • Selector Tag

Selector Tag, merupakan selector yang menggunakan tag html, seperti tag p misalnya, jadi tag-tag html dapat di jadikan sebagai selector dalam css. Penggunaan selector tag dalam html.

p {padding:10px }

 

  • Selector Pseudo Class

Selector Pseudo Class, merupakan selector yang di gunakan untuk mendefenisikan bagian khusus dari sebuah element, selector Pseudo class dapat kita gunakan ketika kita ingin membuat sebuah tampilan khusus, misalnya:

a. Gaya sebuah selemen ketika mouse berada diatasnya.
b. Link yang sudah dikunjungi dan belum dikunjungi berbeda.
c. Gaya sebuah element ketika mendapatkan sebuah fokus dari mouse atau keyboard.

Sebagai contoh bentuk dari selector Pseudo Class:

a:hover {background:#333}
  • Selector Attribute

Selector Attribute, selector ini khusus untuk menghandle element html yang menggunakan attribute, misalnya ketika kita ingin mengubah sebuah link, sehingga berwarna hijau misalnya sebagai contoh dari bentuk selector Attribute:

a[target]{
background:yellow;
}

Khusus untuk selector ini, karena amat banyak contoh dan bedanya, silahkan di rujuk kehalaman w3school saja.

    • Selector Turunan (Parent Child)
 div > p {background:blue}

Selector ini menghandle element p, ketika parentnya adalah

.

Sebenernya masih banyak yang perlu dijelaskan soal jenis selector css ini, tapi bagian ini saya kira sudah cukup untuk pemula yang ingin mencoba css.

Leave a Reply

Your email address will not be published. Required fields are marked *