Pengenalan CSS lanjutan

Sintaks CSS

Dalam menuliskan tag CSS maka terdapat sedikit perbedaan dalam aturan penulisan dengan tag HTML. jika dalam HTML kita akan memformat suatu komponen maka kita gunakan tag dan atribut. contohnya jika kita ingin memformat paragraf menggunakan align (perataan kanan kiri) maka kita menggunakan sintaks berikut < p align=”center”>. p adalah tag dan align=”center” adalah atributnya.

Sedangkan jika menggunakan CSS, sintaks yang kita gunakan adalah Selector, Property dan Value

Penulisan kode CSS dibuat menjadi tiga bagian, yaitu:
selector { property1: value; property2:value; dst}

1. Selector -> Selector pada CSS sama dengan tag atau komponen pada HTML yaitu yang terdapat antara tanda < dan tanda > misalnya < h1>, < p>, < b> dll.
2. Property -> Property pada CSS sama dengan atribut pada HTML yaitu. berfungsi untuk memberi nilai dari selector.
3. Value -> Value adalah nilai yang kita berikan kepada property

Contoh :
Jika di HTML kita memformat paragraf dengan < p align=”right”> maka dengan CSS menjadi p { text-align: right;}

Keterangan :

-> p adalah selector dan text-align adalah property, right; adalah value atau nilai dari property.

-> jika di HTML kita menggunakan tanda < > tetapi pada CSS kita menggunakan tanda { }

-> p dalam CSS tidak terdapat dalam tanda { dan tanda } tetapi sebelum tanda tersebut.

-> Jika dalam HTML untuk menunjukan Value atau nilai dari atribut kita menggunakan sama dengan (=) sedangkan dalam CSS untuk menunjukan value atau nilai dari property kita menggunakan tanda titik dua (:).

-> Setelah memberi value di CSS, kita harus menambahkan tanda titik koma (;) di belakangnya.

-> Jika selector lebih dari satu dan memiliki property dan value yang sama maka gunakan tanda koma (,)

Dalam CSS ada istilah Class dan ID, apakah itu?

Class Selector

Dengan class selector kita dapat mendefinisikan perbedaan style untuk tag elemen html yang sama. Misalnya dua type paragraf, peragraf pertama menggunakan align-left dan yang paragraf satu lagi menggunakan align-center.
Lihat contoh perbedaannya dalam tabel berikut :

Penulisan atribut class dalam HTML	< p class=”left”> Paragraf ini rata kiri < /p> < p class=”left”> paragraf ini rata tengah < /p>
Penulisan pada  file CSS	.left {text-align: left} .center {text-align: center}

Ket:

-> Pada penulisan nama class dalam file CSS diawali dengan tanda titik (.)

-> Tidak dianjurkan memberi nama class dengan angka

-> Nama class tidak boleh menggunakan spasi, jika nama class lebih dari dua suku kata maka berikan tanda hubung (-) atau (_)

ID Selector

ID selector digunakan dengan tujuan mendefinisikan per-elemen dasar. setiap halaman id selector hanya boleh digunakan dengan satu id unik, itulah yang menjadi perbedaannya dengan class selector. Dengan class selector kita dapat mendefinisikan perbedaan style untuk tag elemen html yang sama. tetapi dengan id selector kita hanya diperbolehkan memanggil satu id untuk satu elemen yang sama.
Contoh:

< p id=”tebal”> Paragraf ini ditulis dengan huruf tebal dan warna merah < /p> < p id=”miring”> Paragraf ini ditulis dengan huruf miring dan warna biru < /p>

 maka penulisan pada file CSS-nya menjadi :

#tebal { font-weight : bold; color : red; } #miring { font-style : italic; color: blue;

Ket :

-> pada penulisan nama id dalam file CSS diawali dengan tanda pagar (#)

-> Nama id dapat ditulis dengan angka, huruf atau garis bawah

-> Karakter pertama sebaiknya huruf atau garis bawah (_)

Dalam aturan standarnya ada beberapa perbedaan antara selector id dan class yang perlu anda ketahui, tetapi pada prakteknya tidak terlalu diperhatikan dan dianggap sama aja 

Penulisan Komentar Dalam CSS

    Dalam pemograman kita mengenal istilah komentar yaitu bermanfaat untuk memberi penjelasan pada bagian tertentu dari kode yang kita tulis. dan tulisan ini tidak akan ikut dieksekusi oleh browser.
Cara memberi komentar pada CSS adalah diawali tanda /* dan di akhiri tanda */

Contoh :

.left {text-align: left} .center {text-align: center}/*ini adalah komentar*/