Setelah kita membahas tentang Apa itu HTML ? , sekarang kita akan membahas tentang CSS. Apa sih CSS itu ? Kenapa kita harus mempelajari CSS ? Bagaimana cara menggunakan CSS ? Oke sekarang mari kita bahas bersama tentang CSS .
Apa Itu CSS ?
Kalo di ibaratkan HTML itu adalah seorang wanita, maka CSS dapat kita ibaratkan sebagai make-up. Jadi, apa sih CSS itu ? CSS adalah singkatan dari Cascading Style Sheet. Menurut Wikipedia, " Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman". Secara mudahnya CSS adalah kode-kode yang di buat dengan tujuan untuk mempercantik dan memperindah halaman web.
Apa Kegunaan CSS ?
Seperti yang saya bilang di atas, tujuan di gunakannya CSS adalah untuk mempercantik dan memperindah halaman web. Jika kita membuat halaman web tanpa CSS, maka seperti kita memasak tidak menggunakan garam dan hasilnya adalah hambar (menurut saya). Menurut saya pribadi HTML dan CSS tidak dapat di pisahkan.
Bagaimana Cara Menggunakan CSS ?
Sebelumnya silahkan lihat coding di bawah ini.
Coding di atas apabila di jalankan akan seperti ini.
Hasil yang di tampilkan adalah kalimat "Kita sekarang belajar CSS" dengan huruf warna biru dan ukuran 20px, kemudian di bawahnya dengan kalimat yang sama namun dengan tampilan yang berbeda. Dalam penggunaannya, terdapat tiga cara untuk menggunakannya. Pada contoh di atas di sebut dengan Inline Style. Pada Inline Style kita meletakan css di dalam tag html, misalnya jika dari contoh di atas kita meletakannya di dalam tag div.
Kemudian cara yang selanjutnya di sebut dengan Header Style. Untuk contohnya saya akan mengubah dari coding di atas.
Bila coding sebelumnya css kita masukan dalam tag div, sekarang codingnya kita pisah dan kita taruh di dalam tag <head>. Di dalam tag <head> kita buat lagi tag <style>, kemudian kita buat selector #sambungkan. Fungsi selector ini untuk menyambungkan dengan tag <div> dengan id = sambungkan. Dapat kita lihat bahwa cara Header Style, css kita taruh di dalam tag <head> dan kita sambungkan dengan selector. Perlu di ketahui terdapat beberapa jenis selector untuk css, jika waktu memungkinkan akan saya bahas di lain kesempatan.
Selain dua cara di atas, masih ada satu cara lagi. Cara yang terakhir ini di sebut dengan Linked Style, atau saya lebih senang menyebutnya dengan CSS Eksternal. Cara penggunaannya sama seperti cara Header Style, namun kita harus memisah filenya menjadi file css tersendiri. Dari contoh css menggunakan Header Style akan saya rubah menjadi Linked Style. Perhatikan contoh di bawah ini .
file : css_linked.html
file : style.css
Untuk CSSnya kita buat file sendiri yang bernama style.css. Kemudian di css_linked.html kita ganti tag <style> menjadi tag <link> seperti di atas. Fungsi dari tag <link> ini adalah untuk menyambungkan dengan css style.css.
Saya kira untuk pengenalan CSS, saya cukupkan di sini. Semoga sedikit pengetahuan ini bisa bermanfaat untuk kita. Jika blog ini bermanfaat untuk temen-temen, silahkan kunjungi terus belajarpemrograman-web.blogspot.co.id. Untuk projeknya bisa temen-temen download disini.
Kalo di ibaratkan HTML itu adalah seorang wanita, maka CSS dapat kita ibaratkan sebagai make-up. Jadi, apa sih CSS itu ? CSS adalah singkatan dari Cascading Style Sheet. Menurut Wikipedia, " Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman". Secara mudahnya CSS adalah kode-kode yang di buat dengan tujuan untuk mempercantik dan memperindah halaman web.
Apa Kegunaan CSS ?
Seperti yang saya bilang di atas, tujuan di gunakannya CSS adalah untuk mempercantik dan memperindah halaman web. Jika kita membuat halaman web tanpa CSS, maka seperti kita memasak tidak menggunakan garam dan hasilnya adalah hambar (menurut saya). Menurut saya pribadi HTML dan CSS tidak dapat di pisahkan.
Bagaimana Cara Menggunakan CSS ?
Sebelumnya silahkan lihat coding di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
</head>
<body>
<div style="color: blue; font-size: 20px;">
Kita sekarang belajar CSS
</div>
<div >
Kita sekarang belajar CSS
</div>
</body>
</html>
Coding di atas apabila di jalankan akan seperti ini.
Kemudian cara yang selanjutnya di sebut dengan Header Style. Untuk contohnya saya akan mengubah dari coding di atas.
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
#sambungkan{
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<div id="sambungkan">
Kita sekarang belajar CSS
</div>
<div >
Kita sekarang belajar CSS
</div>
</body>
</html>Bila coding sebelumnya css kita masukan dalam tag div, sekarang codingnya kita pisah dan kita taruh di dalam tag <head>. Di dalam tag <head> kita buat lagi tag <style>, kemudian kita buat selector #sambungkan. Fungsi selector ini untuk menyambungkan dengan tag <div> dengan id = sambungkan. Dapat kita lihat bahwa cara Header Style, css kita taruh di dalam tag <head> dan kita sambungkan dengan selector. Perlu di ketahui terdapat beberapa jenis selector untuk css, jika waktu memungkinkan akan saya bahas di lain kesempatan.
Selain dua cara di atas, masih ada satu cara lagi. Cara yang terakhir ini di sebut dengan Linked Style, atau saya lebih senang menyebutnya dengan CSS Eksternal. Cara penggunaannya sama seperti cara Header Style, namun kita harus memisah filenya menjadi file css tersendiri. Dari contoh css menggunakan Header Style akan saya rubah menjadi Linked Style. Perhatikan contoh di bawah ini .
file : css_linked.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
<link rel="stylesheet" type="text/css" href="style.css"> // Disini bedanya
</head>
<body>
<div id="sambungkan">
Kita sekarang belajar CSS
</div>
<div >
Kita sekarang belajar CSS
</div>
</body>
</html>file : style.css
#sambungkan{
color: blue;
font-size: 20px;
}Untuk CSSnya kita buat file sendiri yang bernama style.css. Kemudian di css_linked.html kita ganti tag <style> menjadi tag <link> seperti di atas. Fungsi dari tag <link> ini adalah untuk menyambungkan dengan css style.css.
Saya kira untuk pengenalan CSS, saya cukupkan di sini. Semoga sedikit pengetahuan ini bisa bermanfaat untuk kita. Jika blog ini bermanfaat untuk temen-temen, silahkan kunjungi terus belajarpemrograman-web.blogspot.co.id. Untuk projeknya bisa temen-temen download disini.
Tidak ada komentar:
Posting Komentar