Artikel CSS (Cascading Stylesheet)
- Home
- » CSS (Cascading Stylesheet)
- » Belajar CSS, bagaimana CSS dapat merubah tampilan website
- » CSS (Cascading Stylesheet)
Belajar CSS, bagaimana CSS dapat merubah tampilan website
Ditulis oleh Dhimas Ronggobramantyo
Kategori: CSS (Cascading Stylesheet)
Dibaca 17105 kali
Bayangkan jika anda memiliki website dengan 100 halaman. Bayangkan apabila anda ingin mengganti jenis huruf dari tiap website. Hal tersebut tentu saja sangat membuang waktu, tetapi jika anda menggunakan CSS untuk mendesain tampilan web, maka hal tersebut dapat dilakukan dengan mudah.
Pertama-tama kita kenalan dulu dengan CSS. CSS merupakan kependekan dari Cascading Style Sheet yang memungkinkan kita untuk mendesain (style) tampilan dokumen (terutama HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS). Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada dikumen HTML yang telah jadi.
Memasang CSS
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu: External Style Sheet (file CSS berbeda dari file HTML), Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML) dan Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan). Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja kita coba kode berikut ini:
Tanpa CSS:
<html>
<head>
<title>Belajar CSS</title>
</head>
<body>
<h1><font face="Verdana">Belajar CSS</font></h1>
</body>
</html>
Jika kita menggunakan Internal CSS, maka kodenya akan menjadi:
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
h1 { font-family: verdana; }
</style>
</head>
<body>
<h1>Belajar CSS</h1>
</body>
</html>
Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css dan isikan kode berikut:
h1 { font-family: verdana; }Sekarang untuk kode HTML tulislah kode berikut ini dan simpan dengan nama coba.html:
<html>
<head>
<title>Belajar CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Belajar CSS</h1>
</body>
</html>
Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link>
yang diletakkan diantara tag <head>. Pada contoh CSS selanjutnya kita menggunakan teknik
external CSS, jadi gunakan saja file style.css dan coba.html anda hanya perlu
mengubah isinya. Untuk file HTML anda gunakan coba.html dan ubah isinya pada
bagian <body> saja bagian yang didalam <head> tidak usah diapa-apakan.
CSS terdiri dari dua bagian utama yaitu: selector, dalam hal ini H1 dan
deklarasi yang berada diantara kurung kurawal {font-family: verdana}. Didalam
deklarasi juga terbagi menjadi dua bagian yaitu property dalam hal ini
font-family dan value dalam hal ini verdana. Dalam
contoh diatas hanya mengubah sebuah tag yaitu tag <h1> menjadi teks dimana jenis hurufnya menjadi verdana.
Kita dapat mengkombinasikan berbagai macam style menjadi satu. Kita akan segera
mempelajarinya.
Sekarang kita coba mengkombinasikan banyak style. Cobalah kode CSS berikut ini dan simpan dengan nama style.css:
.title {
font-size: 13px;
color: #6095d0;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
}
.thank {
font-size: 11px;
color: #000000;
font-family: Georgia, "Times New Roman", Times, serif;
}
p {
font-size: 12px;
color: #000000;
font-family: verdana;
}Sekarang tulis kode HTML ini dan simpan dengan nama coba.html:
<html>
<head>
<title>Belajar CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<font class="title">Halo dunia</font>
<p>Saya mau belajar CSS, ini kode CSS saya yang pertama</p>
<font class="thank">Terimakasih</font>
</body>
</html>
Hasil:

Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya saja. Bagaimana anda sudah paham kegunaan CSS.
CSS memiliki ratusan properties dan values, tentu saja saya tidak akan menerangkan semuanya, saya hanya akan menerangkan yang penting-penting saja.
Tidak semua browser dapat menampilkan jenis huruf yang kita
spesifikasikan didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu
jenis huruf agar browser mengenal jenis huruf yang digunakan. Anda dapat
menggunakan property font-family, yang mirip dengan tag <font>. Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu Times New Roman.
Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga
jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font
yang umum. Untuk lebih jelasnya lihat bkode berikut:
<h1 style="font-family: 'Times New Roman', Times, serif">Serif font</h1>
Jika anda ingin menampilkan jenis huruf sans-serif gunakan kode berikut:
body {Arial, Verdana, Geneva, Helvetica, sans-serif}Jika ingin menggunakan jenis huruf serif, gunakan kode berikut:
body {Times New Roman, Times, Georgia, serif}Untuk jenis huruf untuk kode program dapat anda gunakan kode berikut:
body {Courier New, Courier, monospace}Scrollbar
Dengan menggunakan CSS anda juga dapat mengubah warna pada
scrollbar yang terdapat dikanan browser. CSS memiliki 8 properties untuk
mengubah warna pada scrollbar yaitu: scrollbar-arrow-color, scrollbar-basecolor, scrollbar-face-color,
scrollbar-shadow-color, scrollbar-darkshadow-color, scrollbar-3dlight-color,
scrollbar-highlight-color dan scrollbartrack-color.
Properties-properties ini mengatur warna untuk setiap bagian dari scrollbar.

Coba kode berikut ini:
body {
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #8b98b7;
scrollbar-shadow-color: #8b98b7;
scrollbar-3dlight-color: #8b98b7;
scrollbar-arrow-color: #8b98b7;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #8b98b7;
scrollbar-base-color: #ffffff;
}Link
Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link, menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna biru tua terang dengan garis bawah anda dapat mengubahnya.
Coba kode CSS berikut:
a.link1:link {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:visited {
font-weight: bold;
font-size: 12px;
color: #CC6600;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:hover {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: underline
}
a.link1:active {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link2:link {
font-weight: bold;
font-size: 12px;
color: #663300;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}
a.link2:visited {
font-weight: bold;
font-size: 12px;
color: #800000;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
a.link2:hover {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline overline;
}
a.link2:active {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}Sekarang untuk kode HTML nya cobalah seperti ini:
Kunjungi <a href="http://www.dhimasronggobramantyo.com" class="link1">dhimasronggobramantyo.com</a> atau
<a href="http://www.google.com" class="link2">google.com </a>
Maka akan menghasilkan:
Kunjungi dhimasronggobramantyo.com atau google.com
Pada umumnya warna link untuk halaman web yang telah dikunjungi berbeda dengan yang belum dikunjungi. CSS dapat membedakannya dengan yang disebut pseudo-class ':link', ':hover', ':active' dan ':visited' untuk membedakannya:
:linkpseudo-class merupakan link yang belum dikunjungi.:visitedpseudo-class merupakan link yang telah dikunjungi.:hoverpseudo-class applies merupakan link apabila pointer mouse melewati sebuah link.
Itulah semua dasar CSS, semakin dalam anda mempelajari CSS maka anda akan menemukan hal-hal menarik lainnya. Selamat mencoba.
Komentar [73]
Nice tutorial... trims...
ok !
trims,boleh juga dicuba
lumayan atas tipsnya walau cuma sedikit yang didapat,sbnrnya banyak yang kurang tapi ga masalah mungkin bisa cari di tempat lain
wah.. bagus banget.. bisa kirim ke email ngak?
keren euy,,,
mas aku ingin mengubah source code ke css, gmn caranya?
aku dapat code mp3 player trus ngubah ke css gmn?
mas tutoraialnya bagus bgt...aq lg mau pelajarin CSS Dan Java Script Aq Minta tolong dong mas.....aq minta tutorial CSS dan Java Script...please ya mas....aq Mohon soalnya klo beli buku ga ad yg dr dasar bgt....please ya mas....
aku tunggu Tutorialnya ya mas.....
Anggi_Syach@yahoo.com
sebenarnya ini yg aku cari2 dari td..cara menghilangkan underline di link, akhir
thank's banget artikelnya, maju terus web2 master indonesia
ga ngerti..mas.. *_* he..he..
wah sip tenan, thax
pusing juga...
gmana scc bisa nampilin background .jpg nich...
Nice tutorial
to alam
Pake background: url(gambar.jpg);
mas aq nggak ngerti tag dasar css nya mbuleeeet??????????
hei kasih tau donk caranya buat css yang bagus banget. nih aq bener-bener bingung!!!
your tag is very confusing me. can you explain easier?????
hi are you crazy i dont understand with tour tag
terlalu mbulet puol , ora iso di ngerteni blas-blasso!!!!!!!!!. . ORA ONO SING RODO GAMPANG TA??????
ka, ada ga sih cara membuat website? Tapi, gratis..
hehehe...............
kasih tau donks..
klo mo source kode'n jln d mozila ma IE gmn y?????
pake HTML bukan CSS??????
boleh juga nih saya coba.
klo ada yang lebih lengkap boleh donk kirimin ke email saya misi8489@gamil.com
soalnya saya butuh banget nih sekarang, sebelumnya terima kasih
numpang save as
makasih......
semoga makin sukses...
sumpah...tutorialnya ngebantu bgt!!!
semoga tutorial ini menjadi amal bagi pembuatnya...
dan mudah - mudahan sich di tambahin lagi ...
Hhe*
^_^
thank's
wah... bagus nih tulisannya, bisa donk aku save... :-)
mas, tutorialnya bagus banget, tolong kirimin tutorialnya dong mas... please di kirim ke e-mail aq saja please mas buat PW (project work) buat presentasi yah mas please.... fier_man09@yahoo.co.id
Buat orang yang lg belajar web ini sangat membantu bgt, terima kasih & ditunggu artikel-artikel lainnya.
Ehmm...
Ntu CSS kita Buatnya dimana?
Dreamweaver kah?
ato dimana?
Kan untuk CSS Eksternal qt harus buat dua
trus gimana tuh manggilnya(link maksudnya)?
Ato Ntu Secara Otomatis bisa Manggil
maturnuhun,trs bgm klo merupa menjadi dua bahasa.msl b.indonesia dan b.inggris
ini klo buat site tpi tampilan depan kosong yang ada cuma enter,,terus klo enter di klik baru masuk ke site kita yang sbenar a,,kayak blog lhoe....klo blog buat gtu bisa g..pakek css...di kasih tau donk cara a...
ini klo buat site tpi tampilan depan kosong yang ada cuma enter,,terus klo enter di klik baru masuk ke site kita yang sbenar a,,kayak blog lhoe....klo blog buat gtu bisa g..pakek css...di kasih tau donk cara a...
DI BALS KE ..subs_safan@yahoo.com ya...........pleseeeeee
mas, kalo mau pake background musik di halaman index gimana ???
makasih
bagaimana caranya membuat efek text warna pada link text
bagaimana caranya membuat efek text warna pada link text
Tutorial yang sangat membantu...
izin ngelink web nya mas...
buat aku yang mash newbie..
makasih, salam
http://eko-yuliandri.co.cc
wah infarmasi yang anda berikan memang menambah pengetahuan saya tntg program css thnk's bwngt
alo, bisa tolong gak? bagaiman berubah background yang kita mau,
cthny kita udah punya picture background
giman skripnya le.
thank
makasi bnyak ne informasinya..
klo buat penyimpanan file yang berisi file CSS td dimana? apakah kita harus menyatukannya menjadi 1 folder dengan yg HTML nya..?
soalnya ntar klo di pindah2in, kan harusnya file css nya harus ke bawa jg.. ntar kan di comp lain path-nya kan brbeda2...
satu lagi, gmn cara kita ngemasukkan or menjalankan flash (animasi) di dalam HTML...
Di balas ya mas... di tunggu..
thanx.. a lot..
nanya nih.... kapan waktunya kita make' selektor class dan id ?....... jelasin dunk bedanya.... maklum k21 masih cupu' nih....
ngelu aku coba nang kene ...
http://www.w3schools.com
visit Qie's site 2008 .....;-)
www.rifkimuhammad.0fees.net
"what u see is what u need"
mas numpang promo web saya yach......
Ada yg punya CSS GENERATOR, yg bisa di preview..kirim ke (beewee@ymail.com)
http://www.dhimasronggobramantyo.com/turing.php?sid=31e3841a51a0f47a1de2bbe34b46f0c0
jangkrek kok apik.......!
waduh.... thanks bangetatas ilmunya yo... smoga bermanfaat dunia n akhirat ok...?
Mass q mau nanya gimana kode PHP dlm membuat penomeran komentar dan menampilkan brpa banyak komentar yg di kirim ?
balas ke : triend_ss@yahoo.com
Mass q mau nanya gimana kode PHP dlm membuat penomeran komentar dan menampilkan brpa banyak komentar yg di kirim ?
balas ke : triend_ss@yahoo.com
Terima kasih banyak............!
Trim's Artikelnya
seep sep seep
makasih mas, tutorialnya sangat berguna
mas mau nanya
di menu kategory mas kan kalo mousenya
mengarah kesitu bisa muncu sub menunya
caranya biar kaya begitu gimana mas???
maklum cupu (^_^)
klo bisa kirimin ke emailku ya
freak_key20@yahoo.com
lumayan nih ilmunya dikit tapi bermanfaat jadi tahu apa itu hover . hi2222
nanya nich kayakmana belajar javascript ama VBscript
Kirim ya ke fachri_95taurus@yahoo.com
aku mau tanya dong, kalo css itu diterapin di friendster layout, paste di media box atau CSS layout sih?! terus javascript opening-nya apa? atao apa?! makasih. mohon jawabannya dengan cepat, ya.
satu lagi, perintah h1 gunanya untuk apa?
aku mau nanya dunk,,
klo coding scrollbar itu diletakkan di file css juga,,atau didalam file yang memuat scrollbar tsb
ada lagi nih,,
kira2 bentuk scrollbar itu bisa diubah ga?? kan bentuknya kotak saja,scrollbar face dirubah menjadi gambar bunga gt,,,
(^___^)
wogh..nice tutor man
waduh makasih banyak ne untuk artikelnya.
sangat membantu bagi newbie seperti saya
mao tanya klo di border biasanya ada shadownya itu gimana caranya mas???apa pake gambar atau pake css??? http://helmyinfo.blogspot.com
tutorial yang asik nih, makasih ya.
apakah css bisa dikawinkan dengan javascript, atau apakah antara javascript dengan css tidak bertabrakan. ?
bolehkahkah saya bertanya?
jika saya ingin buat tampilan backround tetapi dengan tampilan "video or *.gif / *.MPEG"
dan sekaligus dengan sound-nya, apakah bisa?
sekiranya anda tahu tolong beritahu, atau ada situs lain yang mempelajari hal tersebut...?
sebelumnya saya ucapkan terima kasih, saya tunggu jawabannya, di Pasundan_thanks@blog.co.id
pertama mengenal tentang css pada saat paparan. kami paparan dengan power point. tapi yang lain ada yang bagus, ternyata filenya berextention *.css saat itu kami jadi penasaran. buat mas dhimas atau temen-teman bisa bantu gak buat belajar dan memahami tentang css.
seneng banget ada artikel tentang html ,css, etc, walaupun msh agk bingung, maklum lg belajar
aSoy Geboy,,
wadow bingung ... @@
hehehe....
Lagi pengen nyoba-nyoba utak-atik web blog sendiri pake CSS...
ma kasih bwt ilmunya,,,bermanfaat bwt kita yg masih junior.
bagus banget untuk para newbe...
termasuk gue...
gw berharap ada yang kirim beberapa artikel css ini ke email gw di shimada@plasa.com, uamizcal@telkom.net
Harus dicoba tuch.
bagus banget nih tutorialnya, tapi saya masih bingung untuk merubah sidebar sama mainnya. mampir dong dan koreksi di www.main-tenan.blogspot.com
tolong kalau belajar cssnya di taruhkan contohnya langsung
aku lagi mau design blog aku krn kayanya rada lambat loadingnya... aku ada software css, tapi kog rada ruwet yoo...
boss... bantu dong advise blog aku http://www.sangmoneyholic.blogspot.com
kira-kira perlu rubah apa dan gimana formatnya ...
aku rencana mau nambah kolom category... biar bisa dipisah2 gitu.
f/b yooo
Mas mau nanya di code css apa bedanya dan finginys
misal
.text
#text