Memahami tentang script css memudahkan dalam memformat dokumen htm.
Assalaamu'alaikuum wr.wb.
Setelah sebelumnya saya membuat posting tentang Belajar html , dalam kesempatan ini kita lanjutkan dengan Belajar CSS.
Latar belakang.
CSS merupakan kependekan dari Cascading Steel Sheet yang diciptakan oleh W3C (World Wide Consorcium ) sebuah consorcium yang dibentuk untuk menangani masalah-masalah yang timbul pada saat html berada pada versi 3.2.
Pada html versi 3.2 ini dalam penggunaannya menjadi masalah besar bagi para pengembang web, karena untuk memberi gaya/style pada rancangan dokumen html, para pengembang harus menuliskan tag-tag , properti maupun atribut secara berulang-ulang untuk setiap style yang sama, hal ini menimbulkan kerepotaan pada saat membangun dokumen html dalam skala besar, karena akan menjadi sangat kompleks,rumit dan menjadi sangat mahal.
CSS mulai dikembangkan ketika html berada pada versi 4.0, tag-tag yang ada pada versi sebelumnya mulai ditinggalkan pemakaiannya dan diganti dengan cara yang lebih baik dan simple. CSS memudahkan dalam mendefinisikan penulisan dalam membuat dokumen html.
Dengan css pekerjaan html menjadi ramping, sehingga sangat membantu bagi para pengembang web.
Secara terpisah file css disimpan dalam format *.css .
Sebelum mempelajari CSS, seharusnya kita sudah mahir dan memahami cara-menulis html, karena css bukanlah materi yang berdiri sendiri, dan css tidak dapat membangun web sendiri, tetapi css membantu mempermudah dalam memberi gaya pada dokumen html. Jadi yang membangun halaman web adalah html, itulah sebabnya kita harus memahami cara-cara menulis html sebelum mempelajari css. Untuk belajar menulis html, silakan kunjungi Belajar html disini.
Contoh CSS
Source code: <html>
<head>
<style>
body {background-color: yellow;}
h1 {font-size: 24px;}
h2 {color: blue;}
p {margin-left: 50px;}
</ style>
</ head >
<body>
<h1> Header ini adalah 24px </h1>
<h2> Header ini berwarna biru</h2>
<p> ayat ini memiliki margin kiri 50 pixel </ p>
</ body>
</html>
Sintaks css.
Susunan sintaks css biasanya terdiri dari selector, properti dan value. Untuk jelasnya, cara penulisan css sintaks dapat digambarkan sebagai berikut:selector { declaration; }
selector { properti:value; }
- selector (pemilih): adalah nama elemen html yang dipilih untuk diatur atau diberi gaya. Misalnya elemen: body, heading, paragraf dan lainnya.
- declaration (deklarasi) merupakan rincian gaya/style yang akan diberikan untuk selector.
- Declaration terdiri dari pasangan properti dan value/nilai
- setiap declaration harus diakhiri dengan tanda titik-koma ( ; ). Dan kelompok declaration harus berada diantara dua tanda kurung-kurawa ( { dan } )
- properti adalah atribut style atau gaya yang ingin anda ubah. Dan setiap properti memiliki nilai atau value.
Contoh css :
body { background-color:lime; }
h1 { font-familly:verdana; }
p { color:blue; font-size:16px; }
Dari 3 contoh sintaks css di atas dapat dijelaskan bahwa body, h1 dan p adalah selector yang dipilih untuk diberi gaya, "background-color:", "font-family:", "color:", "font-size:" adalah properti, sedangkan yang merupakan nilai/value dari properti tadi adalah "lime", "verdana","blue" ,dan "16px".Satu hal yang harus diingat, jangan menyimpan spasi diantara pasangan value dengan satuannya, misalnya :
p { font-size:12 px }
Contoh diatas dapat kita lihat diantara teks value "12" dan teks satuan "px" terdapat satu spasi, ini tidak dibenarkan. Dan cara penulisan yang benar adalah :p { font-size:12px; }
Komentar css.
Seperti halnya pada html, pada dokumen css juga kita bisa menyelipkan komentar pada dokument. Komentar memudahkan kita dalam mengedit kode-kode css dikemudian hari apabila serasa ingin mengeditnya.Komentar dalam css, cara penulisannya dimulai dengan tanda " /* ", dan diakhiri dengan tanda " */ ". Kita dapat menyimpan komentar atau keterangan diantara kedua tanda itu. Kita dapat menempatkan komentar dimanapun yang kita perlukan, bahkan kita bisa menempatkannya diantara properti dalam deklarasi.
Contoh :
/* ini sebuah komentar */
p { text-align:center;
/* ini komentar yang lain */
color:blue; font-family:arial; }
Semoga berhasil.
back to top
kembali ke atas
Tidak ada komentar:
Posting Komentar