CSS Class
CSS Class adalah sintax CSS yang digunakan untuk memformat tag atau elemen HTML dengan properti dan value yang sama, dimana tag atau elemen HTML tersebut akan muncul lebih dari satu kali dalam halaman web.
Sebagai contoh dalam suatu halaman web pasti terdapat beberapa paragraf dan jika seluruh paragraf itu ingin diformat dengan warna font, jenis font dan size font yang sama, maka cukup mendefenisihkan style sheetnya dengan memberikan class pada tag p tersebut, sebagai contoh; <p class=”center”>isi paragraf</p>. Untuk memberikan style yang sama pada paragraf-paragraf tersebut tinggal memanggil class center dari tag p diatas untuk diformat dengan CSS.
Style yang dibuat dengan CSS class juga bisa diaplikasikan kedalam tag atau elemen HTML yang berbeda. Sebagai contoh untuk tag p dan tag h bisa diformat dengan class yang sama, sehingga ketika kita memanggil class yang sudah dibuat, p dan h akan muncul dengan syle yang sama.
Format penulisannya adalah;
Selector.class-name {property:value;} atau
.class-name {property:value;}
Misalnya;
p.center
{
color:red;
font-family:trebuchet;
text-align: center;
font-size:20px;
}
Maka seluruh paragraf dengan class “center” akan tampil dengan warna font merah, jenis font trebuchet dan ukuran fontnya 20px. Akan tetapi bagaimana jika kita ingin membuat tampilan antar paragraf berbeda? Untuk pengaturan inilah dibutuhkan CSS Class.
Untuk mempermudah pemahaman akan CSS Class ini kita akan langsung masuk ke contoh aplikasi. Dalam contoh ini kita akan menggunakan Internal CSS.
Contoh aplikasi;
<html>
<head>
<title>Mari Belajar CSS</title>
<style type="text/css" media=screen>
.center
{
color:red;
font-family:pristina;
text-align:center;
font-size:20px;
}
.right
{
color:black;
font-family:pristina;
text-align:right;
font-size:20px;
}
.left
{
color:blue;
font-family:trebuchet;
text-align:left;
font-size:20px;
}
.centero
{
color:green;
font-family:pristina;
text-align:center;
font-size:40px;
}
body
{
background:white;
}
</style>
</head>
<body>
<H1 class="centero">Pengenalan CSS</H1>
<p class="center">
CSS (Cascading Style Sheet) sangat bermanfaat sekali dalam mengatur design atau layout suatu halaman web. Dengan CSS kita bisa lebih mudah mengontrol tampilan halaman
web tanpa harus mengontrol tiap baris elemen yang ingin di design yang mana jika menggunakan HTML itu harus kita lakukan. Kita bisa memisahkan style sheet atau format tampilan web yang kita inginkan dengan tampilan web itu sendiri, sehingga jika sewaktu-waktu kita ingin merubah tampilan web tersebut kita hanya perlu merubah style
sheet atau format tampilannya atau mungkin mengedit design tampilan webnya.
</p>
<p class="right">
CSS (Cascading Style Sheet) sangat bermanfaat sekali dalam mengatur design atau layout suatu halaman web. Dengan CSS kita bisa lebih mudah mengontrol tampilan halaman
web tanpa harus mengontrol tiap baris elemen yang ingin di design yang mana jika menggunakan HTML itu harus kita lakukan. Kita bisa memisahkan style sheet atau format
tampilan web yang kita inginkan dengan tampilan web itu sendiri, sehingga jika sewaktu-waktu kita ingin merubah tampilan web tersebut kita hanya perlu merubah style
sheet atau format tampilannya atau mungkin mengedit design tampilan webnya.
</p>
<p class="left">
CSS (Cascading Style Sheet) sangat bermanfaat sekali dalam mengatur design atau layout suatu halaman web. Dengan CSS kita bisa lebih mudah mengontrol tampilan halaman
web tanpa harus mengontrol tiap baris elemen yang ingin di design yang mana jika menggunakan HTML itu harus kita lakukan. Kita bisa memisahkan style sheet atau format
tampilan web yang kita inginkan dengan tampilan web itu sendiri, sehingga jika sewaktu-waktu kita ingin merubah tampilan web tersebut kita hanya perlu merubah style
sheet atau format tampilannya atau mungkin mengedit design tampilan webnya.
</p>
</body>
<html>
Hasil Aplikasi;
CSS Id
CSS Id adalah sintax CSS yang berfungsi untuk memberikan identitas yang unik pada suatu tag atau elemen HTML. Penggunaan CSS id sebenarnya sama dengan CSS Class. Yang membedakannya adalah pada CSS class menggunakan tanda dot (.), sedangkan pada CSS Id menggunakan tanda pagar (#) disamping itu CSS id digunakan untuk membuat identitas yang unik pada suatu elemen HTML.
CSS Id sering digunakan untuk elemen-elemen dalam halaman web yang muncul hanya satu kali saja seperti ; Header, Sidebar, Footer atau body. Pada umumnya CSS id digunakan untuk memformat layout web.
Format penulisannya adalah;
#id-name {property:value;}
Contoh Aplikasi;
<html>
<head>
<title>Mari Belajar CSS</title>
<style type="text/css" media=screen>
#header
{
position : absolute;
height:90px;
width:900px;
background-color:maroon;
left:50px;
padding-top:4%;
padding-right:2%;
padding-bottom:2%;
padding-left:4%;
line-height:0.5px;
}
</style>
</head>
<div id=”header”></div>
<body>
</body>
<html>
Keterangan;
- #header akan memanggil id header untuk diformat dengan CSS.
- Dikarenakan id header berada dalam tag <div></div> maka style CSS hanya akan memformat bagian yang dibatasi oleh tag <div></div> tersebut.
- Dalam prakteknya CSS id bisa digunakan lebih dari satu kali untuk elemen atau tag HTML yang berbeda akan tetapi penggunaan ini tidak dianjurkan oleh W3C ( World Wide Web Concorsium ) dan juga penggunaan CSS id lebih dari satu kali akan membuat halaman web tidak valid.
- Jangan membuat angka sebagai nama id karena id tersebut tidak akan terbaca untuk internet browser seperti Mozilla Firefox.
Hasil Aplikasi;
Karena pada dasarnya CSS class dan CSS id adalah sama maka;
- Jika style CSS yang anda buat akan diaplikasikan ke dalam tag-tag HTML lebih dari satu kali, misalnya untuhk h1, h2, h3 anda ingin memberikan properti dan value yang sama, maka gunakan CSS class.
- Jika style CSS yang anda buat akan diaplikasikan ke dalam tag HTML dengan id yang unik dan hanya akan dimunculkan sekali saja maka gunakan CSS id. Contoh untuk memformat header, siderbar atau outer gunakan CSS id.
So friends.......comment membangun atau mungkin pertanyaan-pertanyaan yang anda belum pahami.....feel free to discuss.
Regards
Author
ConversionConversion EmoticonEmoticon