Rabu, November 23, 2016
Dalam postingan sebelumnya kita sudah membahas sedikit tentang apa itu css, contoh penulisan dan penerapannya di html. Sekarang mari kita gali lebih jelas apa sebenarnya css, dan bagaimana fungsi dan penggunaannya.
Pengertian CSS
CSS singkatan dari Cascading Style Sheet. CSS lebih tepatnya adalah sebuah bahasa yang digunakan untuk menggambarkan gaya atau tampilan atau karakter dari sebuah dokumen html.
Menggunakan CSS dalam Pembuatan Website
CSS bertujuan membuat tampilan di website atau blog seseorang terlihat lebih rapi dan enak dilihat, bisa kita bayangkan jika sebuah website dibangun tanpa menggunakan embel-embel CSS. Pasti akan terlihat bladur (istilah dalam bahasa jawa) berarti tampak kusam. tidak ada warna, jarak elemen satu dengan yang lainnya terlalu berdekatan, pokoknya ga bikin betah orang yang berkunjung di website tersebut deh. :-)
Dengan menggunakan css dalam membangun aplikasi web, kita dimudahkan dan lebih menghemat waktu ketika mendesain sebuah tampilan website kita, karena css bisa disimpan sendiri dalam bentuk file css, pastinya ekstensi yang kita gunakan untuk file css adalah ".css", misalnya nama file css kita adalah cssku.css.
Metode Penyisipan atau Penulisan CSS
Metode Penyisipan atau Penulisan di dalam css bisa dikelompokkan menjadi tiga bagian, yaitu :
- Eksternal Style Sheet
- Internal Style Sheet
- Inline Style
Metode Eksternal Style Sheet
Adalah penulisan atau penyisipan script css yang disimpan sendiri dalam ekstensi .css, nantinya si programmer tinggal memanggil properti-properti, class dan id yang sudah dituliskan sebelumnya.
Metode Internal Style Sheet
Metode Internal Style Sheet Adalah penulisan script css yang langsung ditulis didalam tag html itu sendiri. Cara penulisannya ditulis diantara tag head.
Metode Inline Style
Penggunaan metode ini hampir sama dengan metode Internal Style Sheet, kita tinggal menuliskan script css langsung didalam tag html, meskipun sama-sama tinggal menuliskan langsung di dalam tag html namun bedanya menggunakan metode Inline Style adalah kita bisa langsung mentarget tag dan elemen yang kita inginkan.
Agar sobat lebih paham dengan penjelasan diatas, mari kita coba membuat contoh dari masing-masing metode diatas. Contoh kode di bawah ini menggunakan metode Internal Style Sheet. Perhatikan kode dibawah ini :
<html>
<head>
<title>Belajar Membuat CSS</title>
<style type="text/css">
body{background-color: yellow;}
p{color: red;font-size: 25px;}
h3{color: blue;font-size: 20px;}
</style>
</head>
<body>
<p>Paragraph ini berwarna merah, ukuran font 25 pixel</p>
<h3>Heading ini berwrna biru, ukuran font 20 pixel</h3>
</body>
</html>
Silahkan copy dan pastekan kode diatas di editor sobat, simpan dengan nama misalnya cssku.html, perhatikan hasil kode di atas di bawah ini :
Contoh kode diatas menggunakan metode Internal Style Sheet, sekarang kita coba membuat halaman html lagi, tapi memakai metode Eksternal Style Sheet. Perhatikan kode di bawah ini :
<html>
<head>
<title>Belajar Membuat CSS</title>
<!-- *kode ini tidak aktif**
<style type="text/css">
body{background-color: yellow;}
p{color: red;font-size: 25px;}
h3{color: blue;font-size: 20px;}
</style>
-->
<link rel="stylesheet" href="cssku.css" type="text/css" />
</head>
<body>
<p>Paragraph ini berwarna merah, ukuran font 25 pixel</p>
<h3>Heading ini berwrna biru, ukuran font 20 pixel</h3>
</body>
</html
Silahkan copy dan pastekan kode diatas ke editor sobat, lalu simpan dengan nama misalnya cssku.html, langkah selanjutnya kita akan membuat file css agar nanti dapat kita panggil fungsinya ke halaman html yang sudah kita buat tadi. perhatikan kode di bawah ini, copy paste juga dan simpan dengan nama cssku.css.
body{background-color: yellow;}
p{color: red;font-size: 25px;}
h3{color: blue;font-size: 20px;}
jika semuanya sudah sobat lakukan, sekarang tinggal mencoba hasil nya, dobel klik file cssku.html tadi, lihat hasilnya seperti apa? pasti akan sama to, :-).
di bawah ini adalah hasil dari file cssku.html menggunakan metode Eksternal Style Sheet.
Secara hasil yang ditampilkan di browser memang sama, namun jika dibandingkan kode di file html nya akan terlihat perbedaannya, sobat tau perbedaannya kan? jika bingung saya bantu jelaskan kode diatas. sobat perhatikan gambar dibawah ini :
Kode yang terdapat disebelah kiri yang saya namai cssku.html itu menggunakan metode Internal Style Sheet, sedangkan yang sebelah kanan menggunakan metode Eksternal Style Sheet, kita cari tahu perbedaan dan penjelasannya.
Perhatikan kode di file cssku.html, kita menuliskan sintax css langsung di halaman html itu, sedangkan file cssku1.html yang ada di sebelah kanan, sintax css yang sudah dituliskan sebelumnya saya non aktifkan menggunakan komentar html, jadi sintax tersebut tidak akan diproses oleh browser, tapi coba perhatikan lebih dekat lagi, saya menambahkan sintax yang berbeda pada file cssku1.html.
Sintax yang saya tambahkan adalah perintah memanggil atau menginclude file cssku.css yang sudah kita buat tadi agar bisa difungsikan di file cssku1.html. Penulisan kode yang saya maksud adalah di bawah ini :
<link rel="stylesheet" href="cssku.css" type="text/css" />
Kode diatas adalah tatacara atau aturan penulisan sintax html untuk memangil fungsi dari file css yang berada di luar halaman html. perhatikan pada kode href, saya langsung menuliskan cssku.css, itu karena file css dan html masih berada dalam satu folder, jika kedua file tersebut berbeda folder maka penulisannya pun tidak demikian. tulis nama folder kemudian tanda slash atau "/" baru nama file css. contohnya jika kita menyimpan file css di folder "CSS-KU", maka penulisannya seperti ini href="namafolder/namafilecss".
Satu lagi, kita belum membuat contoh penulisan dengan metode Inline Style, perhatikan kode di bawah ini :
<html>
<head>
<title>Belajar Membuat CSS</title>
</head>
<body style="background-color: yellow;">
<p style="color: red;font-size: 25px;">Paragraph ini berwarna merah, ukuran font 25 pixel</p>
<h3 style="color: blue;font-size: 20px;">Heading ini berwrna biru, ukuran font 20 pixel</h3>
</body>
</html>Jika diamati hasil dari ketiga metode di atas hasilnya sama kan? ya jelas sama, yang beda hanya metode penulisannya. :-)
Selamat mencoba, Semoga bermanfaat.