PENERAPAN
STYLING CSS
Oleh : Aldin Nur Adzin
Apa Itu CSS?
CSS adalah bahasa Cascading Style Sheet dan biasanya
digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup,
seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di
situs.
HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan.
Cara Kerja CSS?
CSS menggunakan bahasa Inggris sederhana berbasis syntax yang
dilengkapi dengan sekumpulan rule yang mengaturnya. Seperti
yang telah kami sebutkan sebelumnya, HTML tidak dibuat untuk menerapkan
elemen style, hanya markup halaman saja. HTML dirancang semata-mata
untuk mendeskripsikan konten. Sebagai contoh: <p>This is a
paragraph.</p>.
Satu yang menjadi pertanyaannya sekarang, bagaimana
caranya style paragraf? Struktur syntax CSS cukup sederhana.
Struktur ini memiliki selector dan declaration block.
Pilih elemen yang diinginkan, kemudian deklarasi (declare) yang
harus Anda lakukan terhadap elemen tersebut. Sangat mudah, kan?
Ada berbagai rule yang
harus diingat. Meskipun demikian, rule struktur cukup simpel
dan sederhana.
Selector mengarah ke elemen HTML yang
ingin Anda ubah tampilannya. Declaration block memuat satu
atau lebih banyak deklarasi (declaration) yang dipisahkan dengan tanda
titik koma.
Setiap deklarasi menyertakan nama dan
value dari properti CSS, yang dipisahkan dengan tanda koma. Umumnya deklarasi
CSS diakhiri dengan tanda titik koma, sedangkan declaration block dikelilingi
oleh tanda kurung kurawal.
Penerapan CSS
Terdapat 3 cara menerapkan kode styling pada CSS ke dalam HTML yaitu sebagai berikut:
1.
External
CSS
Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan
akhiran “.css” atau ekstensi “.css”. Anda lalu perlu memanggil file CSS itu ke
dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu
memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi
ada dua langkah dalam pengimplementasian CSS dengan cara ini.
Contoh:
·
Anda
membuat satu file dengan notepad atau teks editor lain, dan beri nama,
contohnya: style.css, lalu tuliskan kode-kode css di dalam file itu.
body
{ font-family : arial; font-size: small; }
h1
{ color : red; }
Beberapa contoh kodingannya seperti berikut.
·
Langkah
kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan
kode di bawah ini, di antara tag <head> dan </head>
<head> <link rel=”stylesheet” href=”style.css”> </head>
2. Embedded Styling
Kita bisa menempelkan kode CSS di
antara tag <head> & </head>. Penulisan CSS dengan cara ini awalnya
diawali dengan tag <style>—-</style>.
Contoh :
<head>
<style
type=”text/css”>
h1 {color
: red;}
</style>
</head>
Contoh penerapan kodingannya sebagai berikut
3. Inline
Styling
Kode CSS di tulis langsung ke dalam tag HTML yang ingin di format.
Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS. Cara ini
sebaknya hanya di gunakan jika anda mau memformat suatu elemen sekali saja.
Contoh:
<h1 style="color: red;">
H1 dengan
CSS
</h1>
Pada contoh si atas, elemen <h1> di format agar tulisannya menggunakan warna merah, elemen lain, tidak akan menggunakan warna merah karena format ini hanya berlaku pada elemen paragraf yang di tentukan kode CSSnya. Penulisan CSS dengan cara ini mulai dengan kata “style = lalu di ikuti dengan syntax Property:value;”. Berikut contoh penerapan kodenya.
Dari Semua Penerapan Styling CSS di atas, memiliki hasil yang sama atau memberikan penampilan yang sama. Hanya saja dengan menggunakan penerpaan styling CSS yang berbeda sehingga terdapat kekurangan dan kelebihan penerapan styling CSS yang digunakan dalam melakukan styling. Berikut hasil penampilan pada website-nya.
Comments
Post a Comment