Rabu, 05 April 2017

Belajar CSS Dasar Bagian 2 – Anatomi CSS

      Assalamualaikum Wr. Wb Selamat datang kembali sahabat lupacode semua di blog Lupa code Masih bersama saya selaku admin dari blog lupacode. Pada hari kemarin kita telah membahas mengenai Belajar CSS Dasar Bagian 1 – Pendahuluan. Bagi sahabat lupacode yang baru saja gabung disini atau baru masuk ke artikel ini, saya sarankan untuk mempelajari pembahasan materi dari yang pertama agar sahabat paham maksud dari kelanjutan pembahasan yang selanjutnya. Atau sahabat bisa langsung mengunjungi halaman Daftar isi pada blog ini.

lupacode - Belajar CSS Dasar Bagian 2 – Anatomi CSS

     Pada pembahasan kali ini kita akan membahas tentang yang namanya anatomi css { CSS } Anatomy Pada materi sebelumnya kita telah mengejar anatomy atau struktur dalam html, mungkin kalian masih ingat, dimana sebuah tag html itu mempunyai sebuah nama tag bisa ada atribut atau ada sebuah nilai atau value. Sama seperti html CSS pun punya anatomy sendiri. Kita bisa lihat anatomy atau strukturnya seperti ini
Selector { property: value; }
      Jadi kalau kalian lihat syntax css diatas, di css itu terbagi menjadi beberapa bagian. Pertama ada selector dan di dalamnya terdapat property dan value lalu property dan value nya itu dibatasi dengan kurung kurawal buka dan kurung kurawal tutup. Lalu disetiap property itu setelahnya ada karakter titik dua, lalu value nya diakhiri dengan titik koma. Dan itu merupakan sebuah syntax untuk menuliskan satu deklarasi dari css. 
      Contohnya seperti ini, saya mempunyai syntax h1 { color: blue; } ini artinya saya ingin membuat seluruh tulisan yang ada di dalam h1 dihalaman saya itu berubah warnanya menjadi biru. Jadi cara menuliskannya saya tuliskan dulu selectornya h1, lalu di dalamnya property color kemudian pada tiap – tiap property itu mempunyi sebuah value dan value nya adalah blue. Jangan lupa pisahkan atau bungkus semuanya menggunakan kurung kurawal. Jika nanti kalian punya lebih dari satu property kalian bisa tuliskan ke sebelah kanan setelah titik koma atau kalian bisa tuliskan kebawah. Contohnya seperti ini misalkan

h1 {
            font-size: 120px;
            font-family: arial;
            color: lightblue;
            text-align: center;
}

Jadi kita akan bahas masing – masing deklarasi ini. Yang pertama

Selector
  • Digunakan untuk memilih dan memanipulasi elemen spesifik pada HTML " Jadi misalkan kita punya <h1> <p> nah elemen – elemen tersebut adalah elemen yang akan kita pilih atau sebagai selector "
  •  Elemen HTML dipilih berdasarkan tag, id, class bahkan pola atau pattern " Nah  elemen nya bisa macem – macem, bisa tag html dan tadi kita sudah coba <h1> atau nanti kita bikin sendiri selectornya menggunakan id atau class atau bahkan nanti kita bisa simpan sebuah pola."
·          Semakin kompleks struktur HTML, selector juga bisa semakin kompleks atau spesifik ya jadi selector itu bisa sangat kompleks atau sederhana seperti yang telah kita buat diatas.

Property dan value
    
       Dalam css itu banyak sekali property dan value, kalian ga perlu hafal semuanya, jadi nanti pada materi ini yang akan kita bahas engga semua, mungkin hanya property – property yang penting saja yang biasa sering digunakan.
     Kalau nanti kalian pengen lebih banyak tau, kalian bisa kunjungi sebuah sumber dimana penjelasannya lengkap. Sumber yang pertama yaitu https://www.developer.mozilla.org/en-US/docs/Web/CSS/Reference referensinya cukup jelas, lengkap. Atau kalian bisa kunjungi website
http://css-tricks.com/almanac Dimana pada website itu kalian bisa lihat dari a sampai z apa saja property itu, dan bagaimana cara menggunakannya dan contohnya seperti apa.

       Jadi silahkan kalian pelajari sendiri supaya kalian bisa tau bagaimana cara kerja dari tiap-tiap property yang ada di css. Mungkin itu dulu penjelasan singkat mengenai anatomy dari css dan selanjutnya kita akan mulai ngoding :D Let’s Code !!! silahkan lanjut ke pembahasan selanjutnya yaitu Belajar CSS Dasar Bagian 3 – Penempatan CSS

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon