Belajar CSS : Syntax Dasar CSS Dan Metode Cara Penulisanya

Penulisan CSS

Sallam Sobat BT......

Pada kesempatan kali ini saya akan membahas mengenai pembelajaran CSS dasar, yakni syntax dasar CSS dan cara penulisanya.Nah.....bila sebelumnya saya telah memberikan pengetahuan tentang pengertian dan sejarah CSS, maka tahap selanjutnya adalah syntax dasar penulisan CSS.Tentunya syntax dari CSS ini akan berbeda dengan HTML, dan mungkin agak lebih susah.

Syntax, apa sih itu ? Nah....bagi sobat yang belum mengerti apa itu syntax mungkin akan kebingungan bila tidak saya bahas sekarang ini, singkatnya syntax itu merupakan aturan penulisan yanmg sudah ditentukan dalam sebuah Bahasa.Jadi kode yang sobat buat tidak boleh sembarang,harus mengikuti syntax yang ada.Misalnya dalam HTML memiliki aturan penulisan <>....</>,PHP memiliki aturan dasar menuliskan kode ditag ,<?php ...... ?>,Javascript memiliki aturan memasukan script ke <script>......< /script> dan lain sebagainya.

Oke.....kembali ke CSS, untuk syntax dasar CSS ini agak berbeda dengan yang lain dan terdapat tiga elemen yang wajib sobat tuliskan.Apa sajakah itu ? Silahkan lihat contoh dibawah....

BODY {
       BACKGROUND-COLOR : #DDD;
}

Jadi gambar diatas merupakan contoh sederhana penulisan kode CSS.Tahu maksudnya ?kalau tidak tahu tidak apa-apa, coba perhatikan rumus penulisan CSS dibawah ini....

Rumus Dasar CSS

Bila dilihat-lihat ada tiga buah elemen, yakni Selector ,Property ,dan Value.Tiga buah elemen inilah yang wajib sobat tulis dan tata letaknya harus benar jangan sampai kebalak.Selain itu tata letak kurung kurawal dan titik koma harus benar.Untuk kurung kurawal buka ({) diberi setelah Selector,lalu diisi dengan Property sampai diakhiri titik dua (:), lalu setelah titik dua diisi Valuenya dengan titk koma (;) sebagai akhir.Lalu untuk mengakiri isi dari Selector menggunakan kurung kurawal tutup (}) 

Masih bingung apa itu Selector,Property, dan Value ? Langsung saja baca dibawah.....

Pengertian Selector,Property dan Value

1.Selector 

Merupakan bagian dari syntax CSS yang berupa elemen atau tag HTML yang ingin diberi Style.Untuk memberikan Style pada sebuah tag maka bisa dituliskan langsung nama tag tersebut tanpa tanda <...>, seperti pada contoh diatas. Tag p langsung ditulis tanpa menggunakan  <p>.Nah....selain bisa langsung menuliskan nama tag, sobat juga bisa menggunakan Selector Class dan Selector ID.Apa itu ?

Selector Class Dan Selector ID

Kenapa kok perlu Selector Class dan ID, bukanya menggunakan nama tag saja sudah cukup ? Ya memang, namun sobat bisa bayangkan apabila dalam kodingngan sobat terdapat lima buah tag <p>  , lalu yang sobat inginkan hanya memberi Style pada tag <p>  yang terakhir.Nah....apabila sobat menggunakan tag p sebagai Selector, maka semua tag p dalam kodingan sobat akan diberi Style oleh CSS .Padahal yang sobat inginkan cuma tag p yang terakhir, lalu bagaimana solusinya ?

Untuk itulah sobat memerlukan Selector Class dan ID, untuk menggunakanya sobat pilih salah satu saja.Walaupun fungsinya sama namun ada perbedaanya.Pada Selector ID, sobat tidak bisa membuatnya lebih dari satu artinya selector ID ini digunakan pada bagian yang lebih spesifik.Berbeda dengan ID, pada Selector Class dapat sobat buat lebih dari satu.Kalau saya lebih suka pada Selector Class, namun juga tergantung pada kebutuhan waktu Ngoding....

A.Selector Class

Pada Selector ini bisa ditulis dalam tag HTML dengan format penulisan class=”nama_selector”.Contoh penulisan...

<p classs="paragraf" > Hello World  ! Belajar CSS Itu Ternyata Mudah </>
Untuk memanggilnya dalam CSS bisa ditulis dengan awalan tanda titik (.).Cara penulisannya, “.namaselector {property : value;} atau lebih jelasnya seperti pada contoh dibawah...

.paragraf {
color : red;
font-weight : bold;
}

B.Selector ID

         Pada Selector ini bisa ditulis dalam tag HTML dengan format penulisan class=”nama_selector”.Contoh penulisan...
<p classs="paragraf" > Hello World  ! Belajar CSS Itu Ternyata Mudah </>

Ini isi dari tag p.Untuk memanggilnya dalam CSS bisa ditulis dengan awalan tanda pagar (#).Cara penulisannya, “#namaselector {property : value;} atau lebih jelasnya seperti pada contoh dibawah...

#paragraf {
color : red;
font-weight : bold;
}

2.Property

Property merupakan sifat yang ingin diterapkan pada Selector atau suatu perintah untuk mengatur Style pada Selector yang bersangkutan.Property ini ada banyak dan memiliki fungsi masing-masing, contohnya seperti mengatur ukuran text, jenis font, warna text,warna Background,mengatur Margin, mengatur Padding,membuat garis (Border) dan masih banyak lagi.

3.Value

Value merupakan nilai pada Property untuk mengatur tingkat Style yang diinginkan.Contohnya saja pada saat mengatur ukuran font, maka sobat bisa menggunakan Property Font-Size lalu sobat harus  mengisi nilai untuk mengatur ukuran font tersebut,misalnya saja 15px,25px,atau mungkin 50px.Semakin tinggi nilainya maka fontnya akan semakin besar.

Tiga Metode Cara Penulisan CSS

Bagaimana apakah sebelumnya sudah paham ? Kalau sudah sekarang lanjut kebagian cara atau lebih tepatnya tehnik menuliskan kode CSS.Ternyata tidak bisa sembarang sobat tuliskan kode CSSnya dan ada tiga cara penulisanya,yaitu Inline,Internal dan Eksternal.Setiap penulisan ada kelebihan dan kekuranganya, tinggal sesuaikan kebutuhan.

1.Inline Style Sheet

Inline merupakan salah satu cara penulisan dengan menuliskan langsung kedalam tag HTML yang bersangkutan dengan memberikan artribut style=”” kedalam tag tersebut.Style hanya berlaku pada tag yang diberi CSS dan tentunya tidak akan mempengaruhi tag yang lain.Untuk cara yang satu ini jarang digunakan dan tidak direkomendasikan karena akan kesulitan apabila ada perubahan tampilan Web pada kemudian hari nantinya.Berikut contoh penulisanya.....

Inline CSS

2.Internal Style Sheet

Internal atau juga biasa disebut Embedded Style merupakan cara penulisan dengan menuliskan kode CSS diantara tag <head>.....</head> , namun sebelumnya kode CSS tersebut harus dibungkus atau diletakan kedalam tag <style>.....</style> .Cara seperti ini lebih efektif apabila dibandingkan dengan cara pertama namun penulisan ini jarang saya gunakan karena pada cara ini kode CSS dan HTML ditulis dalam halaman yang sama sehingga membuat kesulitan dalam membaca dan mengubahnya (Itu menurut saya, jadi terserah sobat saja).Berikut contoh penulisanya..

Internal CSS

3.Eksternal Style Sheet

Eksternal atau juga biasa disebut Link Style merupakan cara penulisan kode CSS secara terpisah.Jadi nantinya sobat akan membuat dokumen baru dengan ekstensi .css yang dimana dokumen .css tersebut akan dipanggil dalam dokumen HTML menggunakan link.Untuk memanggilnya bisa menggunakan tag <link rel="stylesheet" type="text/css" href="namafile.css">  yang ditaruh diantara tag <head>....</head> .Nah.....cara penulisan inilah yang saya sukai dan direkomendasikan oleh kalangan Web Devoloper.Berikut contoh penulisanya.....

Eksternal CSS

Nah.....bagaimana sekarang apakah sobat sudah paham mengenail pembelajaran kali ini ? Silahakn cari sendiri referensi lainya yang bisa sobat dapatkan dari E-Book,Youtube atau Web lain apabila sobat masih kurang paham.

Oke....sekian postingan saya kali ini,semoga postingan saya kali ini bermanfaat bagi sobat-sobat semua.Mohon maaf apabila ada kesalahan dalam penulisan postingan ini.Bila ada yang ingin sobat tanyakan , silahkan sobat berkomentar di bawah.

Share this post