Cascading Style Sheet (CSS) yaitu Bahasa style sheet
yang digunakan untuk menggambarkan presentasi dari dokumen yang ditulis dalam
bahasa markup. CSS juga merupakan aturan untuk
mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan
seragam. CSS bukan merupakan bahasa pemograman.
Pada umumnya
CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS 3 adalah versi CSS terbaru
yang masih dikembangkan oleh W3C. Namun beberapa web browser sudah
mendukung CSS 3. CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada perubahan,
hanya ada beberapa penambahan, sehingga ketika bermigrasi dari CSS 2 ke CSS 3,
tidak perlu mengubah apapun.
CSS 3 memiliki beberapa fitur baru, seperti:
1.
Animasi, sehingga pembuatan animasi
tidak memerlukan program sejenis Adobe Flash dan Microsoft Silverlight
2.
Beberapa efek teks, seperti teks
berbayang, kolom koran, dan "word-wrap".
3.
Jenis huruf eksternal, sehingga
dapat menggunakan huruf yang tidak termasuk "web-safe fonts".
4.
Beberapa efek pada kotak, seperti
kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 3 dimensi,
sudut-sudut yang tumpul dan bayangan.
Kelebihan
dan Kekurangan CSS3
Kelebihan
:
- Dapat Mengatur dan
mempercantik interface website.
- Jika ingin membuat file CSS3
sebaiknya menggunakan CSS
external atau
terpisah dari file html dan dapat dipanggil di
file
html. Hal ini dapat mempermudah kita jika terjadi
pengeditan koding.
- Dengan CSS3, situs website
dapat berkembang dan lebih
interaktif lagi.
-
Bisa mengurangi ukuran file
yang akan di-load dan akan menjadi lebih ringan.
-
Lebih mudah dan simple serta
dapat menghindari penggunaan tag yang berulang-ulang.
-
Banyak yang beranggapan bahwa
peran jQuery sudah tidak dibutuhkan lagi setelah CSS3 semakin berkembang
kedepannya. Apalagi dari segi size, jQuery jauh lebih besar. Tidak hanya jQuery
saja, peran Flash saja sudah tergantikan dengan adanya CSS3.
Kekurangan
:
-
Kodingnya berbeda dengan versi
sebelumnya.
-
Koding dari setiapBrowser
berbeda. karena kita harus membuat koding dari seluruh Browser satu persatu.
-
Dibutuhkan waktu lebih lama
untuk membuatnya.
Tiga Cara Sisipkan CSS:
Eksternal
Style Sheet
Sebuah
style sheet eksternal sangat ideal bila gaya diterapkan pada banyak
halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan
seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke
style sheet menggunakan tag <link>. Tag <link> masuk ke dalam
bagian kepala;
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
Sebuah style sheet eksternal dapat
ditulis dalam editor teks apapun. File tidak boleh mengandung tag
html. Style sheet Anda harus disimpan dengan ekstensi css.. Sebuah
contoh dari sebuah file style sheet adalah sebagai berikut:
hr
{color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
Jangan
menambahkan spasi antara nilai properti dan unit (seperti margin-left: 20
px). Cara yang benar adalah: margin-left: 20px
Internal
Style Sheet
Sebuah
style sheet internal harus digunakan bila dokumen tunggal memiliki gaya yang
unik. Anda mendefinisikan gaya internal di bagian kepala halaman HTML,
dengan menggunakan tag style, seperti ini:
<head>
<style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>
<style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>
Inline Styles
Sebuah gaya inline kehilangan banyak
keuntungan dari style sheet dengan mencampurkan konten dengan
presentasi. Gunakan metode ini hemat!
Untuk menggunakan gaya inline Anda
menggunakan atribut style dalam tag yang relevan. Atribut style dapat
berisi properti CSS. Contoh ini menunjukkan bagaimana untuk mengubah warna
dan margin kiri paragraf:
<p
style=”color:sienna;margin-left:20px”>This is a paragraph.</p>
Styles
beberapa Will Cascade ke Satu
Gaya dapat
ditentukan:
- dalam sebuah
elemen HTML
- dalam bagian
kepala halaman HTML
- dalam file CSS
eksternal
Tip: Bahkan beberapa style sheet
eksternal dapat dirujuk di dalam dokumen HTML tunggal.
Cascading rangka
Gaya apa yang akan digunakan ketika
ada lebih dari satu gaya yang ditentukan untuk elemen HTML?
Secara umum kita dapat mengatakan
bahwa semua gaya akan “cascade” menjadi lembaran baru “virtual” style oleh
aturan berikut, di mana nomor empat memiliki prioritas tertinggi:
- Browser default
- Eksternal style
sheet
- Internal style
sheet (di bagian kepala)
- Inline style
(dalam elemen HTML)
Jadi, gaya inline (dalam elemen HTML)
memiliki prioritas tertinggi, yang berarti bahwa itu akan menimpa gaya
didefinisikan di dalam tag head, atau dalam style sheet eksternal, atau dalam
browser (nilai default).
daftar pustaka :
http://www.johanes.my.id/apa-itu-css-fungsi-panduan-dasar-css/
https://id.wikipedia.org/wiki/Cascading_Style_Sheets
https://id.wikipedia.org/wiki/CSS_3
https://armegvirtual.wordpress.com/css/penulisan-css/
http://cdn.tutorialzine.com/wp-content/uploads/2012/10/2464.jpg
http://shinworld.altervista.org/CSS3_Cool_Effects/images/CSS3.jpg