Mari Belajar CSS (Cascading Style Sheet)
Assalamu'alaikum Wr.Wb
Salam sejahtera bagi semua rekan-rekan pengunjung Blog,pada kesempatan ini saya akan menulis artikel yang berkaitan tentang CSS (Cascading Style Sheet).Saya berharap artikel ini bermanfaat bagi semua yang membacanya.Langsung saja kalian bisa membacanya dibawah !!! Cekidot ..........
Pengertian
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 berkas (file). Pada umumnya CSS
dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan
XHTML.
CSS dapat mengendalikan ukuran gambar,
warna bagian tubuh pada 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.[1] CSS adalah bahasa style
sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS
memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
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.
Penulisan
Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut:
H1 {
COLOR: #0789DE;
}
COLOR: #0789DE;
}
Bagian pertama sebelum tanda ‘{}’ dinamakan selector, sedangkan yang diapit
oleh ‘{}’ disebut declaration yang terdiri dari dua unsur, yaitu property dan
value. Selector dalam pernyataan di atas adalah h1, sedangkan color adalah
property, dan #0789de adalah value.
Selain itu ada tiga metode penulisan CSS atribut, yaitu :
·
Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara
penulisannya cukup 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 :
Contoh penulisan CSS dengan metode Inline Style Sheet :
<html>
<head>
<title>Contoh Bentuk Inline</title>
</head>
<body bgcolor=”#FFFFFF”>
<p id=”cth1?>
Ini adalah contoh tag P tanpadiformat menggunakan CSS </p>
<p id=”cth2? style=”font-size:20pt”>
Tag P ini diformat dengan besar font 20 point </p>
<p id=”cth3? style=”font-size:14pt; color:red”>
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
</body>
</html>
<head>
<title>Contoh Bentuk Inline</title>
</head>
<body bgcolor=”#FFFFFF”>
<p id=”cth1?>
Ini adalah contoh tag P tanpadiformat menggunakan CSS </p>
<p id=”cth2? style=”font-size:20pt”>
Tag P ini diformat dengan besar font 20 point </p>
<p id=”cth3? style=”font-size:14pt; color:red”>
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
</body>
</html>
·
Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style> … </style>
di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS
yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh
tag HTML yang bersangkutan.
Contoh penggunaan CSS dengan metode Embedded Style Sheet :
<html>
<head>
<title>Contoh Bentuk Embedded/title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
<head>
<title>Contoh Bentuk Embedded/title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
<body>
<h1 id=”cth1?>Judul ini berukuran 18 dengan warna merah!</h1>
<p id=”cth2?>Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p id=”cth3?>Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html>
<h1 id=”cth1?>Judul ini berukuran 18 dengan warna merah!</h1>
<p id=”cth2?>Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p id=”cth3?>Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html>
·
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
dalam format .css.
Pada berkas HTML yang akan menggunakan berkas CSS, harus dibuat tag
<link> yang dituliskan di antara tag <head> … </head>.
Contoh (simpan dengan nama contoh.css) :
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
Sifat CSS
Ada dua sifat CSS yaitu internal dan
eksternal. Jika internal yang dipilih, maka skrip itu dimasukkan secara
langsung ke halaman website yang akan didesain. Kalau halaman web yang lain
akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi
ke dalam halaman web yang lain itu.
Sifat yang kedua adalah eksternal di mana
skrip CSS dipisahkan dan diletakkan dalam berkas khusus. Nanti, cukup gunakan
semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat
seperti model yang ada di skrip tersebut.
Fakta Menggunakan CSS
Fakta Menggunakan CSS diantaranya :
- Telah didukung
oleh kebanyakan browser versi terbaru, tetapi tidak didukung oleh
browser-browser lama.
- Lebih fleksibel
dalam penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index
untuk menempatkan objek dalam posisi yang sama.
- Menjaga HTML dalam
penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran berkas
dan kecepatan pengunduhan.
- Dapat menampilkan
konten utama terlebih dahulu, sementara gambar dapat ditampilkan
sesudahnya.
- Penerjemahan CSS
setiap browser berbeda, tata letak akan berubah jika dilihat di berbagai
browser
- CSS adalah layouting "Masa Depan" dengan penggabungan bersama XHTML.
Keuntungan
Penggunaan CSS
Jika anda memiliki
beberapa halaman website dimana anda menggunakan font arial untuk
tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet,
anda harus merubah satu per satu halaman website anda dan merubah tipe font
dari arial menjadi trebuchet.
Dengan menggunakan css, dimana semua
halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk
merubah font di semua halaman web dari arial ke trebuchet.
Jadi, keuntungan menggunakan CSS yaitu, lebih
praktis pemirsa !!!
Kekurangan
Penggunaan CSS
Tidak semua browser
mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web
dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang
lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser
dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar
tampilan web anda terlihat baik di semua browser.
Daftar Kepustkaan
Terima kasih , semoga artikel ini bermanfaat,dan Admin
berharap setelah pengunjung berkunjung ke Blog ini , Admin meminta agar
pengunjung meninggalkan komentar nya mengenai Blog ini.
Tunggu artikel-artikel lainnya dari Blog ini .Stay
terus di Blog saya Pemirsa :D
Wassalamu’alaikum Wr.Wb
Mengenal CSS (Cascading Style Sheet)
Reviewed by Diky Setiadi
on
19.37
Rating:
Reviewed by Diky Setiadi
on
19.37
Rating:
Tidak ada komentar: