Assalamu'alaikum Wr.Wb
A. PENDAHULUAN
Malam gays, malam ini saya akan shering tetang ID, TAG, DAN CLASS PADA CSS.
B. LATAR BELAKANG
Ingin mengetahui ID, TAG, DAN CLASS PADA CSS secara langsung.
C. TUJUAN
Agar bisa membuat yang terkait dengan ID, TAG, DAN CLASS PADA CSS.
D. PEMBAHASAN
ID ADALAH:
ID=UNIK,seperti identitas.Dalam satu halaman web tidak boleh ada kode id yang sama.Ingat ID dilambangkan dengan tanda (#)
contoh :
(CSS nya)#header { ISI CSS }
htmlnya<div id='header'>---ISI KONTEN---</div>
Untuk selector ID pada Tag HTML yang akan diberi selector akan diberi nama ID berikut contohnya:
<html>
<head>
<title>Pemakaian Selector ID dan Selector Class pada CSS</title>
<link href=”css/style.css” type=”text/css” rel=”stylesheet”/>
</head>
<body>
<p>
Pemakaian Selector ID dan Selector Class pada CSS
</p>
<p id=”namaid”>Pemakain Selector ID pada CSS akan memakai Atribut #
</p>
</body>
</html>
Setelah menentukan ID nya semisal “namaid” (anda bebas menentukannya) , maka pada file CSS anda menggunakan selector # berikut contohnya :
Pada file CSS :
#namaid{
font-family:Verdana;
color:#3300FF;
font-size:16px;
font-weight:bold;
}
Selector ID
Selector ID mirip dengan class, kita menggunakannya untuk membuat style pada setiap tag html. Untuk membuat id, kita memakai tanda pagar (#) sebelum nama id-nya, berbeda dengan class yang memakai tanda titik (.) sebelum nama class-nya
format :
#nama_id {property:value}
Secara teori ID hanya bisa digunakan sekali saja dalam tag html, artinya jika suatu ID sudah dipakai dalam tag <div> (misal) maka pemakaian ID yang sama dalam tag html yang berikutnya akan diabaikan. Namun pada kenyataannya ID bisa digunakan berulang-ulang dalam tag html yang berbeda maupun yang sama, mirip dengan class generic.
Saya rasa cukup sampai di sini. Saya sengaja tidak akan membuat contoh untuk bahasan ID ini, karena untuk latihan dan untuk mengukur pemahaman sobat semua, maka saya serahkan pembuatan contoh style memakai ID kepada sobat semua… Ayo buat aplikasinya sendiri-sendiri, terserah sobat saja 
.
Semua elemen HTML yang memiliki id sama dengan nama style id yang anda deklarasikan akan memiliki style yang sama sesuai dengan id tersebut.
Id selector didefinisikan dengan tanda "#".
Misalkan pada contoh kode CSS berikut;
#idku{color:red;}
Maka semua elemen HTML yang memiliki id = "idku" akan memiliki style yang sama, yaitu color:red.
Codingku HTML Editori
<!DOCTYPE html>
<html>
<head>
<style>
#idku{ color:red;} /* ini adalah definisi id css */
</style>
</head>
<body>
<p id="idku">Paragraf ini ber-id : idku </p>
<p>Paragraf ini paragraf tanpa id </p>
<p id="idloe">Paragraf ini ber-id : idloe </p>
</body>
</html>
Bila anda perhatikan pada contoh di atas, paragraf dengan id="idloe" tidak memiliki perubahan atau sama dengan paragraf tanpa id karena "idloe" belum di atur di CSS.
dalam penggunaanya, ID (disimbolkan => #) hanya bisa dipanggil/dipakai 1 kali dalam 1
TAG ADALAH:
Tag CSS juga dikenal sebagai elemen atau penyeleksi. Mereka memiliki tata letak dasar yang sangat mirip dengan tag HTML biasa.
Regular HTML tag <tag property="value">
CSS perintah elemen tag {properti: value;}
Salah satu perbedaan utama adalah penggunaan} kurung {bukan <> kurung.
ELEMEN dapat menjadi banderol normal HTML, id, atau kelas.
The PROPERTI dan NILAI adalah bentuk yang sama dengan tag HTML.
tag Elemen
Elemen tag sangat mirip dengan tag HTML biasa. Berikut adalah contoh yang menunjukkan beberapa teks biasa yang diformat dalam warna merah:
Lebih Red Teks
Hasilnya adalah sama. Contoh di atas menunjukkan bagaimana menggunakan inline CSS style, di mana perintah sebenarnya adalah bagian dari tag HTML biasa. Itu akan membantu pada kasus individu, tetapi ketika Anda ingin SEMUA teks di semua wilayah <p> menjadi merah, Anda dapat menggunakan style CSS tertanam. Ini menempatkan perintah CSS ke daerah KEPALA kode.
KEPALA daerah <style type="text/css">
<- P {color: # ff0000;} ->
</ style>
BODY daerah <p> Namun lagi </ p>
tidak di sini
<p> dan lagi </ p> Namun lagi
tidak di sini
dan lagi
Semua teks dalam tag <p> pada halaman tersebut akan terpengaruh oleh perintah CSS, membuat mereka merah. Setiap teks di luar area <p> tidak akan terpengaruh.
Tag <li> adalah awal dari “List Item (Item dari daftar).” Tag <p> adalah untuk “Paragraph (alinea/paragraf).” Dan <a> adalah untuk jangkar “Anchor (jangkar),” yang merupakan hal yang membuat sebuah hyperlink.
Tag “ul” adalah sebuah daftar dengan sebuah hyperlink per item. Ini akan kita pergunakan sebagai “menu navigasi situs,” yang me-link ke halaman-halaman lain dari halaman Web kita. Sebagai anggapan, seluruh halaman dari situs kita mempunya menu yang serupa.
dalam satu tag html bisa kita tambahkan 2 css selector
contohnya adalah :<li id="comment" class="item">
CLASS ADALAH:
class itu adalah kebalikan dari ID,penggunaannya suka suka/seperlunya.Dalam satu web diperbolehkan ada kode "." yang sama,Class dilambangkan dengan tanda (.)
contohnya
(css nya)
.descriptionwrapper {isi css }
htmlnya
<div class='descriptionwrapper'>isi konten</div>
Selector Class
Selector class digunakan untuk menentukan style dari sebuah group elemen. Berbeda dengan ID, selector class bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen-elemen yang ada pada sebuah halaman web. Selector class dituliskan dengan ditandai dengan tanda titik “.” .
Contoh selector class
komentar
{
text-align:left;
color:red;
}
Pada bagian dokumen web, misalnya akan diterapkan pada paragraph dan pada sebuh div dalam sebuah dokumen web yang sama, dapat dituliskan
<p class="komentar"> Ini adalah paragraph komentar </p>
<div class="komentar">Ini bagian komentar</p>
Bagian mana saja dari sebuah dokumen html yang memanggil class ini, akan memiliki style yang sama, yakni sesuai aturan tersebut, maka tulisan akan berada di tengah dan berwarna merah. Pada kondisi lain, kita menginginkan apabila sebuah class hanya berlaku pada sebuah paragraph saja. Untuk bagian div tidak berlaku. Aturan tersebut bisa kita tuliskan sebagai berikut:
p.komentar {text-align:center;}
Aturan ini akan berlaku bagi setiap paragraph <p> yang memiliki class=”komentar” saja.
Cukup sampai disini tulisan kali ini, berikutnya akan dilanjutkan dengan 3 cara memasukkan dokumen css ke dalam halaman web anda. Kalau boleh mengingatkan, silahkan langsung dicoba yang anda baca hari ini, biar tidak menguap entah kemana dikemudian hari…
Setelah sebelumnya saya telah menulis mengenai tutorial Css : Cara Memasukan Sript CSS ke Dalam HTML , kali ini saya akan menulis mengenai tutorial Css mengenal Calass dan Id. Class dan Id merupakan sebuah selector yang lebih selektif lagi karena anda dapat mengatur tag Html yang sama ditampilkan secara berbeda tergantung dari Class dan Id yang di gunakan.
agar anda dapat lebih mengetahui Class dan Id pada CSS silahkan perhatikan contoh berikut :
<html>
<head>
<title>tutorial CSS : Mengenal Class dan Id</title>
<style>
#header {background-color: blue; padding: 1 em}
.intro {color : red; font-weight:blod}
</style>
</head>
<body>
<div id="header">
<h1>Latihan CSS</h1>
<p class="intro">Saya sedang belajar CSS</p>
<p class="intro">Saya sedang belajar Class dan Id</p>
</div>
</body>
</html>
Keterangan :
Untuk penggunaan Id maka setiap menuliskan code CSS wajib didahului oleh tanda paga (#)
Untuk penggunaan Class maka setiap menuliskan code CSS wajib didahului oleh tanda titik (.)
Seperti contoh di atas
#header : Id
.intro : Class
Untuk memunculkan Id gunakan <div id="nama id">
untuk memunculkan class gunakan <p class="nama class">
biasanya id dan class digunakan untuk membagi-bagi bagian antara header footer dan juga sidebar, agar lebih spesifik.
Sama seperti pemakaian selector ID, selector class juga meminta tanda pada Tag HTML dengan nama class berikut ini contohnya:
<html>
<head>
<title>Pemakaian Selector ID dan Selector Class pada CSS</title>
<link href=”css/style.css” type=”text/css” rel=”stylesheet”/>
</head>
<body>
<p>
Pemakaian Selector ID dan Selector Class pada CSS
</p>
<p class=”namaclass”>Pemakain Selector CLASS pada CSS akan memakai Atribut (.)
</p>
</body>
</html>
Setelah menentukan CLASS nya semisal “namaclass” (anda bebas menentukannya) , maka pada file CSS anda menggunakan selector (.) atau titik/dot berikut contohnya :
Pada file CSS :
.namaclass{
font-family:Verdana;
color:#3300FF;
font-size:16px;
font-weight:bold;
}
Class dalam css digunakan jika kita ingin memberikan lebih dari satu jenis style pada suatu tag html. Dalam hal ini, terdapat 3 jenis class yang bisa digunakan yaitu :
class, adanya selector yang diikuti dengan tanda titik (.) dan nama class-nya, lalu pendefinisian property dsan value nya.
format :
selector.nama_class {property:value}
Untuk nama_class kita dibebaskan untuk menentukannya sendiri.
Generic class, tidak terdapat selector dan langsung diawali dengan tanda titik (.) dan nama class nya.
format :
.nama_lass {property:value}
Sama halnya dengan tipe pertama, kita dibebaskan untuk menentukan nama kelasnya. Nah dari dua jenis class di atas, apakah sobat dapat menangkap perbedaan fungsi dalam penggunaanya? Supaya lebih jelas, kita buat contoh terlebih dahulu.
<html>
<head>
<title>Perbedaan jenis class</title>
<style>
p.merah {color:red}
.warnabiru {color:blue}
</style>
</head>
<body>
<p class="merah">
Warna tulisan dalam paragraf ini akan mengikuti aturan style class yang telah ditentukan di atas, yaitu merah.
</p>
<p class="warnabiru">
Warna tulisan dalam paragraf ini akan mengikuti aturan style class yang telah ditentukan di atas, yaitu biru.
</p>
<h3 class="warnabiru">
Warna tulisan heading ini akan berwana biru.
</h3>
</body>
</html>
Jika sobat jeli, tipe pertama style class nya hanya bisa digunakan untuk tag paragraf (p) saja, sedangkan tipe kedua–generic class– bisa digunakan untuk setiap tag html oleh karena itu class ‘.warnabiru‘ bisa digunakan dalam tag paragraf (p) dan tag heading (h3). Dapat dipahami?
Pseudo class, merupakan style built in yang telah ada pada aturan css dan didukung oleh beberapa browser. Nama class dari tipe ini sudah ditentukan jadi kita tidak bisa merubah-rubah nama class nya secara sembarangan.
format :
selector:nama_c lass {property:value}
contohnya adalah style untuk link,
a:link{color:blue}
a:visited{color:purple}
a:hover(color:red}
Perbedaan utama dengan id selector adalah bila id selector digunakan untuk mendefinisikan satu elemen HTML sedangkan class selector umumnya digunakan untuk mendefinisikan style satu kelompok dari banya elemen.
Class selector didefinisikan dengan tanda titik ".".
.kelasku{color:green;}
Dari contoh kode CSS di atas :
- .kelasku adalah nama dari kelas.
- Semua elemen HTML dengan class "kelasku" akan berwarna green/hijau.
Codingku HTML Editori
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.kelasku { color:green; }
</style>
</head>
<body>
<h2 class="kelasku">Ini adalah heading dengan CSS class "kelasku"</h2>
</body>
</html>
bagi para pemula, mungkin mengira tidak ada perbedaan yang jauh antara ID dan Class dalam pemakainnya. tapi sebenarnya, terdapat perbedaan yang cukup jauh antara ID dan Class.
dalam penggunaanya, ID (disimbolkan => #) hanya bisa dipanggil/dipakai 1 kali dalam 1 halaman. sedangkan Class {disimbolkan => . (baca:dot)} bisa dipanggil/dipakai lebih dari 1 kali (beberapa kali) dalam 1 halaman.
Contoh Peng-aplikasian:
Selector ID :
#main-wrapper {width:600px}
hanya bisa dipanggil 1 kali dalam 1 halaman
<div id='main-wrapper'/>
Selector Class :
.kotak-item {background: #000;color:#fff;text-align:center;font-size:40px;}
Bisa dipanggil beberapa kali dalam 1 halaman
<div class='kotak-item'>Belajar HTML</div>
<div class='kotak-item'>Bersama Platorial</div>
E. KESIMPULAN
Itulah Perbedaan Selector ID dan Class Pada CSS.
F. REFERENSI
http://rifkayora182.blogspot.com/2013/05/pengertian-id-tag-dan-class-pada-css.html
F. PENUTUP
jika ada yang mau bertanya, kritik dan serta saran. Silahkan tinggalkan komentar dibawah post ini :-bd.
Trima Kasih.
Wassalamu'alaikum Wr.Wb
