Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa file. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.CSS dapat mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokument. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Ada tiga jenis cara dalam penggunaan CSS ini, yaitu:
- External Style Sheet
- Internal Style Sheet
- Inline Style Sheet
Dalam artikel kali ini akan dibahas satu-persatu.
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/style.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, mengatur semantik dan praktis terkumpul dari satu file.
Internal Style Sheet
Adalah cara embeding css dengan menulis langsung di dalam file html yang ingin kita atus tampilannya. Penulisan ini disisipkan diantara tag head juga dengan diapit oleh tag style. Berikut ini contohnya:
<style type="text/css">
body{
background:#cccccc;
font-family:Arial;
}
</style>
|
Inline Style Sheet
Adalah penulisan script css langsung pada tag html dengan menambahkan style di dalamnya. Contoh:
<p style="font-size:20px;">Tulisan yang di atur </p> |
Dua cara terakhir ini tidak disarankan digunakan karena rumit dan memperbesar file setiap html anda sekaligus harus menulis di beberapa tempat sekaligus, kecuali memang sangat darurat. Darurat disini berarti memang tampilan segera dibutuhkan oleh pengguna saat itu sedangkan anda sedang membuka fie itu dan tidak sempat membuka file css karena keterbatasan koneksi misalnya.
Namun penggunaan external css akan memudahkan Anda di waktu kedepan dalam hal update dan editing.
Namun penggunaan external css akan memudahkan Anda di waktu kedepan dalam hal update dan editing.
Sejarah 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 distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
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 dengan tag HTML, atau membuat latar belakang sebuah halaman dengan warna biru. Kira-kira kode HTML untuk hal itu adalah sebagai berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!DOCTYPE html><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> |
Saya menggunakan tag <font> untuk membuat beberapa kata di dalam paragraf tersebut berwarna merah. Hal ini tidak salah, dan semuanya berjalan sesuai keinginan. Untuk sebuah artikel yang memiliki 5 paragraf, kita tinggal copy-paste tag <font color=”red”> pada kata-kata tertentu.
Namun setelah website tersebut memiliki katakanlah 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.
Dalam kondisi inilah CSS mencoba ‘memisahkan’ tampilan dari konten. Untuk paragraf yang sama, berikut kode HTML bila ditambahkan kode CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html><html><head> <title>Test Background Color CSS</title> <style type="text/css"> .warna { color: red; } </style></head><body> <p> CSS merupakan bahasanya <span>desainer web</span>. Namun sebenarnya, apa itu CSS? <br /> <span>CSS </span>adalah kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup, <span>salah satunya adalah HTML</span>. <br /> Dengan CSS kita bisa mengubah desain dari <span>text, warna, gambar dan latar belakang</span> dari (hampir) semua kode tag HTML. </p></body></html> |
Dalam contoh CSS diatas, saya merubah tag <font> menjadi tag <span>. Tag <span> sendiri merupakan tag yang tidak bermakna, namun bisa di kostumasi oleh CSS. Tag span ini ditambahkan atribut class=”warna”. Atribut ini berguna untuk memasukkan kode CSS pada tag <style> di bagian head. (Lebih lanjut tentang tag <span>, telah kita bahas di tutorial belajat HTML lanjutan: pengertian tag span dan div)
Jika kita ingin merubah seluruh warna menjadi biru, maka tinggal merubah isi dari CSS color: redmenjadi 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. Dalam tutorial selanjutnya, kita akan membahas Cara Menginput Kode CSS ke Halaman HTML.
Sumber:http://www.databendi.com/
0 Komentar