Wednesday, December 21, 2011

Dasar Pengertian CSS (Cascading Style Sheet)

Apa itu CSS(Cascading Style Sheet)? Sebenarnya ini Judul artikel makalah yang jadi tugas kuliah saya akhir-akhir ini.tapi tidak ada salahnya saya share untuk saling berbagi pengetahuan(mungkin agak jadul sihh karena masih dasar).


Ok lanjut saja tentang CSS.
Pengertian CSS adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan.

Keuntungan menggunakan CSS :
• Memisahkan presentastion sebuah dokumen dari content document itu sendiri.
• Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web
• Mempercepat proses rendering/pembacaan HTML.

Sepertinya kita sering banget denger istilah CSS, tapi bagi yang awam tentang dunia web dan Internet seperti kita pasti bingung atau bahkan banyak yang ga peduli apa itu CSS. Sebenarnya kalo kita punya profile di Friendster dan kita sering ngotak-ngatik tampilan profile kita, berarti secara langsung kita udah berhubungan dengan yang namanya CSS, Nah lo…baru nyadar kan?

CSS bekerja sebagai pelengkap pada HTML, jadi untuk mengerti CSS paling tidak kita harus sedikit tahu tentang HTML.

CSS(Cascading Style Sheet) adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website (situs). Singkatnya dengan menggunakan Methode CSS ini anda dengan mudah mengubah secara keseluruhan warna dan tampilan yang ada di situs anda, sekaligus memformat ulang situs anda (merubah secara cepat). CSS juga memungkinkan si pembuat web untuk memodifikasi HTML untuk membentuk tampilan sebuah website. Jadi kalo kita ini adalah arsitek, maka HTML adalah bangunannya dan CSS adalah desain interior dan eksteriornya. Web tanpa CSS bagai sayur tanpa garam. Lho?

Lalu apa sih style sheet (css) itu sebenarnya? apa kegunaan sebenarnya? dan bagaimana cara menggunakannya?
CSS diperkenalkan untuk pengembangan website pada tahun 1996. Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian akan membentuk hubungan parent-child pada setiap style. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.

CSS adalah sebuah dokumen yang berdiri sendiri dan dapat dimasukkan dalam kode HTML atau sekedar mejadi rujukan oleh HTML dalam pendefinisian style. CSS menggunakan kode2 yang tersusun untuk menetapkan style pda elemen HTML atau dapat juga digunakan membuat style baru yang biasa disebut class.
CSS dapat mengubah besar kecilnya text, mengganti warna background pada sebuah halaman, atau dapat pula mengubah warna border pada tabel, dan masih banyak lagi hal yang dapat dilakukan oleh CSS.
Singkatnya, CSS digunakan untuk mengatur susunan tampilan pada halaman HTML.

CSS dapat digunakan untuk menggantikan , , dan , dikarenakan hal berikut:
sebuah file css dapat menjadi rujukan banyak halaman HTML. Hanya dibutuhkan 1 baris kode untuk melakukan hal tersebut. Ini berarti akan meminimalkan file2 HTML yang akan dibuat.
Jika ingin mengubah tampilan website yang telah dibuat, maka yang perlu dilakukan hanya mengganti baris-baris kode pada css nya saja, tanpa perlu mengutak-atik file-file HTML nya.

CSS dapat mengatur banyak atribut pada sebuah halaman secara mudah. Misalnya: warna background, border, shadow, yang berbeda pada masing-masing tag yang digunakan.
Satu dari beberapa kehebatan tekhnologi css ini dan merupakan alasan banyak orang menyukai
penggunaannya adalah memperbolehkan kita untuk mendefinisikan sebuah style-sheet global yang dapat menerapkan aturan-aturan css tersebut untuk keseluruhan dokumen-dokumen HTML pada halaman web site anda. Keuntungannya jelas sekali, jika kita ingin mengubah tampilan situs, kita tinggal mengedit satu file saja
Sekarang, kita akan mencoba melihat bagaimana css itu bekerja. Untuk itu, kita butuh sebuah text editor (notepad, wordpad, Ms word, semua tergantung kesukaan masing2), dan sebuah web browser tentunya.

Contoh tanpa Css:
masukkan kode dibawah ini ke dalam text editor, lalu simpan dengan nama, tanpacss.html:
Tanpa CSS
tag H1


Contoh pakai Css:
masukkan kode dibawah ini kedalam text editor, lalu simpan dengan nama pakaicss.html
Pakai CSS
h1
{
color: #FF66CC;
font-family: Verdana;
size: 18pt;
}

tag H1 yang besar dan berwarna
Berarti sekarang ada 2 file html yang telah dibuat. Langkah selanjutnya, buka file-file html tersebut dengan menggunakan web browser.

pasti akan terlihat bedanya kan? Tag pada file tanpacss.html merupakan yang masih polos (tanpa dikenai atribut apapun), sedangkan pada file pakaicss.html telah diberi atribut berupa warna, font-family dan besar font yang digunakan. Pemberian atribut itu, terletak diantara tag dan .
Penggunaan css yang langsung dimasukkan ke dalam file HTML, biasa disebut inline style sheet.

Ok, kira-kira seperti itulah Dasar Pengertian CSS.mohon dimaafkan bila ada yang salah,karena sayapun masih tahap belajar.Artikel ini saya buat dengan menyadur dari Abe Poetra dan rumah web.semoga bisa bermanfaat buat kita semua.

No comments:

Post a Comment