Awal diperoleh nama CSS didapat dari fakta bahwa setiap deklarasi style
yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk
hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan
sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium
atau W3C pada tahun 1996.Setelah CSS distandarisasikan, Internet Explorer dan
Netscape melepas browserterbaru mereka yang telah sesuai atau paling tidak
hampir mendekati dengan standar CSS.
Cascading Style Sheet atau CSS adalah sebuah pemrogamaran atau boleh dibilang
script yang mengendalikan beberapa komponen (tag html) dalam sebuah website
sehingga tampilan akan menjadi lebih terstruktur dan seragam.
Ada tiga jenis cara dalam penggunaan CSS ini, yaitu:
1. External Style Sheet
Adalah CSS yang dibuat dalam file terpisah dengan ekstensi file .css. Untuk
memanggilnya menggunakan script html yang disisipkan antara tag head sebagai
berikut:
<link rel=”stylesheet” type=”text/css” href=”ditektori/filecss.css” />
Pada bagian href tersebut tinggal diisi mengarah ke direktori dimana Anda
menempatkan file cssnya. Penggunaan sistem embeding css ini sangat disarankan
karena memang banyak kelebihan yaitu mudah untuk melakukan pengeditan.
2. Internal Style Sheet
Adalah cara embeding css dengan menulis langsung di dalam file html yang ingin
kita atus tampilannya.
3. Inline Style Sheet
Adalah penulisan script css langsung pada tag html dengan menambahkan style di
dalamnya.
Model.
Perkembangan CSS
CSS 1
Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan
CSS sebagai bahasa pemrograman standard dalam pembuatan web. Tujuannya adalah
untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer,
karena kedua browser tersebut sedang bersaing mengembangkan tag sendiri
untuk mengatur tampilan web. CSS 1
mendukung pengaturan tampilan dalam hal :
Font (Jenis ketebalan). Warna, teks, background dan elemen lainnya.Text attributes, misalnya spasi antar baris, kata dan
huruf.Posisi teks, gambar, table dan elemen lainnya.Margin, border dan padiing.
2. CSS 2
Pada tahun 1998, W3C menyempurnakan CSS tahap awal dengan menciptakan standard
CSS 2 yang menjadi standard hingga saat ini. Pada level CSS 2 ini, dimasukkan
semua atribut dari CSS 1 dan diperluas dengan penekanan pada International
Accessibiality and Capacibilty kususnya media-specific CSS. CSS 2 dikembangkan
untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di
printer.
3. CSS3
Adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain
website. melakukan animasi pada halaman website, diantaranya animasi warna
hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal
kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni
@media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple
background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object
Sifat CSS
Ada dua sifat CSS yaitu internal dan eksternal.
Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke
halaman websiteyang akan didesain. Kalau halaman web yang lain akan
didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke
dalam halaman web yang lain itu.
Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan
dalam berkas khusus. Nanti, cukup gunakan semacam tautan menuju berkas CSS itu
jika halaman web yang didesain akan dibuat seperti model yang ada di skrip
tersebut.
Keunggulan CSS
Sebelum kehadiran CSS, seorang webmaster harus bekerja ekstra keras menuliskan
tag-tag HTML baik untuk mendesain layout ataupun untuk memberi gaya tampilan
(style) pada bagian-bagian tertentu dari situ web yang akan dibuatnya.
Pekerjaan ini tentu semakin berat apabila situs web tersebut terdiri dari
puluhan atau bahkan ratusan halaman dengan tampilan yang berbeda-beda, karena
setiap tampilan membutuhkan penulisan tag-tag yang secara mandiri unik. Untuk
bagian-bagian dengan tampilan yang sama pun seorang webmaster harus direpotkan
dengan penulisan tag-tag HTML secara berulang-ulang. Hadirnya CSS,
pekerjaan seorang webmaster menjadi jauh lebih ringan. CSS mampu menghindarkan
pengulangan dalam penulisan tag HTML, sehingga ukuran file pun akan jauh lebih
kecil. Dengan ukuran file yang kecil, proses loading situs web juga akan jauh
lebih cepat.
Meskipun sebuah file CSS bisa diintegrasikan langsung dengan file HTML, namun
umumnya file CSS dibuat secara terpisah, sehingga memungkinkan kita mendekorasi
tampilan bagian-bagian tertentu dari halaman web secara serempak.
Inilah manfaat paling penting dari CSS! Mempelajari CSS bisa jadi bukan
pekerjaan mudah. Namun, ada banyak keuntungan lain yang akan kita peroleh
dengan menggunakan CSS ini, yaitu:
1. Update tampilan lebih mudah
Mengupdate tampilan situs web yang terdiri dari beberapa halaman saja tentu
jauh lebih mudah daripada untuk situs dengan ratusan atau ribuan halaman.
Dengan CSS, kita akan dapat mengupdate tampilan halaman-halaman web dalam
jumlah banyak dengan mudah, karena semua tag untuk style ini berada pada satu
file CSS saja.
2. Beban bandwidth lebih kecil
Dengan CSS, ukuran file web akan menjadi “langsing” karena tag-tag style
dipisahkan secara mandiri. Hal ini secara signifikan akan berdampak pada proses
loading yang lebih cepat. Selain itu, CSS hanya akan di-load satu kali oleh
browser dan akan terus diterapkan pada halaman-halaman lain. Hal ini berbeda
dengan situs yang menggunakan table karena harus di-load berulang-ulang.
3. Modifikasi web template lebih mudah
Cara paling cepat membangun situs web ialah dengan menggunakan template. Namun
terkadang template tersebut tidak sesuai dengan keinginan dan keperluan kita.
Dengan CSS, kita akan lebih mudah melakukan “vermak” pada template tersebut,
misalnya mengganti warna latar atau mengubah jenis huruf.
4. Lebih mudah digunakan pada mobile phone
Sekarang, orang melakukan browsing tidak hanya melalui browser di PC, tetapi
juga melalui mobile phone atau PDA. Situs web yang menggunakan CSS akan jauh
lebih mudah digunakan oleh mereka yang browsing melalui gadget-gadget tersebut.
5. Seacrh engine friendly
Sebuah situs web yang dilayout dengan CSS akan lebih search engine friendly
daripada situs-situs web yang menggunakan table sebagai pondasi layoutnya.
Kekurangan Penggunaan CSS
Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi
kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi
berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya
terlihat baik di semua browser dan menambahkan kode-kode khusus browser
tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua
browser.
Cascading Style Sheet atau CSS adalah sebuah pemrogamaran atau boleh dibilang script yang mengendalikan beberapa komponen (tag html) dalam sebuah website sehingga tampilan akan menjadi lebih terstruktur dan seragam.
Ada tiga jenis cara dalam penggunaan CSS ini, yaitu:
1. External Style Sheet
Adalah CSS yang dibuat dalam file terpisah dengan ekstensi file .css. Untuk memanggilnya menggunakan script html yang disisipkan antara tag head sebagai berikut:
<link rel=”stylesheet” type=”text/css” href=”ditektori/filecss.css” />
Pada bagian href tersebut tinggal diisi mengarah ke direktori dimana Anda menempatkan file cssnya. Penggunaan sistem embeding css ini sangat disarankan karena memang banyak kelebihan yaitu mudah untuk melakukan pengeditan.
2. Internal Style Sheet
Adalah cara embeding css dengan menulis langsung di dalam file html yang ingin kita atus tampilannya.
3. Inline Style Sheet
Adalah penulisan script css langsung pada tag html dengan menambahkan style di dalamnya.
Pada tahun 1998, W3C menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang menjadi standard hingga saat ini. Pada level CSS 2 ini, dimasukkan semua atribut dari CSS 1 dan diperluas dengan penekanan pada International Accessibiality and Capacibilty kususnya media-specific CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer.
3. CSS3
Adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni @media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object
Ada dua sifat CSS yaitu internal dan eksternal.
Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman websiteyang akan didesain. Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu.
Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus. Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang ada di skrip tersebut.
Meskipun sebuah file CSS bisa diintegrasikan langsung dengan file HTML, namun umumnya file CSS dibuat secara terpisah, sehingga memungkinkan kita mendekorasi tampilan bagian-bagian tertentu dari halaman web secara serempak.
Inilah manfaat paling penting dari CSS! Mempelajari CSS bisa jadi bukan pekerjaan mudah. Namun, ada banyak keuntungan lain yang akan kita peroleh dengan menggunakan CSS ini, yaitu:
1. Update tampilan lebih mudah
Mengupdate tampilan situs web yang terdiri dari beberapa halaman saja tentu jauh lebih mudah daripada untuk situs dengan ratusan atau ribuan halaman. Dengan CSS, kita akan dapat mengupdate tampilan halaman-halaman web dalam jumlah banyak dengan mudah, karena semua tag untuk style ini berada pada satu file CSS saja.
2. Beban bandwidth lebih kecil
Dengan CSS, ukuran file web akan menjadi “langsing” karena tag-tag style dipisahkan secara mandiri. Hal ini secara signifikan akan berdampak pada proses loading yang lebih cepat. Selain itu, CSS hanya akan di-load satu kali oleh browser dan akan terus diterapkan pada halaman-halaman lain. Hal ini berbeda dengan situs yang menggunakan table karena harus di-load berulang-ulang.
3. Modifikasi web template lebih mudah
Cara paling cepat membangun situs web ialah dengan menggunakan template. Namun terkadang template tersebut tidak sesuai dengan keinginan dan keperluan kita. Dengan CSS, kita akan lebih mudah melakukan “vermak” pada template tersebut, misalnya mengganti warna latar atau mengubah jenis huruf.
4. Lebih mudah digunakan pada mobile phone
Sekarang, orang melakukan browsing tidak hanya melalui browser di PC, tetapi juga melalui mobile phone atau PDA. Situs web yang menggunakan CSS akan jauh lebih mudah digunakan oleh mereka yang browsing melalui gadget-gadget tersebut.
5. Seacrh engine friendly
Sebuah situs web yang dilayout dengan CSS akan lebih search engine friendly daripada situs-situs web yang menggunakan table sebagai pondasi layoutnya.
Kekurangan Penggunaan CSS
Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.