23 Mei 2013

Membangun Website dengan CSS (Bagian 3)

Sebelumnya: Membangun Website dengan CSS (Bagian 2)

Kali ini aku akan membahas tentang sintaks pada CSS yang dibagi menjadi 3 bagian, yaitu: selektor, properti, dan nilai. Selektor adalah elemen HTML yang akan diubahsesuaikan gayanya. Contoh selektor antara lain: body, h1 hingga h6, a, ul, li, dan sebagainya. Sedangkan properti adalah atribut dari selektor yang akan diubah sesuaikan, misalnya: tinggi, lebar, warna latar, dan lain-lain. Begitu juga dengan nilai; nilai adalah isi dari properti. Contoh dari nilai adalah: satuan px untuk tinggi dan lebar; kode heksadesimal untuk warna RGB, dan lain-lain.


Selektor

Ada 3 macam jenis selektor, yaitu: selektor yang berasal dari elemen HTML, selektor yang berasal dari class atau id, dan selektor yang berasal dari pseudo-class. Selektor yang berasal dari elemen HTML, misalnya: body, h1 hingga h6, a, ul, dan sebagainya. Selektor yang berasal dari class biasanya dimulai dengan titik (.) dan selektor yang berasal dari id dimulai dengan pagar (#), misalnya: .button, .clear, #wrapper, #sidebar, dan sebagainya. Sedangkan selektor yang berasal dari pseudo-class dimulai dengan titik dua (:), misalnya: :hover, :visited, dan sebagainya.

Boleh menggabungkan dua atau lebih dari dua selektor agar lebih spesifik target yang akan di-styling, contohnya: #wrapper a:hover { }. Selain itu juga bisa menggabungkan dua selektor atau lebih yang memiliki properti dan nilai yang sama, contohnya: #satu, #dua, #tiga { }.

Properti & Nilai

Banyak macam properti pada CSS. Setiap properti memiliki macam nilai yang berbeda. Misalkan properti width dan display. Properti width memiliki nilai dengan besaran px, %, dan em. Sedangkan properti display memiliki nilai none, block, inline, dan lainnya. Selain itu juga terdapat properti yang khusus digunakan dan berfungsi pada browser tertentu saja. Misalkan prefiks -webkit- bekerja di Safari dan Chrome, -moz- bekerja di Mozzila Firefox, dan -o- bekerja di Opera. Tidak semua properti bisa didukung oleh semua browser, oleh karena itu kita harus bijak dalam menggunakan properti yang disediakan. Untuk lebih jelasnya kamu bisa mengenal banyak properti dan nilai CSS di website W3Schools di bagian yang membahas CSS dan CSS3.

Selanjutnya: Membangun Website dengan CSS (Bagian 4)

5 komentar:

  1. john bikinin contoh prakteknya dong

    BalasHapus
  2. mantap pak..
    ini baru pengantar kan ya?
    ntar ajari praktik step by step contoh styling website dengan CSS ya..
    ^_^

    BalasHapus
    Balasan
    1. iya mas, step by stepnya bisa langsung tanya aja :D
      kan sekarang udah ada diskusi HTML pemula, kan ga hanya bahas HTML saja
      bisa bahas CSS atau JS

      Hapus
  3. mas saya nunggu tunggu tutorial berikutnya....kemaren saya udah nonton video pertamanya di youtube.

    BalasHapus

Populer Terbaru Komentar

Entri Terbaru

Komentar Terbaru

Creative Commons License
All contents by Iskael is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Based on a work at Iskael.
Permissions beyond the scope of this license may be available at Iskael.
© 2013 Belajar Ngeblog bersama Iskael. All Right Reserved. Powered by Blogger. Iskael Template by Iskael. Submitted on TopBlogIndonesia