HTMLCSSGuides.com

Belajar CSS

/* */

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

No Related Post Found.

Post a comment

Name (required)

Mail (will not be published) (required)

Spam protection (required). Sum of: 4 + 6 = ?

Website

33 Responses to “Belajar CSS”

  1. dani says:

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

  2. Masim man says:

    Yup benar sekali, disamping lebih ringan dalam pengeditan pun jauh lebih gampang dan cepat. :)

  3. singgih says:

    terima kasih banyak

    lagi belajar dasar css

    useful sekali

  4. wahyu says:

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

  5. cahya says:

    aku pingin sekali lebih paham

  6. kurniawan says:

    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!

  7. Dani says:

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

  8. putu says:

    makasi..

    akan saya coba

  9. carita says:

    gampangan css atau joomla sich, kalau mau bikin website ?

  10. Masim man says:

    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.

  11. Yoss P says:

    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?

  12. – 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

  13. Masih bingung, tapi membuat tertarik.

  14. Agis says:

    thx n gud luck 4 u !

  15. […] Link ini akan membawa anda ke halaman belajar css. […]

  16. […] � Belajar CSS […]

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

  18. waOne says:

    Sangat membantu….

  19. […] catatan anda harus tau nama halaman tujuan tersebut–><a href=”http://htmlcssguides.com/belajar-css/“>Link ini</a> akan membawa anda ke halaman belajar […]

  20. […] Link ini akan membawa anda ke halaman belajar css. […]

  21. raindra says:

    makasih kang atas postingannya tapi kalau gini saya binggung

    /* CSS HOMEPAGE */

    <!–<div–>

  22. raindra says:

    loh ko ga ada yah

    /* CSS HOMEPAGE */

    <!–<div–>

  23. zarnadi says:

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

  24. idjogja says:

    best Regards,

    4U :)

  25. haduuh,

    masih baru nih

    harus banyak belajar

  26. hakim says:

    asyik juga blj ini yaa

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

  28. great post. Thanks..

  29. hasan says:

    yg saya tahu kalo mau pasang css ada 3 cara,,,

    tolong dijelaskan mas ua cara lainnya.

  30. Ghazali says:

    thank atas cssnya

  31. Sapto Jezz says:

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

  32. […] Link ini akan membawa anda ke halaman belajar css. […]



var _gaq = _gaq || [];
_gaq.push([‘_setAccount’, ‘UA-4596370-4’]);
_gaq.push([‘_trackPageview’]);
(function() {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl&#8217; : ‘http://www&#8217;) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s