Dasar kode CSS | Belajar CSS | Penjelasan CSS

       Sebelumnya aldi ingin memberi arahan kepada kalian yang ingin belajar CSS, di dalam proses pembelajaran css hal yang pertama harus kalian pahami atau setidaknya familiar  dengan yang namanya html,
jika kalian ingin belajar html silakan klik disini atau baca artikel-artikel yang berhubungan  dengan html .

      Css sendiri berfungsi untuk mendesain blog kalian agar nampak lebih indah dan berkualitas.selain itu css juga dapat meringkas kode-kode yang di gunakan pada template kalian .dan tentunya kalian pun akan sedikit menggunakan kode kode pada blog kalian .

Sebelum kalian lanjut untuk belajar CSS, silakan untuk berkenalan dulu yaa batting eyelashes ..


  • CSS adalah singkatan dari Cascading Style Sheets
  • CSS digunakan untuk mendesain tampilan dari html, jadi intinya jika kalian mau belajar css, belajar lah dulu html .
  • CSS  dapat digunkana untuk meringkas pekerjaan.
  • CSS mempunyai kode kode untuk mendesain tampilan html kalian ke bentuk yang berkualitas.  

Contoh singkat CSS


<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h2
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>

<body>

<h2>Contoh CSS</h2>
<p>Di sini letak tulisan kamu.</p>

</body>
</html>

Dan akan menghasilkan seperti di bawah ini :

Contoh CSS

Disini letak tulisan kamu

 
    Dari contoh di atas dapat di simpulkan bahwa kode - kode css tidak muncul kedalam tampilan.
jadi intinya css adalah pendukung styles dari html. mungkin di antara kalian masih ada yang belum paham yaa .
atau mungkin di antara kalian masih ada yang ngangguk ngangguk seolah - olah sudah paham ..
heheheheh .. namanya juga belajar pasti membutuhkan proses bukan ??? ..big hug
jadi jangan terlalu di bawa serius dan juga terlalu santai yaaa ... sersan  aja yaa ( serius tapi santai ) big grin

    Oke kita lanjut ke tahap selanjutnya .

Mungkin bagi kalian yang sudah terbiasa mengedit kode - kode html akan merasa aneh bukan ..
"untuk apa membuat kode sebanyak itu kalau hanya untuk membuat tampilan sesingkat itu ??? "
hemmm ... kalau di antara kalian ada yang berpikir seperti itu .. jawabannya adalah salah besar ..
loh kok salah besar ...!!!!
jadi begini .. dalam kode kode css di atas bisa kalian lihat bahwa body , h2 dan ,P ..mempunyai kode - kode yang berbeda .. nahhhh ternyata kode kode tersebut bisa juga di gunakan ataupun di masukan ke dalam  kode kode html yang lainnya untuk kalian desain sama seperti kode kode html yang telah kalian desain sebelumnya ..
gmana ??? masih belum ngerti .. aihhh kok ga ngerti ngerti sii ... pusing deh whew!..

" jadi intinya kode - kode css dapat di gunakan untuk banyak desain kode kode html .."


bagaimana ????? udah paham belumm ????
oke deh aldi asumsikan kalian sudah paham .. ayo lanjut ke tahap selanjutnya ...


penulisan kode css ( SYNTAX )
dalam penulisan kode css, itu BERBEDA dengan kode-kode html ... di dalam css terdapat selector dan declarations .. lihat gambar agar lebih jelas ..



contoh gambar itu aldi copet dari w3school ..hihihihihi , abis susah  nyari gambar yang serupa  tongue ..

dari contoh gambar di atas .. dapat di simpulkan bahwa :


selector

  • simbol kode - kode yang di pakai untuk nantinya dapat di terapkan pada html ,sebagai contoh ( body, h1,h2,h3,a,header,outerwrapper, dan lain sebagainya .. untuk lebih jelasnya pada artikel selanjutnya akan aldi postingkan berbagai macam fungsi kode kdoe css nya .. karena tidak mungkin untuk menjelaskan semua kode kode css hanya dalam 1 postingan "banyak banget broo ... capek aldi nulisnya"

Declaration :

  • bisa kita lihat dari contoh di atas bahwa di dalam declaration terdapat pula properti - properti  dan juga value ..jadi intinya declaration itu adalah kumpulan dari properti dan juga value .yang di ringkas dalam satu paket dengan awalan pembuka "{" dan di tutup dengan "}" ...
Property :
  • proeprty adalah atribut - atribut style yang dapat kalian ubah .untuk mendesain html sesuai ke butuhan blog / web kalian . dalam setiap properti memiliki Value ( nilai ).
Value :
  • Value adalah nilai - nilai dari property seperi yang telah aldi jelaskan tadi sebelumnya ..


css comment ( tulisan yang tidak terbaca oleh mesin ) atau biasa di sebut comment ..

untuk menambahkan tulisan coment hal yang harus anda lakukan adalah menambahkan kode "/*" pada awal kata dan di akhiri dengan kode "*/" .. contoh

/*Disini tulisan comment*/
p
{
text-align:center;
/*Di sini tulisan yang tidak terbaca */
color:black;
font-family:arial;
}


huh .. capek juga yaa ngetik ... aldi ngopi dulu yaa .. coffee   mau ????
aihhh .. beli donkk .. weeee tongue .
heheheheheheh ... oke lanjut .


fungsi ID dan CLASS pada CSS


Fungsi ID :

  • ID di gunakan untuk style elemen tunggal yang unik dan biasanya mempunyai banyak element-element lain di dalamnya.
  • ID di  lambangkan dengan simbol "#" ( pager )
  • ID di tulis ke html / body  dengan style "<div id="nama_selector_anda">" dan di tutup dengan kode </div> 
  • contoh singkat ID 
#namaselector
{
text-align : center;
color : red;
background : #ffffff;
margin :0px;
padding:10px;
}

Dari contoh di atas dapat di simpulkan bahwa pemakaian ID dengan selector "namaselector" ...untuk penulisan pada html / body menjadi seperti di bawah ini :

<div id="namaselector"> dan di tutup </div>

ingat !! di atas hanya contoh .. untuk isi dari "namaselector" adalah isi dari berbagai macam kode-kode yang kalian gunakan dalam membangun web/blog kalian sendiri .


Fungsi CLASS :

  • Class digunakan untuk menentukan style pada sekelompok element
  • Class biasanya terdapat di dalam selector ID
  • Class memungkinkan kalian untuk menetapkan style tertentu  untuk setiap element html  dengan banyak class yang sama .
  • Class di lambangkan dengan simbol "." ( titik )
  • lihat contoh di bawah untuk lebih jelasnya :
.center {text-align:center;}

jika kalian menggunakan class selector dalam menggunakan css .. kalian juga dapat langsung menambahkan kode html khusus untuk menambahkan kode css ke dalamnya .

dari contoh di atas .. akan aldi tambahkan kode html h1 agar letaknya menjadi di tengah ( di tengah karena css class di atas menggunakan center .. jika kalian menggunkan kode css lain juga bisa .. asalkan sesuai ketentuan . untuk penjelasan ini akan aldi jelaskan pada postingan selanjutnya  big hug ) 

hasil penggabungan kode di atas dengan h1 .

p.center {text-align:center;}

Maka hasil dari kode html untuk P akan menjadi di tengah ...


bagaimana ???? udah ngudeng belumm .... smug ..
pasti bagi kalian yang baru pertama kali mendengar kode - kode di atas, sekarang cuma bisa  ngangguk - ngagguk aja yaaa ...hehehehehehhehe .. sabar aja yaaa semua butuh proses happy .

oke kita lanjut ..

kalian yang telah membaca tutorial panjang di atas .. jangan - jangan  belum tahu  lagi dimana letak kode kode css pada blog / web di tempatkan ..aihhh kalo sampe ke jadian kaya begitu bisa kacau urusannya ini ..surprise ..

oke deh mungkin di antara kalian jika memang benar masih ada yang belum tahu di mana letak kode - kode css di letakan .. sekarang biar aldi kasih tahu .. lihat tutorial di bawah :

catatanidea

kalau aldi sendiri biasa meletakan kode CSS itu tepat di atas kode "]]></b:skin>" ..
akan tetapi biar lebih jelasnya .. semua kode css itu terdapat setelah kode "<head>" dan sebelum kode "</head>"..


untuk peletakan kode css secara lengkap .. sebenarnya ada 3 cara dalam peletakannya loh ..

1 . External style sheet
2 . Internal style sheet
3 . Inline style

aduhhhh capekk aja yaa .. whew!..
untuk tutorial meletakan kode css dengan 3 cara tersebut .. aldi jelaskan pada tutorial css berikutnya saja yaa .. capekk brooo ...

mudah - mudahan tutorial - tutorial mengenai CSS di atas dapat berguna yaa ..

semoga bermanfaat ....


44 komentar:

  1. masih bingung mas bro, masi bth wkt.

    BalasHapus
  2. iya semua emang btuh waktu brother ..
    hehehe

    BalasHapus
  3. hbs baca postingan mas bro yg ada kpalaku mumet hihihi

    BalasHapus
  4. postingannya berguna semua..
    :D

    jadi seneng baca" postingan mas bro..

    BalasHapus
  5. makasih aldi,sangat berguna,,,,jd gak bosen u/mengunjunginya...

    BalasHapus
  6. Masih Pusing Mas. di Bekam Aja di
    http://pondokbekamindonesia.blogspot.com/
    atau http://bekam01.blogspot.com/

    BalasHapus
  7. bwt yang posting artikelnya makasih banget jadi dapet pencerahan dech heeee (^_^)

    BalasHapus
  8. Bro, Mungkin akan lebih mudah diahami kalu di berikan contoh nya dan dijelaskan (hanya satu contoh)

    BalasHapus
  9. Binguuuuuuuuuuuuung Mas Bro,,, hehehe
    (baru kali ini belajar css/html)

    BalasHapus
  10. eh om ntu yang css paling atas body nya emang gak di tutup yah?

    Shadow

    BalasHapus
  11. yaa namanya belajar masih bingun,,,.,.,hahahahah

    BalasHapus
  12. cara buat menu dropdown gmana ya ?

    BalasHapus
  13. good job bro!

    Penting banget nih posting.. makasih

    BalasHapus
  14. terimakasi atas postingannya gan...

    BalasHapus
  15. masih bingung ei, gak mudeng aku,,

    BalasHapus
  16. hmmm, hasil dr coding dtmpilkan dong...
    hehe, ngarepp

    BalasHapus
  17. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  18. keren lah ini blog..
    ringan trus bahasa penyampaiannya juga friendly..
    jd walaupun css agak membingungkan tpi insyaallah masih bisa paham..
    thnks gan atas info ny..
    sering" ngposting css ya..
    biar ane makin semangat belajar css..
    :D

    BalasHapus
  19. postingannya bgs... tp aq mlototin gk ngerti" :lol:
    mampir di blog q broo... :D novandsmuct.blogspot.com

    BalasHapus
  20. Keren gan,, makasih.
    Jadi lebih semangat buat dipelajari.

    BalasHapus
  21. hiks hiks .. pusing amat gan bacanya .. tpi bagus sharenya .. jd pnegen blajar lg dari awal html ...

    BalasHapus
  22. mantap bngt ne pstingn nya gan, gya bhs ny mdh d phm! , 0ke, LANJUTKAN!!

    BalasHapus
  23. Mumeeet...
    Aku cuma lulusan SD mas, ra mudeng.

    BalasHapus
  24. Hehehe maaf gan ,,.
    ini artikel ane yang udah lama banget ..
    dulu masih kaku nulisnya .. wkawkawka

    BalasHapus
  25. Script buat naro css di luar file utama gimana ya gan? yang ditaro di antara head sama /head Thanks.

    BalasHapus
  26. kaya gini gan ..

    <*link rel='stylesheet' href='link dari css agan.css' *>

    note: hilangkan tanda *

    BalasHapus
  27. mantaapp gan walu rada bingung :(

    BalasHapus
  28. thanks bro sangat memvantu...ane klik iklannya 3 kali yah hehehe

    BalasHapus
  29. Nice Share..
    terima kasih atas informasinya..

    BalasHapus

Diberdayakan oleh Blogger.