CSS - Blog Dosen UPGRIS
advertisement
CSS
(Cascading Stylesheet)
CSS
CSS atau Cascading Stylesheet, pertama kali
dikembangkan pada 1997 sebagai terobosan
yang memungkinkan para pengembang web
(web developers) untuk mengatur style (gaya
tampilan) halaman-halaman web dengan cepat,
mudah, dan efisien. Dalam hal ini, CSS dapat
melakukan dukungan terhadap HTML dalam
segi desainnya, karena konten atau isi sebuah
web dapat secara tegas dipisahkan dari
desainnya.
Pada prakteknya, CSS digunakan sebagai
pengumpulan sebuah blok perintah yang
sering dilakukan berulang-ulang sehingga
dapat mempercepat proses desain web itu
sendiri
Perbedaan antara HTML dan CSS
Tag-tag HTML pada awalnya digunakan untuk
mendefinisikan isi atau konten dari sebuah web.
Tag HTML <p>, misalnya, digunakan untuk
menyatakan paragrap, <h1> untuk menyatakan
heading, dan <table> untuk menyatakan tabel.
Sedangkan CSS lebih menitikberatkan pada
bagaimana konten-konten tersebut ditampilkan
oleh browser, termasuk bagaimana ukuran,
jenis, warna, dan tata-letak tag-tag HTML
tersebut terlihat.
So..
Taruhlah, web kita mempunyai artikel yang terdiri dari 5
heading. Kelima heading tersebut ingin diberi warna
hijau. Jika dituliskan dengan tag-tag HTML, kelima
heading tersebut akan tampak seperti berikut:
<h1><font color=”green”>Heading Satu</font></h1>
<h1><font color=”green”>Heading Dua</font></h1>
<h1><font color=”green”>Heading Tiga</font></h1>
<h1><font color=”green”>Heading
Empat</font></h1>
<h1><font color=”green”>Heading Lima</font></h1>
Dengan CSS, kita tidak perlu menuliskan tag
<font color=”green”>…</font> secara
berulang-ulang. Kelima heading dengan warna
hijau tersebut dapat dideklarasikan satu kali saja
dengan CSS menjadi h1 {color: green}.
Dengan demikian semua elemen HTML yang
menggunakan tag <h1>…</h1> akan berwarna
hijau.
Aturan Pengunaan CSS.
CSS secara umum disusun oleh tiga bagian yaitu, selector (elemen
yang akan didefinisikan), property (atribut yang akan diubah) dan
nilai sebagaimana berikut:
Selector {property: value}
Antara property dan nilai (vakue) dipisahkan dengan titik dua dan
ditulis di antara dua kurung kurawal { dan }.
Jika nilai berupa beberapa kata, gunakan tanda petik ganda:
p {font-family: “sans serif”}
Jika lebih dari satu property, pisahkan dengan titik-koma:
p {background: green; text-align: center; color: red; font-family:
“sans serif”;}
Example
p{
background: green;
text-align: center; color: red;
font-family: “sans serif”;
}
Cara Mengaplikasikan CSS pada
File HTML
Ada tiga cara yang bisa digunakan untuk
mengaplikasikan CSS pada file-file web.
INLINE
Inline. Cara ini dilakukan dengan menuliskan kode-kode
CSS satu per satu untuk setiap elemen HTML. Cara ini
sebenarnya tidak dianjurkan karena ukuran file web
akan lebih besar. Contoh penggunaanya adalah
<p style=”color: red; text-aign: left” >Paragrap ini
berwarna merah dengan rata kiri</p>
Penggunaan style dengan cara ini diawali dengan
menuliskan tag html diikuti dengan style, tanda sama
dengan = dan dua tanda kutip yang mengapit propertyproperty dan nilai-nilai.
Internal
Internal. Cara ini dilakukan dengan menyisipkan kode-kode CSS pada bagian <head> dan </head>. Kode-kode
CSS tersebut diawali dengan penulisan <style type=”text/css”> dan diakhiri dengan </style>
Penulisannya seperti ini:
<html>
<head>
<title>Contoh penggunaan CSS internal</title>
<style type=”text/css”>
p{
color: red;
}
a{
color: blue;
}
</style>
</head>
<body>
…
</body>
</html>
Contoh…
Output Browser
Eksternal
Eksternal. Cara ketiga ini yang paling sering
dilakukan dan dianjurkan. File CSS disimpan
secara terpisah dengan ekstensi “.css” (tanda
kutip untuk penjelasan). Cara ini dilakukan
dengan pertama-tama membuat sebuah file
CSS tersediri. Dalam file CSS tersebut kita
mendefinisikan dan mendeklarasikan semua
selector, property, dan value yang akan
diberlakukan untuk web kita, misalnya:
