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
..- 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 ??? ..
jadi jangan terlalu di bawa serius dan juga terlalu santai yaaa ... sersan aja yaa ( serius tapi santai )
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
.." 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
..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 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 ..
/*Disini tulisan comment*/
p
{
text-align:center;
/*Di sini tulisan yang tidak terbaca */
color:black;
font-family:arial;
}
p
{
text-align:center;
/*Di sini tulisan yang tidak terbaca */
color:black;
font-family:arial;
}
huh .. capek juga yaa ngetik ... ngopi dulu yaa ..
mau ????aihhh .. beli donkk .. weeee
.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;
}
{
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 )
) hasil penggabungan kode di atas dengan h1 .
Maka hasil dari kode html untuk P akan menjadi di tengah ...
bagaimana ???? udah ngudeng belumm ....
..
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
.
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 ..
..
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 :
catatan
untuk peletakan kode css secara lengkap .. sebenarnya ada 3 cara dalam peletakannya loh ..
1 . External style sheet
2 . Internal style sheet
3 . Inline style
p.center {text-align:center;}
Maka hasil dari kode html untuk P akan menjadi di tengah ...
bagaimana ???? udah ngudeng belumm ....
..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
.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 ..
..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 :
catatan
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>"..
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 .. ..
untuk tutorial meletakan kode css dengan 3 cara tersebut ..
..untuk tutorial meletakan kode css dengan 3 cara tersebut ..
mudah - mudahan tutorial - tutorial mengenai CSS di atas dapat berguna yaa ..
semoga bermanfaat ....
semoga bermanfaat ....
0 komentar:
Speak up your mind
Tell us what you're thinking... !