Sintaks dan Macam-macam Selector CSS


Sintaks CSS

Beberapa sintaks CSS yaitu :

h1 {color:blue ; font-size:12px;}

  • Selector. Adalah tag elemen yang ingin diformat/diatur tampilan dan gayanya.
  • Properti. Adalah nama properti suatu tag yang akan diformat/diatur seperti ukuran, warna, dll.
  • Nilai/Isi. Adalah nilai/isi properti, seperti properti warna isinya biru maka elemen akan berwarna biru.
  • Blok Deklarasi. Meliputi satu atau lebih deklarasi yang di batasi oleh titik koma. Setiap deklarasi termasuk nama properti yang akan diatur dan nilai/isi properti dipisahkan oleh titik dua.

Selector CSS

selector css digunakan untuk menetukan/mencari/memilih suatu elemen HTML berdasarkan nama elemen, Id elemen, Class elemen, atribut elemen, dll.
Selector Elemen
Adalah selector yang berdasarkan nama elemen yang akan diatur tampilannya. Contohnya jika ingin mengatur tampilan elemen <p> maka semua elemen <p> akan mengikuti tampilan yang sudah diatur pada CSS. 
p {
    color      : red;
    text-align : justify;

}
Selector Id (#)
Merupakan selector yang menetukan suatu elemen yang memiliki atribut "id". atribut "id" adalah atribut untuk membedakan suatu elemen dengan elemen yang sama tetapi dengan isi atribut "id" yang berbeda, sehingga dapat digunakan untuk membuat grub-grub tampilan elemen. penulisannya dengan tanda pagar (#) dan id suatu elemen. misalnya kita akan menetukan suatu tampilan elemen yang beratribut id="tampilan1" maka penulisan selectornya adalah :

#tampilan1 {
color : red;
}

maka otomatis semua elemen entah itu <p>, <h1>, atau yang lainnya asalkan memiliki atribut id "tampilan1" elemen tersebut akan berwarna merah.

Selector Class (.)

 hampir sama dengan selector Id(#), selector class merupakan selector yang memilih elemen dengan atribut class tertentu. untuk memilih elemen dengan class tertentu, penulisan diawali dengan titik (.) dan diikuti nama class sesuai isi atribut dari class. Contoh semua elemen HTML dengan atribut class='kelas1' maka tulisannya akan cetak miring.

.kelas1 {
text-decoration : italic;
}

Contoh diatas berlaku untuk semua elemen yang memiliki atribut .kelas1 . Anda juga dapat membuat sebuah selector class yang hanya dapat digunakan dengan elemen tertentu. Contoh : 
h1.kelas1 {
text-decoration : italic;
}
Maka hanya elemen <h1> yang dapat menggunakan atribut .kelas1 . Ini juga bisa digunakan pada selector id. Contoh :
p#tampilan1 {
color : #000;
}

Grouping Selector.


Jika anda memiliki beberapa selector CSS dengan isi yang sama seperti :

p {color : red;}
h1 {color : red;}
h2 {color : red;}

agar kode CSS lebih hemat maka gabungkan selector tersebut dengan dibatasi dengan koma (,). contoh : 
p, h1, h2 {color:red;}

maka otomatis semua elemen h1, h2, dan p akan berwarna merah.

Selector Keturunan.

 Merupakan jenis selector CSS yang memilih suatu elemen yang ada di dalam elemen tertentu. Contohnya memilih semua elemen <p> yang ada di dalam elemen <li>.
li p {
 font-size : 15px;
}

Maka semua elemen paragraph yang ada di dalam list tulisannya akan berukuran 15 pixel.

Komentar

Posting Komentar