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 aku buat khusus blogger padahal selector bukan hanya untuk blogger saja. Yeps, selector harus dikuasai oleh web desainer dan yang mau berguru CSS. Kenapa aku memperlihatkan judul ibarat diatas? Mungkin teman-teman berfikir judul diatas untuk menarik para blogger untuk membaca artikel ini.

Saya dengan lantang menjawab tidak kawan, aku buat judul demikian bukan untuk menarik para bloger untuk membaca artikel ini, tetapi lantaran banyak dari para blogger yang bertanya dalam lembaga dan sosial media seputar bagaimana cara mengatur ini, bagaimana cara pindah ini ke sisi lain, bagaimana cara semoga ini sanggup di atur kebawah sedikit dan masih banyak pertanyaan lain nya yang tidak aku sebutkan. Nah, dari pertanyaan tersebut maka menciptakan artikel ini dimana niatnya semoga para blogger sanggup berguru cara mengatur tampilan dari blog mereka dan sanggup mengatasi setiap hambatan yang terdapat pada tampilan blog para blogger.

Adapun tanggapan dari pertanyaan kedua, kenapa harus menguasai 5 selector dasar ini? Saya sanggup menjawab, lantaran untuk sanggup mengatur tampilan pada halaman website atau blog, teman-teman harus menguasai selektor. Jika teman-teman tidak sanggup menguasai selector ini, saya jamin jangan harap teman-teman sanggup mengubah tampilan dari website atau blog yang teman-teman miliki. Saya rasa semua pertanyaan dari judul telah terjawab kalau teman-teman merasa kalau tutorial ini bermanfaat silahkan lanjut membaca dan berguru besama . Mari kita eksklusif membahas inti dari judul diatas.

Mengenal Jenis-Jenis Selector Dasar CSS

Dalam CSS mempunyai jenis selector begitu bervariasi, bahkan sangat bermacam-macam tergantung kebutuhan kita untuk mendesain halaman web. Dalam tutorial 5 Selector Dasar Yang Harus Dikuasai Seorang Blogger Dan Desainer ini aku akan membahas 5 jenis selector dasar di dalam CSS. Selector dalam CSS tidak hanya 5 jenis, namun dalam kebanyakan perkara sudah mencukupi untuk menciptakan dan mengatur sebuah halaman web HTML dan CSS. Selector yaitu sebuah pola (pattern) atau konsep yang dipakai 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 berkhasiat untuk mencari semua tag yang ada dalam HTML untuk diberikan property dan value. Berikut pola penggunaan Universal Selector CSS:

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

Kode CSS diatas bermaksud untuk menciptakan semua tag HTML mempunyai font(tulisan) menjadi sans-serif dan menciptakan semua tag HTML berwarna hitam. Code warna diatas memakai hexadesimal kalau teman-teman butuh rujukan warna hexsadesimal sanggup dilihat disini.

Element Type Selector 

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

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

Contoh isyarat CSS diatas akan menciptakan semua tag <h1> menjadi abjad kapital, dan seluruh tag <p> akan berukuran 14pixel. Dengan mengguakan element type selector ini akan memperlihatkan efek dari awal tag hingga simpulan tag. Contoh Jika didalam tag <p> terdapat tag <i>,<b>, maka tag tersebut juga akan berukuran 14 pixel, hingga ditemui tag epilog </p>.

Class Selector 

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

<h1 class="judul"></h1> <h2 class="subjudul">Cara gampang menciptakan 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 sanggup dipakai oleh lebih dari 1 tag, dan dalam sebuah tag sanggup mempunyai lebih dari 1 class. Pada pola diatas pada baris terakhir tag P mempunyai atribut class  denagan nilainya lebih dari satu kata yaitu isi content, untuk memakai selecktornya teman-teman sanggup menentukan satu kata saja. Untuk lebih terang mari kita lihat pola dibawah ini.

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

Pada pola code CSS diatas kita mengubah seluruh class yang mempunyai nilai judul, warna text nya akan menjadi merah, seluruh class subjudul akan mempunyai besar font 20 pixel, warna text nya akan menjadi biru dan semua class isi content warna text nya akan berwana hitam dan mempunyai 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 kalau pada Class Selector kita memakai atribut class untuk tag HTML, untuk ID selector, kita memakai atribut id dan bila pada class selector kita memakai titik (.) untuk tanda CSS selector nya, pada ID Selector kita memakai tanda #(pagar) untuk lambang CSS selector nya. Untuk memakai ID selector ini kita membutuhkan tag HTML yang mempunyai atribut id, mari kita buatkan pola penggunaan atribut id pada HTML.

<h1 id="judul"></h1> <h2 id="subjudul">Cara gampang menciptakan website</h2>

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

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

Seperti yang sudah aku jelaskan diatas, pada code CSS diatas, kita memakai tanda pagar “#” sebagai penanda bahwa kita mencari tag yang mempunyai 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 dipakai kalau dibandingkan dengan selector-selector sebelumnya. Atribut Selector ini dipakai untuk mencari seluruh tag yang mempunyai atribut yang dituliskan pada code HTML. Contoh penggunaan Attribute Selector isyarat CSS yaitu sebagai berikut:

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

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

Selain kelima selector dasar diatas, dalam CSS masih mempunyai selector yang lebih jauh lagi untuk menentukan tag yang akan dimanipulasi, namun dalam perkara tertentu selector diatas sudah sanggup dipakai untuk memanipulasi tampilan dari halaman web. Sekian tutorial dari semoga sanggup membantu teman-teman blogger dan desainer dalam menciptakan dan memanipulasi halaman website dan blog.

Sumber http://pointwebsite.blogspot.com/