Artikel

Home > Artikel
 

 

Memahami Sintaks CSS


Diposting : 2017-04-01 oleh : WebHozz



Halo sobat Webhozz berjumpa lagi dengan saya, kali ini saya akan  membagikan artikel mengenai memahami Sintaks CSS. Langsung aja yuk kita ke pembahasannya sobat Webhozz.

CSS pada prinsipnya tersusun atas beberapa aturan. Sintaks sebuah aturan CSS adalah sebagai berikut :

 

                selector    {

                                properti1 :   nilai  1 ;

                                properti2 :   nilai  2 ;

                                /*   komentar   */

                                properti3 :   nilai  3 ;

 

selector adalah nama sebuah aturan yang akan dijadikan sebagai acuan oleh satu atau beberapa elemen di dokumen HTML. Selector digunakan untuk mencocokkan nama elemen di HTML dan aturannya di CSS. Deklarasi aturan-aturan tiap selector diletakkan dalam tanda kurng kurawal. Tiap properti dan nilainya dipisahkan dengan tanda ; (titik koma). Penulisannya bisa dipisahkan per baris aturan maupun ditulis dalam satu baris. Misalnya jika ditulis sebaris akan menjadi seperti ini:

                selector   { properti1 :  nilai ;  properti2 :  nilai2 ; }

Teknik penulisan pertama, yaitu memisahkan satu deklarasi aturan per satu baris lebih disarankan dalam tahap desain. Kalian lebih mudah memeriksa dan mengedit deklarasi-deklarasi yang ada di tiap selector. Teknik kedua disarankan untuk tahap deployment atau publikasi online, karena ukuran filenya lebih kecil. Kalian dapat meminimize kode CSS teknik pertama menjadi ringkas seperti teknik kedua di akhir desain.

Sama seperti HTML, kode CSS juga bisa diberi baris komentar yang tidak akan dieksekusi. Komentar di CSS menggunakan tanda awal /* dan tanda akhir /*.

Penamaan selector tidak boleh menggunakan awalan angka. Penulisan bersifat case-sensitive, jadi hati-hati dengan penggunaan huruf kapital pada nama selector. Secara umum, ada tiga jenis selector dasar, yaitu:

·         Selector elemen:  Namanya memakai nama tag HTML, misalnya body, h1, img, dan seterusnya. Pendeklarasian aturannya cukup dengan menuliskan nama tag sebagai nama selector. Otomatis elemen HTML terkait akan mengikuti aturan yang ditetapkan.

·         Selector id: Namanya kalian buat sendiri dan hanya digunakan sekali saja pada sebuah dokumen HTML. Nama selector diawali dengan simbol # (tanda pager). Pemanggilan aturannya di elemen HTML menggunakan atribut id.

·         Selector class: Namanya kalian buat sendiri dan bisa digunakan berkali-kali pada sekelompok elemen HTML. Nama selector diawali dengan timbol . (tanda titik). Pemanggilan aturannya di elemen HTML menggunakan atribut class.

 

Selain ketiga jenis selector dasar tersebut, kalian dapat menggunakan selector lain yang merupakan hasil kombinasi dari ketiga selector dasar. Kalian bahkan dapat menggunakan atribut elemen HTML dan nilainya sebagai penyusun nama selector.

Beberapa selector kombinasi yang lazim dipakai antara lain:

·         Selector grup: merupakan gabungan beberapa selector dengan deklarasi aturan yang sama. Masing-masing selector dipisahkan dengan tanda koma.

·         Selector elemen link: merupakan selector yang dipakai untuk mendefinisikan berbagai kondisi link. Nama selector tersusun dari nama tag anchor dan kondisinya, yang dipisahkan dengan tanda : (titik dua).

 

Nah sobat Webhozz itulah pembahasan singkat mengenai memahami Sintaks CSS. Semoga pembahasan artikel ini dapat membantu sobat Webhozz semua dalam mempelajari CSS, dan juga dapat menambah pengetahuan sobat Webhozz semua. Sampai berjumpa lagi pada pembahasan artikel-artikel lainnya yang tentunya lebih menarik lagi.

 

 




Tag : kursus android, kursus web, kursus web design, kursus php, kursus website, lenovo, woocommerce, windows, excel, xampp, php, mysql, twitter, analytic, adwords, google, maps, seo, jquery, slider, browser, game, transition, animation, whatsapp, desktop, wireframe, desain, vps, css, aplikasi, html, javascript, captcha, form, kode, kaskus, autoscroll, codeigniter, processor, bootstrap, ios, wordpress, div, span, lollypop, background, marquee, behaviour, plugin, chaton, bitcoin, opencart, payment, post, get, tooltip, button, silverlight, webmaster, phonegap, facebook, html5, swicth, sass, bbm, alert, mvc, fungsi, mobile, loading, nokia, template, traffic, laravel, yii, jquerymobile, blogger, adobe, baidu, hosting, font, server, input, sticky, menu, tokoonline, prestashop, joomla, java, yahoo, angular, microsoft, responsive, generator, visitor, counter, flatdesign, kursus web design jakarta, kursus web design bandung, kursus website bandung, kursus php bandung, kursus android bandung, kursus java bandung, kursus web bandung, Aplikasi Ramadhan, Cara Membuat Website, Tempat Kursus Website Bandung, Manfaat Internet, Menggunakan Wireframe Web, multikolom, horizontal, ym, toko online, controllers, optimalisasi, landing page, DOM, multikolom, horizontal, ym, toko online, controllers, optimalisasi, landing page, DOM, kursus web jogja, kursus website jogja, kursus web design jogja, kursus web programming jogja, kursus php jogja, kursus android jogja, kursus android programming jogja, kursus java jogja, kursus webmaster jogja, kursus codeigniter jogja, kursus wordpress jogja, kursus seo jogja, kursus vb jogja, kursus sql server jogja, kursus game jogja, kursus website jakarta, kursus web design jakarta, kursus web programming jakarta, kursus webmaster jakarta, kursus php jakarta, kursus wordpress jakarta, kursus android jakarta, kursus seo jakarta, kursus java jakarta, kursus sql server jakarta, framework cordova, mengenal framework cordova, apa itu cordova, membuat aplikasi android dengan cordova, cordova android, aplikasi hybrid android, cordova vs phonegap, Kursus Website Surabaya, Kursus Web Design Surabaya, Kursus Webmaster Surabaya, Kursus PHP Surabaya, Kursus Wordpress Surabaya ,