5 Selector Dasar Yang Harus Dikuasai Seorang Blogger Dan Desainer

Jika teman-teman membaca kembali judul artikel ini, mungkin ada dua pertanyaan yang timbul dari judul tersebut, kenapa harus dikuasai oleh seorang blogger? dan kenapa harus menguasai 5 selector dasar ini?. Ya, kenapa judul saya buat khusus blogger padahal selector bukan hanya untuk blogger saja. Yeps, selector harus dikuasai oleh web desainer dan yang mau belajar CSS. Kenapa saya memberikan judul seperti diatas? Mungkin teman-teman berfikir judul diatas untuk menarik para blogger untuk membaca artikel ini.

Saya dengan lantang menjawab tidak kawan, saya buat judul demikian bukan untuk menarik para bloger untuk membaca artikel ini, tetapi karena banyak dari para blogger yang bertanya dalam forum dan sosial media seputar bagaimana cara mengatur ini, bagaimana cara pindah ini ke sisi lain, bagaimana cara agar ini dapat di atur kebawah sedikit dan masih banyak pertanyaan lain nya yang tidak saya sebutkan. Nah, dari pertanyaan tersebut maka Point Website membuat artikel ini dimana niatnya agar para blogger dapat belajar cara mengatur tampilan dari blog mereka dan dapat mengatasi setiap kendala yang terdapat pada tampilan blog para blogger.

Adapun jawaban dari pertanyaan kedua, kenapa harus menguasai 5 selector dasar ini? Saya dapat menjawab, karena untuk dapat mengatur tampilan pada halaman website atau blog, teman-teman harus menguasai selektor. Jika teman-teman tidak bisa menguasai selector ini, saya jamin jangan harap teman-teman dapat mengubah tampilan dari website atau blog yang teman-teman miliki. Saya rasa semua pertanyaan dari judul telah terjawab jika teman-teman merasa kalau tutorial ini bermanfaat silahkan lanjut membaca dan belajar besama Point Website. Mari kita langsung membahas inti dari judul diatas.

Mengenal Jenis-Jenis Selector Dasar CSS

Dalam CSS memiliki jenis selector begitu bervariasi, bahkan sangat beragam tergantung kebutuhan kita untuk mendesain halaman web. Dalam tutorial 5 Selector Dasar Yang Harus Dikuasai Seorang Blogger Dan Desainer ini saya akan membahas 5 jenis selector dasar di dalam CSS. Selector dalam CSS tidak hanya 5 jenis, namun dalam kebanyakan kasus sudah mencukupi untuk membuat dan mengatur sebuah halaman web HTML dan CSS. Selector adalah sebuah pola (pattern) atau konsep yang digunakan untuk mencari suatu tag di dalam HTML untuk diberikan property dan value pada tag HTML tersebut. Pada tutorial ini kita akan membahas satu persatu selector tersebut.

Universal Selector

Universal selector dalam CSS hanya ada 1 selector universal yaitu selector yang ditandai dengan tanda bintang (*). Selector ini berguna untuk mencari semua tag yang ada dalam HTML untuk diberikan property dan value. Berikut contoh penggunaan Universal Selector CSS:

* {
        font-family: sans-serif;
 color: #000000;
  }

Kode CSS diatas bermaksud untuk membuat semua tag HTML memiliki font(tulisan) menjadi sans-serif dan membuat semua tag HTML berwarna hitam. Code warna diatas menggunakan hexadesimal jika teman-teman butuh referensi warna hexsadesimal dapat dilihat disini.

Element Type Selector

Element Type Selector atau lebih dikenal sebagai Tag Selector adalah merupakan selector yang digunakan pada tag html yang nilainya merupakan tag HTML itu sendiri. Setiap tag yang ada dalam HTML bisa digunakan sebagai selector, contoh h1,h2,a,p,img dll. Mari kita lihat contoh penggunaan Element Type Selector CSS berikut ini.

h1 { 
 text-transform: uppercase;
}   
p { 
   font-size:14px;
}

Contoh kode CSS diatas akan membuat semua tag <h1> menjadi huruf kapital, dan seluruh tag akan berukuran 14pixel. Dengan mengguakan element type selector ini akan memberikan efek dari awal tag sampai akhir tag. Contoh Jika didalam tag terdapat tag ,, maka tag tersebut juga akan berukuran 14 pixel, sampai ditemui tag penutup .

Class Selector

Class Selector merupakan salah satu selector yang paling umum dan paling sering digunakan. Class selector akan mencari seluruh tag yang memiliki atribut class dengan nilai yang sesuai. Class selector ini dilambangkan dengan titik(.),Untuk penggunaan Class Selector, kita harus memiliki tag HTML yang mempunyai atribut class. Contohnya:

<h1 class="judul">Point Website</h1>
<h2 class="subjudul">Cara mudah membuat website</h2>
<p class="isi content">Website tutorial seputar pembuatan website</p>

Teman-teman perhatikan pada code diatas untuk semua tag HTML diatas, kita menambahkan atribut class. Sebuah nama class dapat digunakan oleh lebih dari 1 tag, dan dalam sebuah tag dapat memiliki lebih dari 1 class. Pada contoh diatas pada baris terakhir tag P memiliki atribut class denagan nilainya lebih dari satu kata yaitu isi content, untuk menggunakan selecktornya teman-teman dapat memilih satu kata saja. Untuk lebih jelas mari kita lihat contoh dibawah ini.

.judul {
        color: red;
    }
.subjudul { 
 color: blue;
        font-size:20px;
    }
.content { 
       color:black;
       font-size: 15px;
    }

Pada contoh code CSS diatas kita mengubah seluruh class yang memiliki nilai judul, warna text nya akan menjadi merah, seluruh class subjudul akan memiliki besar font 20 pixel, warna text nya akan menjadi biru dan semua class isi content warna text nya akan berwana hitam dan memiliki ukuran font 15px.

ID Selector

ID Selector juga merupakan salah satu selector yang paling umum dan sangat sering digunakan. Penggunaan ID selector hampir sama dengan Class Selector, dengan perbedaan jika pada Class Selector kita menggunakan atribut class untuk tag HTML, untuk ID selector, kita menggunakan atribut id dan bila pada class selector kita menggunakan titik (.) untuk tanda CSS selector nya, pada ID Selector kita menggunakan tanda #(pagar) untuk lambang CSS selector nya. Untuk menggunakan ID selector ini kita membutuhkan tag HTML yang memiliki atribut id, mari kita buatkan contoh penggunaan atribut id pada HTML.

<h1 id="judul">Point Website</h1>
<h2 id="subjudul">Cara mudah membuat website</h2>

Pada atribut class yang sudah saya jelaskan diatas jika teman-teman masih ingat Atribut Class dapat digunakan untuk lebih dari 1 buah tag dalam HTML, namun pada Atribut ID tidak diperbolehkan sebab atribut id berperan sebagai kode unik untuk masing-masing tag HTML. Dengan kata lain, id hanya bisa digunakan satu kali dalam sebuah halaman web dan tidak boleh sama. Coba teman-teman perhatikan contoh code HTML diatas kita sudah membuatkan 2 buah Atribut ID dengan nilai judul, subjudul kedua atribut id tersebut hanya bisa digunakan satu kali saja. Untuk penggunaan ID Selector dalam CSS dapat lihat pada contoh dibawah ini.

#judul {
        color: red;
    }
#subjudul { 
 color: blue;
        font-size:20px;
    }

Seperti yang sudah saya jelaskan diatas, pada code CSS diatas, kita menggunakan tanda pagar “#” sebagai penanda bahwa kita mencari tag yang memiliki id tersebut. Pada code diatas kita mengubah warna dari Artibut ID yang nilainya judul menjadi merah dan mengubah Atribut ID subjudul menjadi warna biru.

Attribute Selector

Selector ini sedikit lebih sulit dan juga jarang digunakan jika dibandingkan dengan selector-selector sebelumnya. Atribut Selector ini digunakan untuk mencari seluruh tag yang memiliki atribut yang dituliskan pada code HTML. Contoh penggunaan Attribute Selector kode CSS adalah sebagai berikut:

[href] {
       font-size:20px ;
       }
[type="submit"] {
       width:30px;
 }

Seperti yang dapat dilihat dari contoh diatas, setiap atribut selector harus berada diantara tanda kurung siku “[” dan “]”. [href] akan cocok dengan seluruh tag yang memiliki atribut href, apapun nilai dari href (href biasanya terdapat pada tag <a>).Untuk contoh [type=”submit”] akan cocok dengan tag yang memiliki atribut type dengan nilai submit, yang dalam hal ini adalah tombol submit dalam form.

Selain kelima selector dasar diatas, dalam CSS masih memiliki selector yang lebih jauh lagi untuk memilih tag yang akan dimanipulasi, namun dalam kasus tertentu selector diatas sudah dapat digunakan untuk memanipulasi tampilan dari halaman web. Sekian tutorial dari Point Website semoga dapat membantu teman-teman blogger dan desainer dalam membuat dan memanipulasi halaman website dan blog.