Tuesday, January 3, 2017

CSS Part 2 : Syntax CSS


Assalamu'alaikum Wr Wb.
Dalam pertemuan kali ini, saya akan memaparkan mengenai Syntax CSS.

CSS Syntax
Sebuah CSS aturan-set terdiri dari pemilih dan blok deklarasi:
Pemilih poin ke elemen HTML Anda ingin bergaya.
Blok deklarasi berisi satu atau lebih deklarasi dipisahkan oleh titik koma.
Setiap deklarasi termasuk CSS nama properti dan nilai, yang dipisahkan oleh titik dua.
Sebuah deklarasi CSS selalu berakhir dengan titik koma, dan blok deklarasi dikelilingi oleh kurung kurawal.
Pada contoh berikut semua <p> elemen akan pusat-blok, dengan warna teks merah.
Contoh
p{
color: red;
text-align: center;
}

CSS Selectors 
CSS digunakan untuk "menemukan" (atau pilih) elemen HTML berdasarkan mereka nama elemen, id, kelas, atribut, dan banyak lagi.

Unsur Pemilih
Pemilih elemen memilih elemen berdasarkan nama elemen.
Anda dapat memilih semua <p> elemen pada halaman seperti ini (dalam hal ini, semua elemen <p> akan pusat-blok, dengan warna teks merah.
Contoh
p{
text-align: center;
color: red;
}

Id Selector
Pemilih id menggunakan atribut id dari elemen HTML untuk memilih elmen tertentu.
Id dari elemen harus unik dalam sebuah halaman, sehingga pemilih id digunakan untuk memilih salah satu elemen yang unik!
Untuk memilih elemen dengan id tertentu, menulis hash (#) karakter, diikuti oleh id dari elemen.
Gaya aturan di bawah ini akan diterapkan pada elemen HTML dengan id="para1".
Contoh
#para1{
text-align: center;
color: red;
}

Catatan: Sebuah nama id tidak dapat memulai dengan angka!

Kelas Selector
Pemilih kelas memilih elemen dengan atribut kelas khusus.
Untuk memilih elemen dengan kelas tertentu, menulis tititk (.) Karakter, diikuti dengan nama kelas.
Pada contoh di bawah, semua elemen HTML dengan class="center" akan merah  dan pusat-blok.
Contoh
.center{
text-align: center;
color: red;
}
Anda juga dapat menentukan bahwa elemen HTML hanya khusus harus dipengaruhi oleh kelas.
Pada contoh di bawah, hanya <p> elemen dengan class="center" akan center-aligned.
Contoh
p.center{
text-align: center;
color: red;
}

Elemen HTML juga dapat merujuk ke lebih dari satu kelas.
Pada contoh di bawah ini, <p> elemen akan ditata sesuai dengan class="center" dan class="besar".
Contoh
<p class="center large"> Paragraf</p>

REFERENSI
http://www.w3schools.com/css/css_syntax.asp

No comments:

Post a Comment