Tutorial Pembelajaran dari seorang ToPu yang ingin berbagi ilmu yang telah didapatkan selama hidup secara perlahan tapi bermanfaat bagi seluruh umat manusia.
Dapatkan Update Status Terbaru dari ToPu. Follow my twitter @tatopu

Tutorial CSS Lengkap Untuk Pemula

Setelah dasar dari pondasi dalam pembuatan web telah dikuasai, langkah selanjutnya adalah menghiasi dari pondasi yang telah dibangun dengan menggunakan CSS. CSS sendiri sampai sekarang sudah sampai pada CSS3. Untuk belajar lebih mudah dapat langsung dipelajari pada w3schools.com/css3/default.asp.

Dasar dari CSS sendiri sebenarnya sudah banyak sekali, namun tampilan yang dihasilkan syntaks - syntaks dari CSS lama masih belum menarik bagi para end-user atau pengunjung. Syntaks css secara umum dapat ditulis sebagai berikut:
<html>
<head>
<style type="text/css">
...isi css...
</style>
...isi halaman...
</body>
</html>

atau dapat langsung menuliskan style pada tag html-nya : <img src ="../images/contoh.gif" align="..." Padding,Border,Margin.... >
Nama Penulis: ToPu, Tanggal terbit: 10 Mei 2012
Didukung oleh: Tutorial Pembelajaran,
<a href="http://tutorial-pembelajaran.blogspot.com/">Tutorial Pembelajaran</a>
Apabila suatu style dari css akan dipergunakan untuk beberapa halaman, akan lebih tepat mendeklarasikan css tersebut ke dalam suatu file css terpisah dan baru dipanggil pada suatu halaman. Contoh yang paling sederhana adalah sebagai berikut:

Contoh kerangka kode berikut akan disimpan pada file.css

html {...}
body {...}
a {...}
.b {...}
.c {...}
#tujuan{...}
#header h1 a:visited{...}
a.page-numbers:hover {...}
div.content-bottom{...}
table th {...}
fieldset {...}
legend {...}
form {...}
p{...}
h1 {...}
div#nama li{...}
textarea {...}
input[type="..."] {...}
select {...}
label{...}
pre {...}
code {...}
blockquote {...}
ul {...}
li {...}

Untuk memanggilnya dengan menambahkan kode html seperti berikut <link rel="stylesheet" type="text/css" href="contoh.css" /> atau dapat juga dengan <style src="contoh.css" type="text/css" media="screen" />. Pada pemanggilan fungsi dari css terdapat 2 penulisan (class dan id) yang berbeda dengan fungsi yang berbeda pula. Pada suatu elemen dapat memakai lebih dari 1 class namun hanya dapat menggunakan satu id. Jika diambil contoh di atas maka pemanggilan dapat digunakan dengan cara sebagai berikut:


<p class="b c"></p> dan untuk penulisan id adalah <div id="header"> </div> atau lebih jelas lagi seperti pada penggunaan link <a href="#tujuan "/>. Jadi secara logika kita tidak dapat menggunakan class pada penggunaan link seperti contoh di atas. Atribut dari css pada dasarnya ada banyak sekali walaupun jumlahnya terhingga. Atribut untuk CSS dasar meliputi bagian, antara lain;
  • Background
  • Border
  • Classification
  • Dimension
  • Font
  • Generated Content
  • List and Marker
  • Margin
  • Outlines
  • Padding
  • Positioning
  • Table
  • Text

Sedangkan untuk CSS3 akan ada lebih banyak lagi tambahan atribut dari CSS dasar sehingga akan lebih mudah dipelajari dari kasus - kasus tertentu yang akan diberikan pada topik pembahasan studi kasus tentunya masih di Tutorial Pembelajaran.

Ingin mendapatkan artikel seperti ini? Silahkan masukkan alamat email Anda untuk berlangganan.

Privacy guaranteed. We'll never share your info.

Bookmark and Share


Artikel yang berhubungan :

13 komentar:

vmediakom mengatakan...

iya nih sekarang zamannya CSS3 ya, belajar web/blog desain menyenangkan. :)

Fahri Samudra mengatakan...

Waduh, ane izin nyimak dulu deh, trus ane izin bookmark, ane harus banyak belajar tentang css nih, ane aja nggak mudeng bacanya, hehehe, apalagi mau ke css3, sob, ajarin ane ya, hehehe

Icahbanjarmasin mengatakan...

Wahhh..mantef tuh kang ToPu tutornya...heeee

Aldio mengatakan...

wah makasih sob untuk css-nya, sangat bermanfaat

Fahmi Setiawan mengatakan...

wih tutornya mantapp, ajarin dong master,,

Ahmad Rizal Samsi mengatakan...

tutor yg bagus..
blogwalking

NF mengatakan...

kunjungan balik... waah ini apaan ya, langsung pusing @_@ hehe

Popi mengatakan...

bulan lalu saya ikut pelatihan bikin website. dan didalamnya banyak kode2 kayak gitu. Waduh...pusingnya minta ampun. Ga bakat kali ya?

Asis Sugianto mengatakan...

kebetulan saya pemulah sobat jadi sangat cocok untuk tutorial Css ini sobat..

terima kaish banyak yach sudah di share sobat...

Belajar Komputer mengatakan...

Salam sobat, mantap nih buat pemula yang ingin belajar style dngan css

cah_kesesi_ayutea mengatakan...

asyiiikkk.... thanks yaa.

jadi tauuuuuuu :))

kunjungan perdANA,,,

Tonny Mondong mengatakan...

Sambil garuk kepala*...pusing bang :D...tutornya lengkap tapi masih bingung juga :)

Info Gadget mengatakan...

weh info menarik sob
sebenrnya pengen belajar CSS nih,,, tapi gak ada tutornya

Kritik dan saran silahkan sampaikan di sini atau di situ
Posting Selanjutnya Posting Sebelumnya Beranda

Kolom Komunitas