Pengetahuan Bisnis : Chapter 07 - Style Pada Halaman Web

By

 Style Pada Halaman Web



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.


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 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.


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.





Tidak ada komentar:

Posting Komentar