Anatomi dan Cara Kerja CSS

Anatomi dan Cara Kerja CSS

ANATOMI DARI CSS

          Bagian – bagian utama dari sebuah CSS ( Cascading Style Sheet ) itu terdiri dari tiga bagian yaitu: selector, property, value. Jika dalam HTML dikenal ada tag-tag yang menyusun sebuah dokumen HTML maka dalam CSS juga dikenal dengan sebutan selector.

CSS memiliki aturan tersendiri dalam penulisan sintaks. Penulisan sintaks tersebut terbagi ke dalam tiga bagian yaitu: selector, property, dan value.

     Format penulisan bagian-bagian dari CSS dapat dituliskan sebagai berikut :
Selector{ Property : value; }

     Berikut ini sedikit contoh penggunaan selektor, property, dan value untuk mengatur style pada sebuah form :

form{ margin-left:0; }

       Dari contoh penggunaan selector, property, dan value di atas maka tiap bagian akan di jelaskan sebagai berikut :
- form : selector yang akan di atur stylenya
- margin-left : property yang digunakan untuk jarak fieldset dari batas kiri layout
- 0 : nilai dari property margin-left

     Dengan adanya CSS memungkinkan untuk menampilkan halaman yang sama dengan format yang berbeda.


CARA KERJA CASCADING STYLE SHEET

          Cara kerja CSS sangatlah mudah, karena CSS hanya membutuhkan style sebagai penentu dari font, warna, dan format-format lain untuk memformat atribut sebuah halaman web yang kita buat. Tiap style memiliki dua buah elemen dasar yaitu “selector” dan “declaration”.
Sebuah selector biasanya adalah tag HTML, sementara declaration adalah satu atau beberapa perintah / nilai dari CSS yang menunjukkan type bentuk yang diaplikasikan pada selector. Declaration ini biasanya di tandai dengan tanda kurung kurawal “{ }” , dan perintah atau nilai CSS yang berbeda dipisahkan satu dengan yang lain dengan menggunakan titik-koma “;” seperti terlihat pada contoh berikut :

< style type="text/css">
.teks {font-family:verdana; color:blue;}
< /style>


          Disini terlihat bahwa .teks adalah selector, dan {font-family:verdana; color:blue;} adalah declaration.
Selector-selector dan style dalam CSS akan dimasukkan dalam sebuah tempat yang sama dalam isi dokumen HTML atau dibuat diluar dokumen HTML yang nantinya akan dipanggil untuk menentukan isi tampilan dokumen HTML. Anda hanya menunjuk pada selector-selector dimana akan mengaktifkan sebuah style yang anda inginkan.
Hal yang paling umum dalam memasukkan kode Style CSS dengan menggunakan tag < style type=”text/css”>. Tag < style type=”text/css”> ini selalu tampil dalam bagian < head> dan sebelum < /head> dari dokumen anda seperti terlihat pada contoh berikut :

< html>
< head>
< style type="text/css">
... aturan-aturan css ...
< /style>
< /head>
< body>
... Dokumen html yang akan diberikan aturan CSS ...
< /body>
< /html>

          Untuk menentukan font dan warna-warna tiap kali anda memulai sebuah cell table, anda dapat menentukan sebuah style dan kemudian anda tinggal menunjuk ke style dalam cell table anda. Bandingkan contoh dari sebuah table berikut yang dibuat menggunakan HTML sederhana :

< html>
< head>belajar css
< /head>
< body>
< table>
< tr>< td bgcolor="red" align="center">
< font face="verdana" color="blue">belajar css1
< /font>< /td>< /tr>
< /table>
< /body>
< /html>

          Bandingkan jika dokumen tersebut dibuat dengan menggunakan CSS (dengan menganggap bahwa sebuah selector yang dipanggil “teks” telah ditetapkan yang akan mengatur format teks dokumen html tersebut).

< html>
< head>< title>belajar css< /title>
< style type="text/css">
.teks { background-color:red; color:blue; font-family:verdana;}
< /style>
< /head>
< body>
< table>
< tr>< td class="teks">belajar css1< /td>< /tr>
< /table>
< /body>
< /html>

Daftar Pustaka:
http://triarinititisingtyas.blogspot.com/2017/02/cascanding-style-sheet-css.html
http://www.rajadigital.com/mengenal-sistem-kerja-cascading-style-sheet-css.html