Belajar CSS

CSS adalah singkatan dari Cascading Style Sheets, yang berfungsi untuk mengontrol tampilan dari sebuah halaman website.

Ada 3 cara untuk memasukkan CSS ke dalam dokumen HTML yaitu:

1. Dengan menambahkan langsung di tag dokumen html, sebagai contoh:

<p style="color:blue">Membuat tulisan warna biru</p>
<p style="font-family:arial;font-size:150%;color:green">Membuat jenis font, ukuran dan warna</p>
<p style="color:yellow;background-color:red;width:60px;text-align: center">Test</p>
<p style="font-style:italic;">Membuat tulisan miring</p>

Maka hasil dari style diatas adalah sebagai berikut:

Membuat tulisan warna biru

Membuat jenis font, ukuran dan warna

Test

Membuat tulisan miring

2. Dengan menaruhnya di dalam header dokumen html.

Sebagai contoh kita akan membuat CSS untuk mengontrol tampilan paragraf di dokumen html, cara penulisannya adalah sebagai berikut:

<style>
<!--
p { color:green;font-family:arial;font-size:120%;}
-->
</style>

Kemudian kita masukkan style tersebut di antara tag <head> dan </head> :

<html>
<head>
<style>
<!--
p { color:green;font-family:arial;font-size:120%;}
-->
</style>
</head>
<body>
<p>Saat ini saya sedang belajar CSS</p>
<p>Pengaturan paragraf dengan menggunakan CSS di dalam header dokumen html</p>
<p>Dengan contoh ini, maka setiap paragraf atau yang berada diantara <p>dan</p>akan memiliki format yang sama</p>
</body>
</html>

Preview

3. Kemudian yang ketiga adalah dengan membuat file CSS tersendiri yang tespisah dari dokumen html, secara umum yang terakhir ini adalah yang paling sering digunakan. Untuk menghubungkan dokumen html dengan CSS tersebut kita cukup menambahakan yang berikut ini di header dokumen html:

<link rel="stylesheet" href="style.css" type="text/css">

Sehingga di dokumen html akan terlihat seperti berikut ini:

<html>
<head>
<title>Titel websiteku</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
</body>
</html>

Untuk mengetahui lebih lanjut tentang bagaimana CSS mengontrol sebuah halaman website, berikut kita akan membuat sebuah halaman website sederhana yang menggunakan CSS.

Buka Notepad kemudian salin kode berikut, dan simpan file tersebut dengan nama “csstest.html”

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel websiteku</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="halaman"><!-- div id halaman dimulai -->
<div id="judul"><!-- div id judul dimulai -->
<h1 class="judul">Disini judul websiteku</h1>
<h2 class="sub-judul">Disini sub-judul websiteku</h2>
</div><!-- div id judul berakhir -->
<div id="konten"><!-- div id konten dimulai -->
<div class="kiri"><!-- div class kiri dimulai -->
<p>Disini navigasi bagian kiri</p>
</div><!-- div class kiri berakhir -->
<div class="tengah"><!-- div class tengah dimulai -->
<p>Disini konten websiteku</p>
</div><!-- div class tengah berakhir -->
<div class="kanan"><!-- div class kanan dimulai -->
<p>Disini navigasi bagian kanan</p>
</div><!-- div class kanan berakhir -->
</div><!-- div id konten berakhir -->
<div class="footer"><!-- div class footer dimulai -->
<p>Disini Footer websiteku</p>
</div><!-- div class footer berakhir -->
</div><!-- div id halaman berakhir -->
</body>
</html>

Preview

Yang berada diantara <–– dan ––> hanya sebagai keterangan agar lebih mudah dimengerti, anda bisa menghapusnya. Sekarang buka file tersebut dengan browser, maka kita akan melihat halaman yang polos dengan tulisan seadanya.

Sekarang salin CCS berikut kemudian simpan ke folder yang sama dengan “csstest.html” dengan nama “style.css”

#halaman {/* "id" dilambangkan dengan "#" */
width: 800px;
margin: 0 auto;/* agar dokumen berada ditengah */
padding: 0 auto;
}
#judul {
width: 100%;
height: 100px;
background: #5F9EA0;
margin: 0;/* pengaturan sisi bagian luar */
padding: 0;/* pengaturan sisi bagian dalam */
}
#konten {
width: 100%;
margin: 0;
padding: 0;
}
.kiri {/* "class" dilambangkan dengan "." */
width: 25%;
height: 300px;
float: left;
background: #ADD8E6;
}
.tengah{
width: 50%;
height: 300px;
float: left;
background: #FDF5E6;
}
.kanan{
width: 25%;
height: 300px;
float: right;
background: #ADD8E6;
}
.footer{
height: 40px;
background: #8FBC8F;
clear: both;
}
.judul {
color: Red;
padding: 10px 0 0 10px; /* penulisan untuk semua sisi: atas kanan bawah kiri */
}
.sub-judul {
color: #ff0;
padding: 0 10px 10px;
}
p {
padding-left: 10px;/* penulisan untuk satu sisi saja */
}

Yang berada diantara /* dan */ hanya sebagai keterangan agar lebih mudah dimengerti, anda bisa menghapusnya.

Sekarang buka file “csstest.html” dengan browser anda.

Preview

Itulah kira-kira secara dasar cara kerja dari CSS untuk mengontrol halaman website.

Untuk melakukan eksperimen lebih lanjut dan untuk mengetahui perintah-perintah CSS lainnya anda bisa mendownload CSS editor TopStyle Lite. Dengan program tersebut buka file CSS diatas kemudian lakukan perubahan-perubahan dan refresh browser untuk melihat hasilnya.

Be creative…

Posted on May 8th, 2008 in Belajar CSS by Masim man

Post a comment

49 Responses to “Belajar CSS”

  1. dani said:

    ktnya, kalo ngga make inline css, berkas x/html bs jd lbh hemat ya..

  2. singgih said:

    terima kasih banyak
    lagi belajar dasar css
    useful sekali

  3. wahyu said:

    Aku belum paham Mas…aku baru pemula…baru kenal css baru kemaren waktu download web tapi gak bisa buka…

  4. cahya said:

    aku pingin sekali lebih paham

  5. kurniawan said:

    jujur baru kali ini aku melihat website yang memberikan ilmunya dengan sangat terbuka. dengan saya sangat terbantu sekali dengan ini. mas, kalau bisa tambahin lagi dong ilmunya. terutama di rahasia kode-kode css. good luck for you!

  6. Dani said:

    Menarik,tapi rumit juga yah.jadi makin tertarik belajar nih.

  7. putu said:

    makasi..

    akan saya coba

  8. carita said:

    gampangan css atau joomla sich, kalau mau bikin website ?

    • Masim man said:

      Hello Carita,

      Joomla juga pake css :), kalo maksudnya gampangan mana mengelola HTML (Website statik) atau Joomla (CMS) maka jawabnya adalah CMS.

      Untuk membuat website paling tidak kita harus mengetahui dan mengerti dasar dari HTML dan CSS.

  9. Yoss P said:

    Sungguh luar biasa, saya sebagai pemula sangat tertarik dan pengen coba terussss, tapi satu hal yang agak aneh adalah, bahasa program antara HTML & CSS kan berbeda, tapi keduanya dapat dijalankan dengan enternet explorer, saya sebagai orang awam, pengen tau, bahasa program apa saja yang bisa diapaki untuk buat website?

  10. – uwh. .trima kasih mas! saya di sekolah juga diajarin css seperti ini, ya tapi saya masih pengen belajar dari luar, gak ngandelin sekolah terus. .biar bertambah aja ilmunya. .hehe! saya akan coba css yang externa seperti atas. .makasih mas

  11. Masih bingung, tapi membuat tertarik.

  12. Agis said:

    thx n gud luck 4 u !

  13. Pingback: MENGENAL HTML | shondong

  14. Pingback: Sinichireina Blog’s

  15. terimakasih yaa, tolong saya bikin menu html dalam header gimana caranya seperti home,profile,kontak sukses slalu yaa

  16. waOne said:

    Sangat membantu….

  17. Pingback: belajar HTML « teknik informatika D-3's blog

  18. Pingback: Belajar HTML « lombok hardcore

  19. zarnadi said:

    Makasih gan atas ilmunya….? mohon komentarnya ya diblog aku maklum masih baru

  20. idjogja said:

    best Regards,
    4U
    🙂

  21. haduuh,
    masih baru nih
    harus banyak belajar

  22. hakim said:

    asyik juga blj ini yaa

  23. 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.

  24. great post. Thanks..

  25. hasan said:

    yg saya tahu kalo mau pasang css ada 3 cara,,,
    tolong dijelaskan mas ua cara lainnya.

  26. Ghazali said:

    thank atas cssnya

  27. Sapto Jezz said:

    wooww…mulia sekali Anda…terima kasih banyak atas share ilmunya, saya jadi tertarik belajar buat website (lumayan buat pengetahuan anak2 saya). Good luck man…

  28. Pingback: Panduan Belajar HTML : test

  29. Pingback: HTMLCSSGuides.com | suchia

  30. Pingback: HTMLCSSGuides.c… | pramuka smk igasar pindad

  31. ghazali said:

    terima kasih atas tutorialnya

  32. Pingback: olewaeeahh

  33. Rubby Dian said:

    Thanks share nya gan.,,.

  34. deaf said:

    ilmu penting, bagus dan bermanfaat, makasih banget.

  35. Muanteb….
    Berkunjung Jugs Yach Ke Website Ku… 😀
    http://www.mixsus-space.net/index.php
    Tuh Tadi-nya Bukan index.php Tapi index.html
    Saya Ganti Aja html Menjadi php XP Di Tempat Hostingan 😀

  36. newbie said:

    makasih ya… berguna sekali buat saya. Baru mau belajar web aplikasi

  37. imam sopian said:

    makaih infonya , bermanfaat buat yang mau belajar css lebih lanjut mampir http://cyberbusinessinstitute.com/ terimakasih ..

  38. yang Doctype terus ada http nya itu fungsinya apa?
    di atas html

  39. wawan said:

    aku belajar dari web ini
    thanks

  40. Pingback: Belajar HTML « yusufkumbara

  41. Pingback: membuat html dengan notepad « cloud booster

  42. syafic said:

    terimakasich atas tutorialnya .semoga semakin jaya…..
    oh ya leh minta tolong …………kalau menurut mas blg ku ini kurang pa…….tolng bantu agar seperti punya mas………
    http://laksanacyber.blogspot.com/ ini link ya coba di buka,,,,,,,,,,,,komenya aku tunggu.

  43. Pingback: Belajar tentang penggunaan css | RuZLand's Site

  44. Widiantara said:

    Terima Kasih, ini sangat membantu belajar dasr html & css.
    Pengen lebih mendalami tutorial mastah.

  45. Tutorial yang sangat2 membantu, Izin menimba ilmunya gan…, ok…support u…!!! thanks banget…!

  46. zan said:

    makasih bro tutornya (y)

Back to top