Archive for April 2014
CSS dan Penerapannya
Setelah beberapa waktu tidak posting artikel apapun, akhirnya Gudang Receh mulai ngeblog lagi. Pada posting kali ini Gudang Receh akan sedikit berbagi tentang CSS. Apa itu CSS ?
CSS adalah singkatan dari "Cascading Style Sheets" merupakan suatu bahasa markup (bukan bahasa pemrograman) yang berfungsi untuk mengatur style pada webpage html. Apakah fungsi CSS ?
Apabila dalam suatu web page html akan membuat style untuk suatu element, maka pada sebagian element yang lain harus menuliskan script untuk stylenya lagi. Disinilah fungsi dari CSS, yaitu untuk meringkas style tersebut sehingga tidak perlu diulang-ulang. Bahkan juga dapat diterapkan pada web page lainnya.
Penerapan CSS
Ada 3 cara dalam menerapkan script CSS pada web page yang kita buat:
1. Inline
Pada metode ini, script CSS di letakkan didalam suatu tag html. Contohnya dibawah ini:
<html>
<head>
<title>Contoh Penulisan CSS Inline</title>
</head>
<body bgcolor="#FFFFFF">
<div id="contoh1">
Ini adalah contoh text tanpa ditambahkan script CSS </div>
<div id="contoh2" style="font-size: 24pt;">
<br />
Text ini ditambahkan script CSS inline. Besar font 24 point </div>
<div id="contoh3" style="color: blue; font-size: 14pt;">
<br />
Text ini ditambahkan script CSS inline. Besar font 14 point, dan menggunakan warna biru </div>
</body>
</html>
Hasilnya akan seperti dibawah:
Ini adalah contoh Text ini tanpa ditambahkan script CSS
Text ini ditambahkan script CSS inline. Besar font 24 point
Text ini ditambahkan script CSS inline. Besar font 14 point, dan menggunakan warna biru
Namun menurut saya pribadi, metode ini kurang efektif, karena hampir sama dengan pemformatan tulisan pada html biasa yang harus mengulang - ulang script tersebut.
2. Embedded
Pada metode ini script di tulis diantara tag <style> </style> yang ada dalam head. Contohnya seperti dibawah:
<html>
<head>
<title>Contoh Penulisan CSS Embedded</title>
<style>
#contoh1 {
color:blue;
}
#contoh2 {
color:red;
font-size:24pt;
}
.contoh3 {
color:green;
font-size:14pt;
}
</style>
</head>
<body>
<div id="contoh1">
Ini adalah contoh Text yang ditambahkan script CSS. Warna font biru.</div>
<div id="contoh2">
<br />
Text ini ditambahkan script CSS inline. Besar font 24 point dan warna merah.</div>
<p class="contoh3">
<br />
Text ini ditambahkan script CSS inline. Besar font 14 point, dan menggunakan warna biru.</div>
</body>
</html>
Dan hasilnya akan seperti dibawah ini:
Ini adalah contoh Text yang ditambahkan script CSS. Warna font biru.
Text ini ditambahkan script CSS inline. Besar font 24 point dan warna merah.
Text ini ditambahkan script CSS inline. Besar font 14 point, dan menggunakan warna biru.
Penerapan metode embedded lebih efektif dibanding dengan metode inline, karena tidak perlu mengulang-ngulang script pada setiap tag. Namun pada metode ini masih kurang efektif karena hanya bisa diterapkan dalam satu web page html saja. Untuk diterapkan pada web page html lainnya maka kita harus menuliskannya lagi atau dapat juga copy dan paste.
3. External
Maksud dari external adalah, style script yang kita tulis disimpan dengan nama sendiri, dengan ekstensi file .css . Kemudian dipanggil oleh web page html yang telah dibuat. Contoh penerapan CSS External:
<html>Script diatas adalah script html yang akan diberi style. Simpan dengan nama sesuka anda. Misal "index.html"
<head>
<title>Contoh Penulisan CSS External</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="contoh1">
Ini adalah contoh Text yang ditambahkan script CSS. Warna font biru.</div>
<br>
<div id="contoh2">
<br />
Text ini ditambahkan script CSS inline. Besar font 24 point dan warna merah.</div>
<p class="contoh3">
<br />
Text ini ditambahkan script CSS inline. Besar font 14 point, dan menggunakan warna biru.</div>
</body>
</html>
Dan script berikut adalah script CSS untuk memberi style pada web page html diatas.
#contoh1 {Simpan dengan nama yang sama dengan file yang dipanggil dalam tag <link rel="stylesheet" type="text/css" href="style.css" />
color:blue;
}
#contoh2 {
color:red;
font-size:24pt;
}
.contoh3 {
color:green;
font-size:14pt;
}
Pada metode ini, menurut saya pribadi adalah paling efektif untuk diterapkan pada pembuatan web anda. Karena beberapa web page sekaligus dapat memanggil satu style script.
Itulah sedikit yang dapat Gudang Receh bagi, dan sepertinya masih banyak salah dan kata yang membingungkan. Mohon komentarnya untuk kritik dan saran.
Source gambar
Tags: css, script, style, html, web page, web, page, sheets,
Iptekini
