Setelah mempelajari Tutorial CSS dasar 1 dari CSS pada tutorial sebelumnya, dalam tutorial CSS kali ini kita akanlanjut mempelajari Tutorial CSS dasar 2 itu sendiri.
Kode HTML di atas memiliki kode CSS pada bagian head yang diinput menggunakan motode Metode Internal Style Sheets. Kita akan fokus pada bagian CSS saja:
Seperti yang dapat dilihat dari contoh diatas, aturan penulisan CSS adalah sebagai berikut:
CSS memiliki banyak selector, kita akan membahasnya satu persatu:
Contoh Universal Selector CSS:
Contoh kode CSS diatas akan membuat semua tag <h1> akan bergaris bawah, dan seluruh tag <p> akan berukuran 14pixel.
Efek dari element type selector adalah dari awal tag, sampai akhir tag. Jika didalam tag <p> terdapat tag <i>, maka tag tersebut juga akan berukuran 14 pixel, sampai ditemui tag penutup </p>.
Untuk penggunaan Class Selector, kita harus memiliki tag HTML yang mempunyai atribut class. Contohnya:
Perhatikan bahwa untuk semua tag diatas, kita menambahkan atribut class dengan nilainya adalah nama dari kelas itu sendiri. Sebuah nama class dapat dimiliki oleh lebih dari 1 tag, dan dalam sebuah tag dapat memiliki lebih dari 1 class.
Contohnya dalam baris terakhir pada contoh diatas,tag h2 memiliki atribut class=”judul penting berwarna”. Tag ini teridiri dari 3 class, yaitu judul, penting, dan class berwarna.
Sedangkan untuk kode CSS Class Selector adalah sebagai berikut:
Untuk menggunakan class selector, di dalam CSS kita menggunakan tanda titik sebelum nama dari class.
Untuk contoh kita, seluruh class yang memiliki nilai “paragraf_pertama”, warna text akan menjadi merah. Dan seluruh class judul akan memiliki font 20 pixel.
Contoh penggunaan atribut id pada tag HTML
Atribut id selain untuk selector CSS, juga berperan sebagai kode unik untuk masing-masing tag (terutama dipakai untuk kode JavaScript). Karena hal tersebut, id yang digunakan harus unik dan tidak boleh sama. Dengan kata lain, id hanya bisa digunakan satu kali dalam sebuah halaman web dan tidak boleh sama.
Contoh penggunaan id selector kode CSS Class Selector adalah sebagai berikut:
Di dalam kode CSS, kita menggunakan tanda pagar “#” sebagai penanda bahwa kita mencari tag yang memiliki id tersebut.
Contoh penggunaan Attribute Selector kode CSS adalah sebagai berikut:
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.
Walaupun memiliki kemampuan mencari tag yang sangat spesifik, namun atribut selector ini tidak terlalu sering digunakan.
Selain kelima selector dasar diatas, CSS masih memiliki selector yang lebih ‘jauh‘ dalam memilih tag yang akan dimanipulasi, salah satu contohnya, seperti pseudo selector yang digunakan untuk tiap event dari link, atau dikenal dengan efek mouseover, yaitu kita mencari kondisi pada saat mouse berada di atas tag tertentu. Pseudo Selector ini akan kita bahas pada lain kesempatan.
Itulah 5 selector dasar dalam CSS, yang selain berdiri sendiri, dapat juga digabungkan dengan selector lainnya untuk keperluan yang lebih khusus,Cukup sampai sini dulu penjelasan Tutorial CSS dasar 2,semoga jelas kita lanjut ke Tutorial CSS dasar 3 .
Aturan dan Cara Penulisan Kode CSS
Untuk lebih mudah memahami aturan dan cara penulisan kode CSS, dibawah ini adalah contoh kode HTML + CSS sederhana yang akan kita bahas secara lebih mendalam:<!DOCTYPE html><html><head><title>Belajar Penulisan CSS</title><style type="text/css">body { font-size: 14px; color: navy; }p { font-family: calibri, helvetica, sans-serif; }h1, h2 { text-decoration: underline; font-size: 23px; color: green; }</style> </head><body> <h1>Belajar Aturan dan Cara Penulisan Kode CSS</h1> <h2>Lorem ipsum dolor sit amet</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</p> <p>Eam facilis omittantur at, usu efficiantur neglegentur delicatissimi et, in per vero splendide persequeris. Semper persius his te, ea mea omnium aliquip alienum, in gloriatur vituperata has. An per dicat clita oporteat, explicari deterruisset ex per. Liber tibique ullamcorper ei duo, at hinc civibus oporteat his.</p> <p>Nam verear constituto an, eu latine bonorum euripidis vim. Quidam maiorum interesset pri id, usu vero saepe graeci ea. Prompta nominati oportere te usu. Ad eam nulla accusamus.</p> <h2>Lorem ipsum dolor sit amet</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</p> </body></html>
body { font-size: 14px; color: navy; }p { font-family: calibri, helvetica, sans-serif; }h1, h2 { text-decoration: underline; font-size: 23px; color: green; }- Selector di tempatkan pada awal penulisan CSS. Dalam contoh diatas, body, p, h1 dan h2 adalah selector. Khusus untuk selector yang lebih dari 1 (seperti pada contoh selector terakhir: h1,h2) untuk memisahkan kedua selector tersebut, digunakan tanda koma (,)
- Setelah penulisan selector, seluruh isi dari property dan valuenya (nilainya), berada di antara kurung kurawal “{“ dan “}”.
- Diantara property satu dengan yang lainnya, dipisahkan dengan tanda titik koma (;)
- Diantara property dengan value (nilai), dipisahkan dengan anda titik dua (:).
- Untuk property yang memiliki 2 kata , spasi diantaranya digantikan dengan tanda hubung (-), contohnya: background-color dan border-left.
- Untuk properti yang berada pada baris terakhir, kita boleh mengabaikan tanda ‘;’ sebagai tanda tutup, tetapi disarankan agar tetap menggunakan tanda ‘;’, karena bisa saja kita lupa menuliskan tanda titik koma pada saat menambahkan properti lainnya. Contoh property tanpa tanda ‘;’ dapat di lihat pada contoh “text-decoration: underline”.
CSS memiliki banyak selector, kita akan membahasnya satu persatu:
Universal Selector
Universal selector hanya ada 1 di dalam CSS, yaitu tanda bintang “*”. Selector ini bertujuan untuk ‘mencari’ semua tag yang ada.Contoh Universal Selector CSS:
h1 { text-decoration: underline; }p { font-size:14px; }Contoh kode CSS diatas akan membuat semua tag <h1> akan bergaris bawah, dan seluruh tag <p> akan berukuran 14pixel.
Efek dari element type selector adalah dari awal tag, sampai akhir tag. Jika didalam tag <p> terdapat tag <i>, maka tag tersebut juga akan berukuran 14 pixel, sampai ditemui tag penutup </p>.
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.Untuk penggunaan Class Selector, kita harus memiliki tag HTML yang mempunyai atribut class. Contohnya:
<p class=”paragraf_pertama”> Ini adalah sebuah paragraf pertama</p><h1 class=”judul”>Judul Artikel</h1><h2 class=”judul penting berwarna”>Sub Judul Artikel<h2>Perhatikan bahwa untuk semua tag diatas, kita menambahkan atribut class dengan nilainya adalah nama dari kelas itu sendiri. Sebuah nama class dapat dimiliki oleh lebih dari 1 tag, dan dalam sebuah tag dapat memiliki lebih dari 1 class.
Contohnya dalam baris terakhir pada contoh diatas,tag h2 memiliki atribut class=”judul penting berwarna”. Tag ini teridiri dari 3 class, yaitu judul, penting, dan class berwarna.
Sedangkan untuk kode CSS Class Selector adalah sebagai berikut:
.paragraf_pertama { color: red; }.judul { font-size:20px; }.penting { color:red; font-size: 1em; } |
Untuk contoh kita, seluruh class yang memiliki nilai “paragraf_pertama”, warna text akan menjadi merah. Dan seluruh class judul akan memiliki font 20 pixel.
ID Selector
ID Selector bersama-sama dengan class selector merupakan selector paling umum dan juga sering dipakai (walau tidak sesering class selector). 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.Contoh penggunaan atribut id pada tag HTML
<p id=”paragraf_pembuka”> Ini adalah sebuah paragraf pembuka</p><h1 id=”judul_utama”>Judul Artikel</h1><h2 id=”sub_judul”>Sub Judul Artikel<h2>Atribut id selain untuk selector CSS, juga berperan sebagai kode unik untuk masing-masing tag (terutama dipakai untuk kode JavaScript). Karena hal tersebut, id yang digunakan harus unik dan tidak boleh sama. Dengan kata lain, id hanya bisa digunakan satu kali dalam sebuah halaman web dan tidak boleh sama.
Contoh penggunaan id selector kode CSS Class Selector adalah sebagai berikut:
#paragraf_ pembuka { color: red; }#judul utama { font-size:20px }Attribute Selector
Selector dasar terakhir kita adalah attribute selector. Selector ini sedikit lebih advanced dibandingkan dengan selector-selector sebelumnya. Atribut Selector ini digunakan untuk mencari seluruh tag yang memiliki atribut yang dituliskan.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.
Walaupun memiliki kemampuan mencari tag yang sangat spesifik, namun atribut selector ini tidak terlalu sering digunakan.
Selain kelima selector dasar diatas, CSS masih memiliki selector yang lebih ‘jauh‘ dalam memilih tag yang akan dimanipulasi, salah satu contohnya, seperti pseudo selector yang digunakan untuk tiap event dari link, atau dikenal dengan efek mouseover, yaitu kita mencari kondisi pada saat mouse berada di atas tag tertentu. Pseudo Selector ini akan kita bahas pada lain kesempatan.
Itulah 5 selector dasar dalam CSS, yang selain berdiri sendiri, dapat juga digabungkan dengan selector lainnya untuk keperluan yang lebih khusus,Cukup sampai sini dulu penjelasan Tutorial CSS dasar 2,semoga jelas kita lanjut ke Tutorial CSS dasar 3 .
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.