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




Posting Lama Posting Lebih Baru

Comments :

ada 44 komentar ke “Dasar kode CSS | Belajar CSS | Penjelasan CSS”
sagoana mengatakan...
pada  

masih bingung mas bro, masi bth wkt.

aldi mengatakan...
pada  

iya semua emang btuh waktu brother ..
hehehe

Anonim mengatakan...
pada  

hbs baca postingan mas bro yg ada kpalaku mumet hihihi

Anonim mengatakan...
pada  

postingannya berguna semua..
:D

jadi seneng baca" postingan mas bro..

aldojoe mengatakan...
pada  

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

yayamuet mengatakan...
pada  

Hemm.. Masih bingung mas

deniz van mengatakan...
pada  

sirah wing ngbull..

Pondok Bekam Indonesia mengatakan...
pada  

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

Kraeng Francisco mengatakan...
pada  

Terima kasih infonya sobat....

niar rofiah mengatakan...
pada  

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

Arief Rahmatullah mengatakan...
pada  

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

DShare 33 mengatakan...
pada  

Nice infonya admin..

Fauziah-dFLower mengatakan...
pada  

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

ismoy blackwin mengatakan...
pada  

kodenya apa aja.?
share donk.

Anonim mengatakan...
pada  

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

Shadow

freddynaibaho mengatakan...
pada  

very nice bro.....

azhar mengatakan...
pada  

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

Anonim mengatakan...
pada  

cara buat menu dropdown gmana ya ?

Kurozama Ichwan mengatakan...
pada  

good job bro!

Penting banget nih posting.. makasih

agus salim mengatakan...
pada  

terima kasih gan....

Anonim mengatakan...
pada  

masih bingung...

Avo Ronggo mengatakan...
pada  

terimakasi atas postingannya gan...

Anonim mengatakan...
pada  

waw

Anonim mengatakan...
pada  

aldi boleh nanya???

febry sari mengatakan...
pada  

masih bingung ei, gak mudeng aku,,

mochamad rizka mengatakan...
pada  

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

mochamad rizka mengatakan...
pada  
Komentar ini telah dihapus oleh pengarang.
chinta lee mengatakan...
pada  

blum paham nich kk :(

suci anggraini mengatakan...
pada  

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

novan dsmuct mengatakan...
pada  

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

Anonim mengatakan...
pada  

Ngak ngrti

Ahmad Fauzi mengatakan...
pada  

Artikel yang berguna...

Anonim mengatakan...
pada  

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

neurothic syndrom mengatakan...
pada  

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

Aris Fk mengatakan...
pada  

pusssing.............

Eihmeid rofi mengatakan...
pada  

siph......sngat membantu

anwar z mengatakan...
pada  

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

VERRA CELL mengatakan...
pada  

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

Aldi mengatakan...
pada  

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

Belajar SEo mengatakan...
pada  

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

Aldi mengatakan...
pada  

kaya gini gan ..

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

note: hilangkan tanda *

Ahmad Arif Saputra mengatakan...
pada  

mantaapp gan walu rada bingung :(

heri properti mengatakan...
pada  

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

Cara Mengecilkan Perut mengatakan...
pada  

Nice Share..
terima kasih atas informasinya..

Poskan Komentar


Copyright © 2014 - Aldi Ferdiyan - My Facebook - Powered By Pasa Iklan / Pasang Iklan Gratis


"Dasar kode CSS | Belajar CSS | Penjelasan CSS"

Sewa Laptop Infonindo.com - Penyewaan Laptop - Sewa Laptop di jakarta - Warta kesehatan - Warta Sehat - Profil - Seks - alkes lab - Obat Penyakit Ibu Anak