Powered By Blogger

Senin, 28 Desember 2009

Dasar dasar CSS

Bayangkan jika anda memiliki website dengan 100 halaman. Bayangkan apabila anda ingin mengganti jenis huruf dari tiap website. Hal tersebut tentu saja sangat membuang waktu, tetapi jika anda menggunakan CSS untuk mendesain tampilan web, maka hal tersebut dapat dilakukan dengan mudah.
CSS adalah Cascading Style Sheet adlah suatu teknik penulisan kode untuk memperindah dan mempermudah dalam pengkodean HTML dengan tujuan untuk memperindah tampilan situs . CSS berfungsi sebagai pemisah antara layout (template) yang stabil menurut ukuran yang ditetapkan dengan isi (content) web tersebut. CSS akan menampilkan template (layout) web yang tampak sama walaupun berada pada resolusi layar (ukuran monitor) yang berbeda. Berbeda dengan HTML yang bisa menyebabkan kerusakan design apabila berada pada ukuran layar monitor yang berbeda.
Dengan CSS, kita juga dapat mempersingkat waktu untuk melakukan pen-design-an sebuah website. Bayangkan saja jika situs kita mempunyai banyak halaman, dan jika kita menggunakan HTML murni, kita akan mendesign ulang per-halaman website, Berbeda kasusnya, jika yang digunakan adalah CSS, kita hanya perlu meletakkan sebuah perintah dalam halaman CSS untuk mengatur otomatis setiap halaman web kita (Ultimate Shorting Time).
Cara dasar kerja CSS susah-susah gampang (Intermediate Level). Dua buah dasar elemen dari CSS yaitu “selector”(Penyeleksi) dan “declaration”(Penampil). Sebuah selector biasanya adalah sebuah tag HTML biasa, sedangkan sebuah declaration berisi perintah-perintah CSS untuk mengontrol selector tadi.
CSS bisa dituliskan dengan tiga (3) cara yaitu
1.langsung disisipkan didalam tag . Untuk menyisipkan di dalam tag head harus diawali dengan tag
2.menggunakan file external, artinya script css ditulis dalam file tersendiri dengan akhiran .css. dan sisipkan file ini di dalam tag dengan cara seperti ini
3.langsung pada tag yang bersangkutan, misalkan

Berikut ini aturan penulisan CSS.
1.menggunakan tanda # sebagai awalan style, contohnya
#style_ku{
background-color:blue;
}
tanda ini berarti untuk menggunakan style ini harus menggunkana atribut id, dan setiap tag pasti memiliki atribut id, misal
ini teks
. Sifat dari id adalah unik, tidak boleh ada elemen yang memiliki id yang sama, makanya style ini hanya bisa digunakan sekali.
2.menggunakan tanda dot (.) sebagai awalan style, contohnya
.style_ku{
background-color:blue;
}
tanda ini berarti untuk menggunakan style ini harus menggunakan atribut class, setiap tag pasti memiliki atribut class. Misalkan
das
. Sifat dari class adalah tidak unik, artinya dalam 1 dokumen HTML boleh memiliki lebih dari 1 class yang sama. Dengan menggunakan tag
3.tanpa tanda, tetapi langsung mengarah pada tag HTML, misalkan
div{
background-color:blue;
}
artinya semua tag div akan dikenai style tersebut
4.turunan, baik # maupun dot (.) bisa menurunkan style. Style anak juga akan memiliki style dari induk.
Contohnya
#induk .anak{
background-color:red;
}
cara menggunakannya

bimoweb.com/ belajar web


artinya class anak adalah turunan dari id induk. Jika id induk dihilangkan, maka class anak tidak akan bekerja.

Kelebihan penggunaan CSS :
1.halaman web menjadi tidak padat, hingga halaman web menjadi SEO friendly
2.anda dapat dengan mudah mengganti tampilan web dengan cukup mengganti nilai dan definisi pada pada satu file CSS saja.
Manfaat dari CSS:
1.Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
2.Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
3.Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
4.Dapat berkolaborasi dengan JavaScript.
5.Digunakan dalam hampir semua web browser.