Cascading
Style Sheet
1. Pengertian
CSS atau Cascading Style Sheet CSS (Cascading Style
Sheets) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan atau membuat layout suatu
halaman web menjadi lebih menarik dan mudah
dikelola.
2. Karakter CSS
Ø Di
dalamnya terdapat banyak style.
Ø CSS
dapat dituliskan pada bagian <body>, <head> suatu
dokumen HTML atau diletakkan di sebuah file eksternal.
Ø Perintah-perintah
CSS dibatasi oleh tag <style> dan </style>
3. Contoh Penerapan
CSS
A. Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan
dengan menambahkan atribut style=”…” . Dalam tag HTML tersebut, style hanya
akan berlaku pada tag yang bersangkutan dan tidak akan mempengaruhi tag HTML
yang lain.
Contoh Penulisan CSS dengan metode inline style sheet :
Maka hasilnya :
B. Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style>…</style> di atas tag <body>. Pada pendefisinian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan. Contoh pengunaan CSS dengan metode Embedded Style Sheet :
Maka hasilnya :
C. Linked Style Sheet
Metode ini hampir sama dengan metode Embedded Style Sheet, hanya saja pendefinisian tag <style>…</style> dibuat pada berkas terpisah dari berkas HTML yang membutuhkan CSS. Kemudian berkas lain tersebut disimpan didalam format CSS. Pada berkas HTML yang akan menggunakan berkas CSS harus dibuat tag <link> yang dituliskan diantara tag <head>…</head>.
Metode ini hampir sama dengan metode Embedded Style Sheet, hanya saja pendefinisian tag <style>…</style> dibuat pada berkas terpisah dari berkas HTML yang membutuhkan CSS. Kemudian berkas lain tersebut disimpan didalam format CSS. Pada berkas HTML yang akan menggunakan berkas CSS harus dibuat tag <link> yang dituliskan diantara tag <head>…</head>.
Contohnya adalah sebagai
berikut :
Ø Simpan file ini dengan nama
“contoh.css”.
Ø Kemudian Simpan file ini dengan nama
“link.html”. Masukkan kedua file tersebut kedalam sebuah folder, lalu panggil
file “link.html” tersebut.
Maka Hasilnya :
Ø Ini adalah tampilan awal setelah anda
memmanggil link.html tersebut.
Ø Kemudian arahkan mouse anda pada kata
home tersebut, dan lihatlah perbedaannya.
