XtGem Forum catalog

CSS TUTORIAL UNTUK PEMULA


Home/CSS Tutorial

Di posting olehErwin Saputra
Tanggal 24 November 2010

Sebelum aku memulai css tutorial ini, aku ingin menyampaikan permohonan maaf apabila dalam tutorial ini ada banyak kekurangannya dan bukan bermaksud untuk menjadi orang yang sok pintar. Hanya saja aku ingin berbagi atas pengalaman dan ilmu yang aku dapat juga dari belajar sana-sini. Untuk para wapmaster aku mohon izin untuk membuat tutorial ini.
Tutorial tentang css ini sebenarnya aku buat khusus untuk pengguna XtGem saja yang newbie dan masih belajar seperti aku. Baiklah, kita mulai saja dari pengenalan tentang css.


1.Pengenalan CSS
CSS yang dalam W3C (World Wide Web Consortium) diartikan sebagai Cascading Style Sheet atau dalam bahasa Indonesia sama seperti tampilan layout dalam suatu halaman dan bahasa yang digunakan dalam mengatur css ini sama dengan bahasa HTML. Membuat style sheet dalam sebuah halaman sebenarnya tidak sulit. Namun cukup menyita waktu bila kita tidak menggunakan metode yang sesuai.
Berikut ini adalah metode-metode yang dipergunakan dalam penempatan css.



Inline Style Sheet artinya style sheet yang ditempatkan didalam halaman html diantara tags dan yang biasanya digunakan untuk membuat halaman biasa yang tidak dinamis bukan mencakup keseluruhan halaman. Contoh:
Hasilnya akan menjadi seperti ini:

Ini adalah contoh style sheet yang menggunakan metode "inline style sheet".


Internal style sheet adalah metode penerapan style sheet yang ditempatkan didalam suatu halaman html diantara tags: dan metode ini biasanya dipergunakan untuk membuat halaman html yang dinamis. Contoh:
<html>
<head>
<style type="text/css">
<!--
body
{
background-color: #ff00ff;
}
-->
</style>
</head>
<body>
<h1>INI CONTOH HEADING</h1>
<p>Ini adalah contoh paragraf dengan background berwarna. Ini adalah contoh paragraf dengan background berwarna.</p>
</body>
</html>
warningcatatan:yang perlu diperhatikan dalam penulisan selektor "body" dan property "{ background-color: #ff00ff; }" sebaiknya dibagi dalam tiap baris menjadi:
body
{
background-color: #ff00ff;
}
ini dimaksudkan agar lebih mudah terbaca oleh browser.
Lihat hasil contoh disiniContoh internal style sheet

External Style Sheet adalah metode penerapan style sheet dengan menggunakan sebuah penghubung<l i n k>sebagai pemanggil elemen css secara keseluruhan. Metode ini kalau menurut aku merupakan metode yang efisien bila kita ingin menerapkan style pada seluruh halaman html yang dibuat.
Dalam menerapkan external style sheet agar bisa terhubung dengan elemen html pada halamanmu, yang harus dilakukan adalah merakit style sheet nya terlebih dahulu lalu disimpan menjadi sebuah filecss. Dan memberikannya sebuah nama style.css, terserah padamu apapun namanya. Namun hal yang perlu dicatat adalah selalu gunakan tanda titik "." di belakang nama style kamu dan dilanjutkan dengan css sebagai nama elemennya.
Selanjutnya pada halaman html kamu, panggil style.css tadi dengan menggunakan<link>link yang menghubungkan ke file css kamu,rel="stylesheet",dantype="text/css".
Secara keseluruhan akan menjadi seperti ini<link rel="stylesheet" type="text/css" href="style.css" />
Penghubung external style sheet ini harus di letakkan pada tags <head> dan </head>.
<html>
<head>
<title>Title Kamu</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
Disini isi halaman kamu
</body>
</html>


Untuk selengkapnya baca juga artikel di bawah ini.