May 16th, 2005
Entah, saya bingung, sudah mencoba menulis, tapi tetap saja, tulisan yang saya buat masih buntu. Jadi, untuk mengisi kekosongan ini, ada baiknya saya mencoba membuat tutorial lagi yang dulu pernah saya tulis secara berturut-turut.
Pembahasan kali ini, adalah bagaimana CSS dideklarasikan dan digunakan dalam sebuah dokumen XHTML. Kiranya, tulisan ini adalah sebuah tutorial yang sumbernya adalah saya, ya, hanya seorang saya, jadi tak masalah jika ada pengkoreksian didalam tulisan ini semua. Bahkan, saya justru menantikan kritikannya.
Bagaimana menuliskan CSS dalam sebuah elemen.
Ada 3 cara untuk menuliskan kode CSS dalam sebuah halaman. Inline style, document-level style, dan external style sheet. Anda bisa menggunakan salah satu dari cara tersebut, atau bahkan, ketiganya bisa digunakan sekaligus.
Inline style
Penggunaan seperti ini sangat boros sekali, memperbesar ukuran file, juga melelahkan sekali jika hanya menggunakan cara ini. Contoh penggunaannya adalah sebagai berikut:
<div style=”font:11px Verdana,Arial,Sans-serif;text-align:center”>
contoh inline style
</div>
Fungsi dari inline style sendiri dimaksudkan untuk menunjuk sebuah atau beberapa elemen yang sangat berbeda dari yang lain. Ingat, sebuah atau beberapa elemen, bukan semua elemen.
Document-level style
Dibandingkan dengan penggunaan inline style, cara ini bisa lebih jelas dilihat jika anda menuliskan daftar kode CSS didalam tag <style>. Penggunaan Document-level style berarti anda membuat sebuah elemen HTML bersifat global.
Sebagai contoh, sebuah tag <p> akan didefinisikan berwarna biru, dan mempunyai tulisan yang tebal dalam sebuah halaman. Anda tinggal menuliskan tag <style> didalam tag <head>. Ini berarti semua tag <p> yang berada dalam dokumen tersebut, akan mengikuti aturan yang ditetapkan kode CSS. Berikut kodenya :
<html>
<head>
<title>test</title>
<style type=”text/css”>
p { color:#0000FF;font-weight:bold; }
</style>
</head>
<body>
<p>Ini judul</p>
<p>Loh, ini cuma tulisan</p>
</body>
</html>
External Style sheet
Penggunaan file lain lebih ditekankan pada cara ini. Keuntungan dari cara ini adalah, halaman utama yang lebih kecil, mudah memodifikasi, seperti mengganti tampilan. Kerugiannya, saya pikir hanya dipandang dari adanya file lain yang harus diload ketika sebuah dokumen ditampilkan. Untuk hal ini, rasanya tak perlu khawatir, karena file CSS adalah file teks biasa, yang mempunyai ukuran yang kecil.
Cara ini, bisa dilakukan dengan 2 cara. Dan sampai saat ini, saya masih belum menemukan perbedaan antar kedua cara tersebut. Harap maklum :D. Cara pertama adalah dengan menaruh tag <link>, dan langsung menuju file CSS yang sudah ditulis.
<head>
<title>Style linked</title>
<link rel=stylesheet type=”text/css”
href=”http://www.kumquats.com/styles/gen_styles.css” />
</head>
<body>
<h1>I’m so bluuuuoooo!</h1>
…
<h1> I am ba-loooooo, tooooo!<h1>
Cara lain adalah dengan menggunakan kata kunci import. Berikut cara yang bisa ditulis.
<head>
<title>Imported style sheet</title>
<style type=”text/css”>
@import url(http://www.kumquats.com/styles/gen_styles.css);
@import “http://www.kumquats.com/styles/spec_styles.css”;
body {background: url(“backgrounds/marble.gif”)}
</style>
</head>
Nah, kira-kira ini dulu yang bisa saya tulis. Kritik dan saran saya terima dengan senang hati. Kelanjutannya, akan terus saya tulis diblog ini. Doakan saja.
Maaf jika tutorial singkat ini masih terlalu singkat. Karena memang, tak ada lagi yang bisa saya tulis. Untuk meneruskannya, saya pikir terlalu panjang nantinya. Maka dari itu, lebih baik bersambung saja. :D
23 Responses
hehehe yup I knew this part :)
ga ngerti gw dats, gw kan bukan anak TI. heuheuheue
asik …. kursus gratisan ….
:)
Om Didat yang baek hati,
Apa bedanya XHTML dengan HTML ?
tambahan: style external dioverride style yang di-embed di header, style di header diembed style yang di parameter style.
perbedaan @import dan link: @import gak akan diparse oleh netscape 4.xx, dulu teknik ini sering dipake buat mengexclude netscape 4.xx dari CSS karena hasilnya dijamin berantakan :) tapi jaman sekarang sih mendingan pake link, karena udah hampir gak ada yang pake netscape 4 & secara semantik lebih benar.
for beginner yah dats? *bhuahahahahahahahah si echa! kaya yang sendirinya expert ajah hahahahhahah *
CSS yang tab-barnya dikiri vertical with image dong! Request! *bukan yang spt diatas, spt diatas tapi berdiri, nggak tiduran tuh gimana? :D :D :D )
btw, si dia baca blog juga ya? Sorry yah abis gak tau :D
Sip sip…. ditambah yaa… yang agak Advance dikit gitu loh ;)
hayooo, dicontoh ada tag yg belom ditutup :D
sejauh ini mengerti.. lanjutkan dats!! :)
priyadi: wah, itu toh bedanya… okeh.. makasih ya mas… :D
bahtiar: mas, blognya banyak banget ya?
bedanya HTML dan XHTML menurut saya hanya terletak dari cara penulisannya.
XHTML adalah gabungan antara XML dan HTML, yang lebih mengedepankan tag yang bersih. Yaitu, semua tag tertutup. Dan lebih mengandalkan CSS dalam membuat layout. Sedangkan HTML, dia sudah punya tag table dan font. jadi, CSS hanya jadi pelengkap saja untuk HTML.
echa: saya ndak ngerti maksudnya. tab-bar itu apa ya?
iya, dia memang suka baca. saya tau itu… :D
eh, ada yg lupa….
gani: he..he.. iya sih… tapi saya pikir,
itu kan cuma contoh… jadi mungkin tak terlalu jadi masalah… :D :P
Makasih udah ngajarkan css
tapi saya masih tidak ngerti…
gimana???
pengen belajar soal css dan kawan-kawannya. tapi emang jelimet, ya…:)
mas gimana ya caranya biar tulisan yang ada linknya ga bergaris?????
mas aku baru bwt fs ni gimana cara membuat css ya ???
saya ga bisa ni !!!
tolong dibantu ya mas
thank’s
tutorial taeeeeeeeeeeeeeeee!!!!! kelaut aja…anak Tk juga tau buat kayak gitu…..
om tambahin donk tutornya kalau bisa yg php ma java
hehe lumayan nambah elmu , allna saya blajar pk internet hehe pusyingg klo baca tutor english ..
maaf, ni q br knl CSS n kl bs tutorialx lbh mendasar lagi mengenai struktur css dari awal (skripx)
[FREAX]
mas gimana caranya buat intro web pada wordpress
mas.. mas…
leh minta tolong gak…??
minta ym ada gak…
mau banyak tanya neh??
Terimakasih tutorialnya, ingin edit web css sulit juga ya kalo belum tahu :)
Wah ini nich, buat belajar CSS… trims yakz…
Mulai belajar lagi ah…
Assalamualaikum…
butuh pencerahan ni..
masih agak bingung dengan pengertian dari CSS itu sendiri??
bisa dijelasin dgn bahasa yg mudah dipahami nda???
btw postingannya bagus bgt mas,,,;p