Tutorial CSS Untuk Pemula

Cascading Stylesheet (CSS) adalah mekanisme sederhana untuk mengubah Jenis Huruf, Warna, Ukuran dan lain-lain pada halaman website. Dengan menggunakan CSS, pengaturan tampilan halaman web dapat diorganisasikan dalam satu file sehingga memudahkan untuk mengubah atau memperbaiki tampilan halaman website tersebut tanpa harus mengubah satu per satu setiap halaman yang berkaitan dalam sebuah website.

Pengenalan XHTML

XHTML adalah cara penulisan perintah-perintah untuk menghasilkan tampilan halaman website. Halaman XHTML memiliki struktur seperti contoh berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
</body>
</html>

Isi dari halaman website dituliskan pada bagian antara <body> dan </body>. Sedangkan bagian <head> sampai dengan </head> digunakan untuk menyisipkan perintah (tag) lainnya seperti memanggil file javascript, mendeklarasikan kata kunci (keywords) dan menuliskan keterangan tentang halaman website (description). Perintah untuk memanggil file CSS juga ditempatkan pada bagian ini.

Sedangkan kode-kode yang biasa digunakan untuk menuliskan isi dari halaman website adalah seperti contoh berikut:

  • <p> ... </p>
    Untuk menempatkan teks yang berupa paragraf.
  • <h1> ... </h1>, <h2> ... </h2>, <h3> ... </h3>
    Untuk menuliskan judul dari kelompok paragraf.
  • <div> ... </div>
    Disebut sebagai layer yang berfungsi untuk mengelompokkan beberapa paragraf.

Berikut adalah contoh penulisan halaman XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
	<div>
		<h1>Contoh Halaman Website</h1>
		<p>
		  Ini adalah isi paragraf
		  dari contoh halaman website
		</p>
	</div>
</body>
</html>

Kode-kode XHTML lainnya yang bisa Anda pelajari dari file yang dapat diunduh dari sini.

Penggunaan CSS

CSS dapat dibuat hanya dengan menggunakan Notepad atau text editor sederhana lainnya dan disimpan dengan ekstensi .css. Agar halaman website dapat membaca file CSS tersebut maka perlu ditambahkan baris kode tertentu pada bagian <head></head> halaman website tersebut seperti contoh di bawah ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Judul Halaman</title>
<!-- Baris yang ditambahkan -->
<link rel="stylesheet" href="[URL]" type="text/css" media="screen" />
<!-- Akhir dari baris yang ditambahkan -->
</head>
<body>
	<div>
		<h1>Contoh Halaman Website</h1>
		<p>
		  Ini adalah isi paragraf
		  dari contoh halaman website
		</p>
	</div>
</body>
</html>

[URL] = Alamat URL tempat file CSS tersebut disimpan

Penulisan kode CSS

Kode CSS disebut dengan style. Penulisan kode CSS dalam sebuah file CSS adalah dengan format sebagai berikut

tag { property: value; }

tag = tag XHTML, atau nama layer dimana style tersebut berfungsi.
property = Detail yang tampilannya diubah dengan style tersebut.
value = Nilai dari properti di atas.

Sebagai contoh, untuk mengubah format tampilah dari sebuah judul artikel (header) yang memiliki kode <h1>Contoh Halaman Website</h1> menjadi bergaris bawah, berwarna biru dan berukuran 28 pixel, maka dalam file CSS dapat ditulis:

h1 { text-decoration: underline,  color: blue; font-size: 28px; }

Hal tersebut akan menimbulkan efek yang sama untuk setiap kali kode <h1> ... </h1> digunakan dalam halaman XHTML.

Cara penulisan lainnya adalah dengan mendefinisikan style berdasarkan class atau ID layer. Untuk cara ini, maka kode XHTML harus mendefinisikan nama class atau identitas layer yang digunakan seperti pada contoh berikut:

  • Header dengan class bernama “judul”
    Pada halaman XHTML ditulis:
    <h1 class="judul">Contoh Halaman Website</h1>
    Pada file CSS didefinisikan:
    .judul { text-decoration: underline, color: blue; font-size: 28px; }

    • Kode ini tidak merubah semua tag <h1> ... </h1>, namun akan merubah semua tag yang memiliki nama class yang sama seperti misalnya:
    <div class="judul"> ... </div>

  • Header dengan ID bernama “judul”
    Pada halaman XHTML ditulis:
    <h1 class="judul">Contoh Halaman Website</h1>
    Pada file CSS didefinisikan:
    #judul { text-decoration: underline, color: blue; font-size: 28px; }
    Kode ini juga memiliki pengaruh yang sama dengan penggunaan berdasarkan class.

Kode-kode CSS yang lebih lengkap dapat Anda pelajari dari file yang dapat Anda unduh dari sini.

Hal utama yang perlu diperhatikan adalah bahwa penulisan style dalam CSS harus berurutan dan diperhatikan agar jangan sampai tumpang tindih. Untuk lebih jelasnya, perhatikan contoh berikut:

Pada CSS tertulis:

h1 { text-decoration: underline, color: blue; font-size: 28px; }
#pagetitle { font-size: 12px; }

Pada halaman website tertulis:

<h1 id="pagetitle">Contoh Halaman Website</h1>

Maka yang terjadi adalah, pada tampilan website besar tulisan “Contoh Halaman Website” adalah hanya 12 pixel, bukan 28 pixel karena ID untuk tag h1 yaitu #pagetitle dituliskan paling akhir.

Class dan ID dalam CSS

Untuk memudahkan, berikut adalah penjelasan secara umum tentang penggunaan class dan ID dalam CSS dan XHTML.

  1. ID juga dapat digunakan untuk menamai tag sebagai identifikasi pada javascript.
  2. ID bersifat unik pada setiap halaman, tidak boleh lebih dari satu tag memiliki id yang sama pada satu halaman yang sama.
  3. Class dapat digunakan berulang kali, satu tag dapat memiliki class lebih dari satu seperti misal:
    <h1 class="judul besar kanan">Contoh Halaman Website</h1>
    dimana judul, besar dan kanan memiliki style yang saling melengkapi.
  4. ID biasanya bersifat global yang dibedakan menjadi blok-blok tertentu misalkan, header, content, sidebar dan footer. Class biasanya digunakan untuk membedakan style tertentu yang dibedakan antara misalnya warna, jenis huruf atau besar huruf.
  5. Class dapat digunakan untuk mempertegas style dari ID yang bersifat global dengan menggunakannya bersama-sama pada satu tag seperti misal:
    <h1 id="pagetitle" class="judul">Contoh Halaman Website</h1>

Download

  1. Daftar Kode-kode XHTML dan contoh penggunaannya [PDF]
  2. Daftar lengkap kode-kode Cascading Stylesheet [PDF]
Posted on : 22 May 2009 (29 responses, 7167 views)

Posted in: Desain Web

Tagged: CSS

27 comments on "Tutorial CSS Untuk Pemula"
2 trackbacks
  1. Posts about CSS as of May 22, 2009 | XHTML and CSS ( 22 May 2009 21:44 )

    [...] of his experience and his clear and honest style. This is the complete sourcebook on CSS. The 3rd Tutorial CSS (Cascading Stylesheet) Untuk Pemula – preaxz.com 05/22/2009 Cascading Style Sheet (CSS) adalah mekanisme sederhana untuk mengubah Jenis [...]

  2. Arkobagong1979's Blog ( 18 January 2010 21:52 )

    [...] Tutorial CSS (Cascading Stylesheet) Untuk Pemula (May 22, 2009) [...]

Leave a Response