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.

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>

Ada dua cara penempatan elemen dalam web dengan CSS yaitu:
1. Position (Posisi)

Mengunakan properti position terdapat 4 cara:

Static > posisi normal (default). Relative > posisi elemen tergantung dari elemen yang lain. Absolute > posisi elemen berpatokan pada jendela browser. Fixed > posisi elemen tetap walaupun digeser.

2. Float (Nempel)

Menggunakan properti float atau clear:

Float:left > elemen akan menempel pada sebelah kiri elemen induk. Float:right > elemen akan menempel pada sebelah kanan elemen induk. Clear:left > elemen akan menempel pada sebelah kiri dan berada di bawah. Clear:right > elemen akan menempel pada sebelah kanan dan berada dibawah Clear:both > elemen akan berada pada posisi bawah elemen diatasnya.

Gambar dibawah ini adalah dasar-dasar dari pengaturan / format posisi dengan css:

Margin > jarak/batas elemen dengan elemen lain Border > border/gari tepi elemen Padding> jarak elemen dengan isi elemen (elemen anak) Berikut gambar dibawah adalah format standar untuk membuat tampilan dengan CSS:

contoh penulisan css : <html> <head> <style type = "text/css"> #header { width:900px; height:50px; border: 1px solid #640404; } #headerLeft { width:400px; background-color:#CCCCCC; height:50px; float:left; text-align:center; }

#headerRight { width:450px; background-color:#999999; height:50px; float:right; text-align:center; } </style> </head> <body> <h1>Sample</h1> <div id = "header"> <div id="headerLeft">Header Left</div> <div id="headerRight">Header Right</div> </div> </body> </html>

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:

1. External Style Sheet (file CSS berbeda dari file HTML), 2. Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML) 3. Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).

Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja kita coba kode berikut ini: Penempatan CSS dalam HTML

Internal CSS
Metode penulisan kode CSS langsung dalam file HTML. contoh: <html> <head> <style type = "text/css"> .header { width:900px; height:50px; border: 1px solid #640404;

} .headerLeft { width:400px; background-color:#CCCCCC; height:50px; float:left; text-align:center; } .headerRight { width:450px; background-color:#999999; height:50px; float:right; text-align:center; } </style> </head> <body> </body> </html>

Eksternal CSS
file CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh:

<html> <head> <link rel=stylesheet type=text/css href=public.css/> </head> <body> </body> </html>

Inline CSS
Penulisan kode CSS dalam tag HTML. contoh:

<html> <head> </head> <div style="background-color:#999999; text-align:center;">Inline CSS</div> </body> </html>

Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link> yang diletakkan diantara tag <head>. Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi gunakan saja file style.css dan coba.html anda hanya perlu mengubah isinya. Untuk file HTML anda gunakan coba.html dan ubah isinya pada bagian <body> saja bagian yang didalam <head> tidak usah diapa-apakan. Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya saja. Bagaimana anda sudah paham kegunaan CSS. CSS memiliki ratusan properties dan values, tentu saja saya tidak akan menerangkan semuanya, saya hanya akan menerangkan yang penting-penting saja. Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis huruf yang digunakan. Anda dapat menggunakan property font-family, yang mirip dengan tag <font>. Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka

browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat bkode berikut:
<h1 style="font-family: 'Times New Roman', Times, serif">Serif font</h1>

Link
Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link, menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna biru tua terang dengan garis bawah anda dapat mengubahnya. Coba kode CSS berikut:
a.link1:link { font-weight: bold; font-size: 12px; color: #C87C28; font-family: Times New Roman; text-decoration: none; } a.link1:visited { font-weight: bold; font-size: 12px; color: #CC6600; font-family: Times New Roman; text-decoration: none; } a.link1:hover { font-weight: bold; font-size: 12px; color: #C87C28; font-family: Times New Roman; text-decoration: underline } a.link1:active { font-weight: bold; font-size: 12px; color: #C87C28; font-family: Times New Roman; text-decoration: none; } a.link2:link { font-weight: bold; font-size: 12px; color: #663300; font-family: Arial, Helvetica, sans-serif; text-decoration: underline; } a.link2:visited { font-weight: bold;

font-size: 12px; color: #800000; font-family: Arial, Helvetica, sans-serif; text-decoration: none; } a.link2:hover { font-weight: bold; font-size: 12px; color: #ff6600; font-family: Arial, Helvetica, sans-serif; text-decoration: underline overline; } a.link2:active { font-weight: bold; font-size: 12px; color: #ff6600; font-family: Arial, Helvetica, sans-serif; text-decoration: underline; }