Monday, June 25, 2007

TUTORIAL CSS (1)

CSS singkatan dari Cascading Style Sheet, merupakan kode untuk mengatur tampilan halaman. Untuk mengatur jenis huruf, warna, ketebalan, bisa langusng menggunakan TAG HTML, namun dalam perkembangannya menjadi rumit kalau menyangkut desain yang banyak, kalau mau mengedit, maka tiap halaman harus di edit satu-satu.

Dengan CSS kita tinggal masuk ke script CSS nya lalu mengganti bagian mana yang akan diganti. Karena dalam CSS semua sudah dikelompokkan dalam ID atau Class tertentu, maka menjadi mudah manajemen halamnnnya.

CSS ada yang merupakan file terpisah, CSS external, yang kemudian di link ke halaman HTML. Satu file CSS bisa dipakai untuk banyak halaman dengan style sama. Pemisahan halaman HTML dengan CSS akan memudahkan dalam pengeditan. Namun hal ini membutuhkan hosting untuk menyimpan file. Keuntungan lainnya, dengan memisahkan file css, tak mudah ditiru orang hanya dengan melihat source codenya. Untuk untuk membuat CSS external, buatlah file dengan extensi *.css.

Misalnya: File: latihan1.css


body
{
bground-color:#red
}

kemudian buat file html, misalnya dengan nama latihan1.html
cara menyisipkan kode CSS yaitu dengan koneksi link css:

Sisipkan diantara tag <head>...</head> kode sebagai berikut:

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


Ada juga CSS yang menjadi bagian dari halaman, CSS internal, seperti dalam halaman Blogger saya. Kelebihannya, tak membutuhkan hosting kkhusus untuk menyimpan file css nya. Ini merupakan solusi untuk blog seperti Bloger, wordpress yang hanya menyediakan halaman jadi, tidak menyediakan hosting file.

Cara membuat CSS internal.
Letak script CSS berada pada tag <head>...</head>
Diawali dengan

<style type =”text/css”>
<--
di sini script CSS
-->
</style>>

Tag CSS: selector {properties:value;}
Contoh:

body {
bground-color:#ffffff;
}

akan menghasilkan latar belakang putih.

img
{
border:1px solid
}

akan menghasilkan, setiap tag <img> yang tidak ditentukan class nya, akan diberi border sebesar 1 px.

Kalau ditentukan kelasnya misalnya:

.display img
{
border:0;
}

gambar yang dimasukkanke class .display tidak ada garisnya.

Class selector
Dalam CSS tiap-tiap bagian bisa dibagi-bagi dalam class yang berbeda sehingga memudahkan dalam pengeditan. Misalnya kita akan membedakan jenis huruf, ukuran, warha untuk tanggal, judul tulisan, dan isi tulisan. Kita buat tiga class dengan nama “tanggal”, “judul”, “isi”

.tanggal
{
font-family:verdana, arial, Helvetica;
font-size:10 px;
color:#green;
}

penggunaanya:

<div class=”tanggal”>
12 Juni 2007
</div>


menghasilkan: 12 Juni 27, font verdana, ukuran font 10px, warna hijau.

.judul
{
font-family:verdana, arial, Helvetica;
font-size:12 px;
color:#red;
text-transform:uppercase;
}

tampilan: font verdana, ukuran font 12px, warna: merah, huruf besar semua (uppercase).

.isi
{
font-family:Georgia, “times new roman”, arial;
font-size:12 px;
color:#000000;
}

tampilan: font Georgia (cirikhas wordpress, juga template minima-nya blogger), ukuran font 12px, warna hitam.

.kolomisi
{
padding:10px 5px 10px 10px;
}

artinya:
kalau kolom <td> diberi style .kolomisi akan terformat dengan Padding atas:10px, padding kanan:5px, padding bawah: 10px, dan padding kiri: 10px.


[bersambung di tulisan berikutnya]



4 comments:

Anonymous said...

Belajar CSS susah juga ya, aku masih sering salah nulis scriptnya. makanya sering nyontek punya orangnya. ada info ngga mas kalo dapatin css yang free tapi gratis

meds said...

u franchise, untuk source css dan style, coba kunjungi www.dynamicdrive.com, ada banyak resourcess untuk css list dan template.

EF Hariman said...

salam,
pak.. gimana niyh supaya tampilan sama di berbagai browser? menunggu mode :ON

Anonymous said...

u membuat design yang bisa tampil di berbagai browser perlu tahu kelakuan masing-masing browser dalam merender html document.

misal: untuk width, beda antara firefox dengan IE. di firefox, padding belum termasuk bagian dari width. misal: width:800px; padding:10px; berarti panjang total elemen 800 + 10 + 10.

kalau IE, width tetap 800, tapi panjang efektif jadi berkurang menjadi: 800 - 10 - 10 = 780px;

kalau saya sih mendesain dulu, baru kemudian test di IE, mozila, opera. sering coba-coba. Cari referensi tentang CSS.