Wednesday, July 24, 2013

Syntax CSS II

Class Selector

Dengan menggunakan class selector kita bisa mendefinisikan corak yang berbeda pada suatu elemen HTML yang sama.

Sebagai missal kita ingin mempunyai paragraph dengan 2 macam tipe yaitu: satu paragraph dengan text rata kanan dan satu lagi rata tengah.
Cara mendifinisikannya deang class selector ialah:

p.kanan {text-align: right}
p.tengah {text-align: center}

Selector p (paragraf) mempunyai 2 class selector yaitu kanan dan tengah yang masing-masing mempunyai property yang berbeda.

Kita harus memanggil class yang sesuai untuk membuat paragraph sesuai dengan keinginana kita.
Contoh untuk membuat paragraph dengan text rata kanan

<p class="kanan">
Paragrap ini ditulis rata kanan.
</p>

Untuk rata tengah
<p class="tengah">
Paragrap ini ditulis rata tengah.
</p>


Kita bisa mengaplikasikan beberapa class dalam satu elemen dengan sintaksis sbb:

<p class="tengah merah">
Paragraph rata tengah dengan tulisan warna merah.
</p>


Kita bisa menghilangkan nama selektoc untuk mendefinisikan class yang mungkin akan digunakan dalam semua elemen HTML. Contoh berikut akan membuat semua elemen HTML dengan class=”tengah” baik itu header, paragraph atau yang lainnya akan ditulis rata tengah.
.tengah {text-align: center}



Contoh penggunaannya

<h1 class="tengah">
Header ditulis rata tengah.
</h1>
<p class="tengah">
Paragraph yang juga ditulis rata tengah.
</p>


Catatan : Nama Class tidak boleh diawali dengan angka karena tidak akan bekerja in Mozilla/Firefox.


Komentar CSS
Komentar biasa digunakan untuk menjelaskan kode kita yang sangat membantu sewaktu kita akan mengedit kembali kode-kode trersebut. Komentar dalam CSS diawali dengan "/*", dan tutup dengan "*/"
Contoh

p
{
text-align: center;
/* Ini Komentar saya*/
color: black;
font-family: arial
}

No comments:

Post a Comment