Showing posts with label css. Show all posts

Apa Yang Dimaksud CSS ? Dan Apa Kegunaannya ?

by Unknown

Cascading Style Sheet atau yang disingkat CSS memungkinkan untuk merubah dan mendesain tampilan suatu website ataupun blog. Blia kita memakai CSS maka mendesain website menjadi sangatlah mudah, bayangkan saja apabila anda mempunyai 5 ataupun banyak file HTML anda hanya membutuhkan satu file CSS saja. Sehingga apabila anda ingin merubah warna link, anda hanya cukup menggantinya dengan membuat file css untuk perubahan tersebut. Mudahkan ?, namun tidak semua browser bisa menerjemahkan program ini, biasanya yang paling rewel adalah IE karena kurang dukungannya terhadap CSS.

Ada 3 cara dalam menempatkan file CSS pada dokumen HTML yaitu: External Style Sheet (file CSS berbeda dari file HTML), Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML) dan Inline Style Sheet (Kode CSS langsung dipasang di tag HTML).

Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:

Header : berisi Deskripsi web/ judul.
Menu : menu link web.
Content : isi dari web.
Footer : identitas/hak cipta.

Ada dua cara menempatkan dokumen CSS dalam web yaitu :

1.Posisi (Position)

Mengunakan properti position terdapat 4 cara:

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

2.Menempel (Float)

Menggunakan properti float atau clear:

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.
Float:left, Elemen akan menempel pada sebelah kiri elemen induk.
Float:right, Elemen akan menempel pada sebelah kanan elemen induk.

Selanjutnya ..
Margin, jarak/batas elemen dengan elemen lain.
Border, border/gari tepi elemen.
Padding, jarak elemen dengan isi elemen.

Contoh menulis,
Tanpa CSS :

<html>
<head>
<title>Apa Itu CSS ?</title>
</head>
<body>
<h1><font face="Verdana">Apa Itu CSS ?</font></h1>
</body>
</html>

Menggunakan Internal CSS,

<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
h1 { font-family: verdana; }
</style>
</head>
<body>
<h1>Belajar CSS</h1>
</body>
</html>

Selanjutnya apabila kita ingin menggunakan external CSS maka kita harus membuat file CSS, dengan eksistensi .css, kita coba membuatnya dengan nama style.css

h1 { font-family: verdana; }

Sekarang kita menulis kode HTML-nya seperti ini

<html>
<head>
<title>Apa Itu CSS ?</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Apa Itu CSS ?</h1>
</body>
</html>

Diatas hanya akan mengubah tag <h1> yakni akan mengubah font menjadi Verdana, maka akan menjadi seperti ini

Apa Itu CSS ?

Dalam dokumen HTML kita perlu memanggil file CSS dengan menggunakan tag <link> yang harus anda letakan diantara tag <head>.

Kode CSS mempunyai dua bagian utama yaitu: Selector, dalam hal ini h1 dan yang kedua terdapat diantara kurung kurawal {font-family: verdana}. Didalam deklarasi juga terbagi menjadi dua bagian yaitu property dalam hal ini font-family dan value yakni verdana.

Tidak semua browser dapat menampilkan jenis font yang kita letakan didalam CSS. Sebagai contoh anda ingin menampilkan dari keluarga font Serif dan fontnya 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.Seperti ini :

<h1 style="font-family: 'Times New Roman', Times, serif">Serif font</h1>

Membedakan kode CSS dan JavaScript

CSS

Secara umum kode CSS ditandai dengan sebuah tag pembuka <style type=”text/css”> dan diakhiri dengan tag penutup </style>.
Setiap bagian kode dikenal dengan istilah syntax. Contoh #header-wrapper {
width: 940px;
margin:10px auto;
padding:10px 0;
}
Kode CSS bisa disimpan di antara tag pembuka <head> dan tag penutup </head> tetapi dapat juga disimpan di antara tag pembuka <body> dan tag penutup </body>.
Apabila anda memasang kode CSS secara eksternal maka flie tersebut harus bereksistensi .css dan uploadlah di file hosting dan memanggilnya (misalkan style.css) maka kodenya

<link rel="stylesheet" type="text/css" href="style.css">

Javascript

Kode Javascript biasanya diletakan di antara tag pembuka <script> dan tag penutup </script> atau dalam bentuk yang berbeda dengan tag pembuka <script type=”text/javascript”> dan tag penutup </script>.
Javascript dapat disimpan di template biasanya diantara tag pembuka <body> dan tag penutup </body> atau di antara tag pembuka <head> dan tag penutup </head> .