Pengertian CSS (Cascading Style Sheet)
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.
Cascading Style Sheets (CSS) ini ternyata juga bisa meletakkan styles yang berbeda pada layers atau (lapisan) yang berbeda pula. CSS ini terdiri atas style sheet yang memberitahubrowser dalam menyelesaikan suatu dokumen yang akan disajikan. lalu untuk fitur-fitur baru pada halaman web juga lama dapat ditambahkan dengan bantuan style sheet. Pada saat menggunakan CSS, Anda tidak perlu repot-repot menulis font, size atau pun color pada setiap paragraf nya, ataupun pada setiap dokumen sekalipun. Lalu, setelah Anda membuat sebuah style sheet, Anda pun bisa menyimpan kode tersebut sekali saja dan juga dapat kembali menggunakannya apabila suatu saat diperlukan
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.
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.
Sejarah CSS
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.
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 distandardisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS
Fungsi dan Kegunaan CSS
fungsi utama dari css ialah mendesain, merancang, merubah, dan juga membentuk halaman pada wesite ataupun blog dan isi dari halaman website itu ialah tag-tag html, logikanya css itu bisa mengubah tag-tag html yang sederhana sehingga bisa menjadi lebih fungsional dan juga menarik.
Awal mula diperlukannya CSS dikarenakan kebutuhan akan halaman web yang semakin kompleks. Pada awal kemunculan HTML, kita bisa membuat suatu paragraf bewarna merah dengan menulis langsung kode tersebut didalam tag HTML, atau membuat latar belakang sebuah halaman dengan warna biru. Contoh kode HTML untuk hal itu adalah sebagai berikut:
<html>
<head>
<title>Test Tag Font HTML</title>
</head>
<body>
<p>
CSS merupakan bahasanya <font color=”red”> desainer web </font>.
Namun sebenarnya, apa itu CSS?
<br />
<font color=”red”> CSS </font> adalah kumpulan kode yang digunakan
untuk mendefenisikan desain dari bahasa markup,
<font color=”red”>salah satunya adalah HTML</font>.
<br />
Dengan CSS kita bisa mengubah desain dari
<font color=”red”>text, warna, gambar dan latar belakang</font>
dari (hampir) semua kode tag HTML.
</p>
</body>
</html>
Dengan tag <font>, kita membuat beberapa kata di dalam paragraf tersebut berwarna merah. Hal ini tidak salah, dan semuanya berjalan sesuai keinginan.
- Untuk artikel yang memiliki 5 paragraf, kita tinggal copy-paste tag <font color=”red”> pada kata-kata tertentu.
- Namun ketika website memiliki 50 artikel seperti diatas, dan karena sesuatu hal anda ingin merubah seluruh text merah tadi menjadi biru, maka akan dibutuhkan waktu yang lama untuk mengubahnya satu persatu, halaman per halaman.
- CSS akan mencoba ‘memisahkan’ tampilan dari konten.
Untuk paragraf yang sama, berikut kode HTML bila ditambahkan kode CSS:
<html>
<head>
<title>Test Background Color CSS</title>
<style type=”text/css”>
.warna {
color: red;
}
</style>
</head>
<body>
<p>
CSS merupakan bahasanya <span class=warna>desainer web</span>.
Namun sebenarnya, apa itu CSS?
<br />
<span class=warna>CSS </span>adalah kumpulan kode
yang digunakan untuk mendefenisikan desain dari bahasa markup,
<span class=warna>salah satunya adalah HTML</span>.
<br />
Dengan CSS kita bisa mengubah desain dari
<span class=warna>text, warna, gambar dan latar belakang</span>
dari (hampir) semua kode tag HTML.
</p>
</body>
</html>
Dalam contoh CSS diatas, tag <font> diubah menjadi tag <span>. Tag <span> sendiri merupakan tag yang tidak bermakna, namun bisa di kostumasi (disesuaikan) menggunakan CSS. Tag span saya tambahkan dengan atribut atribut class=”warna”. Atribut class berguna untuk memasukkan kode CSS pada tag <style> di bagian head. Jika kita ingin merubah seluruh warna menjadi biru, maka tinggal mengubah isi dari CSS color: red menjadi color:blue, dan seluruh tag yang memiliki class=”warna” akan otomatis berubah menjadi biru.
CSS memungkinkan kita merubah tampilan dari halaman, tanpa mengubah isi dari halaman.
Tujuan Menggunakan CSS
Tujuan utama dari CSS dikembangakan ialah agar dapat membedakan konten dari dokumen dan dari tampilan dokumen. Maka dari itu, pembuatan dalam pemrograman ulang web pun akan lebih mudah dilakukan. Hal-hal yang terlibat dalam desain web itu adalah warna, ukuran dan formatting. Dengan adanya CSS ini, konten dan desain web akan tampak mudah saat dibedakan, jadi memungkinkan juga untuk melakukan pengulangan pada tampilan-tampilan tertentu pada suatu web, sehingga akan sangat memudahkan dalam hal membuat halaman web yang banyak, dimana pada akhirnya bisa menghemat waktu dalam pembuatan web.
- – Memisahkan presentastion sebuah dokumen dari content document itu sendiri.
- – Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web
- – Mempercepat proses rendering/pembacaan HTML
Sifat dalam CSS
Ada dua sifat CSS yaitu internal dan eksternal. Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman website yang 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.
Cara Penggabungan CSS dengan HTML
-
Metode Inline Style
cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style, contoh penggunaan Metode Inline Style CSS adalah sebagai berikut:
<html>
<head>
<title>Contoh Inline Style CSS</title>
</head>
<body>
<h2 style=”background-color:black; color:white” >
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>
Dalam kode diatas, disisipkan atribut style pada tag <h2>, nilai dari atribut style ini adalah kode CSS yang ingin diterapkan.
- Tag CSS ini praktis, tapi tidak disarankan karena kode CSS langsung tergabung dengan HTML
- Tidak memenuhi tujuan CSS, desain terpisah dengan isi (content)
-
Metode Internal Style Sheets
- disebut juga Embedded Style Sheets
- digunakan untuk memisahkan kode CSS dari tag HTML namun tetap dalam satu halaman HTML.
- Atribut style yang sebelumnya berada di dalam tag, dikumpulkan pada pada sebuah tag <style>. Tag style ini harus berada pada bagian <head> dari halaman HTML.
Contoh penggunaan motode internal style sheets CSS:
<html>
<head>
<title>Contoh Inline Style CSS</title>
<style type=”text/css”>
h2 {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h2>
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>
- sudah jauh lebih baik daripada inline style, karena kita sudah memisahkan CSS dari HTML.
- Seluruh kode CSS akan berada pada tag head dari HTML.
- kekurangannya jika kita memiliki beberapa halaman dengan style yang sama, maka kita harus membuat kode CSS pada masing-masing halaman tersebut.
-
Metode External Style Sheets
- digunakan untuk ‘mengangkat’ kode CSS tersebut kedalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML.
- Setiap halaman yang membutuhkan kode CSS, tinggal ‘memanggil’ file CSS tersebut.
Masih menggunakan contoh yang sama dengan internal style sheets
Tahap pertama kita akan pindahkan isi dari tag <style> ke sebuah halaman baru, dan disimpan sebagai belajar.css
Isi dari file belajar.css
h2 {
background-color:black;
color:white;
}
Pastikan file disimpan dalam format .css dan disimpan dalam folder yang sama dengan kode html yang akan dibuat. Ada 2 cara yang dinggunakan untuk menginput kode css ke html
a. import
<html>
<head>
<title>Contoh Inline Style CSS</title>
<style type=”text/css”>
@import url(belajar.css);
</style>
</head>
<body>
<h2>
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>
Untuk metode @import, kita menyisipkan @import url (belajar.css) pada tag <style>. Alamat url bisa berupa alamat relatif maupun absolut
b. tag <link>\
<html>
<head>
<title>Contoh Inline Style CSS</title>
<link rel=”stylesheet” type=”text/css” href=”belajar.css”>
</head>
<body>
<h2>
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>
Pada metode ini kita menggunakan atribut href pada tag<link> yang berisi alamat file css (belajar.css).
Dari ketiga cara penggabungan CSS dan HTML di atas, yang paling disarankan untuk digunakan adalah metode external style sheets. Karena kita bisa menggunakan 1 file css untuk seluruh halaman web yang dibuat. Dan jika terjadi kesalahan, kita tinggal mengubah 1 file css saja.
