Belajar CSS, di dalam proses pembelajaran css hal yang pertama harus kalian pahami atau setidaknya familiar dengan yang namanya html, atau kalian dapat mencari atau membaca 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 ya
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.
<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 ???
Oke kita lanjutkan ke tahap berikutnya.
Mungkin bagi kalian yang sudah terbiasa mengedit kode - kode html akan merasa aneh bukan.
Oke kita lanjutkan ke tahap berikutnya.
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 ...??
" Jadi intinya kode - kode css dapat di gunakan untuk banyak desain kode kode html .."
bagaimana ????? udah paham apa belumm ????
" Jadi intinya kode - kode css dapat di gunakan untuk banyak desain kode kode html .."
bagaimana ????? udah paham apa 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 ..
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 ..
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 " )
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 :
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 :
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;
}
Fungsi ID dan CLASS pada CSS
Fungsi ID :
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 :
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 )
.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 ditambahkan kode html h1 agar letaknya menjadi rata tengah ( di tengah karena css class di atas menggunakan center, jika kalian menggunkan kode css yang lain juga bisa, asalkan sesuai ketentuan).
hasil penggabungan kode di atas dengan h1 .
dari contoh di atas .. akan ditambahkan kode html h1 agar letaknya menjadi rata tengah ( di tengah karena css class di atas menggunakan center, jika kalian menggunkan kode css yang lain juga bisa, asalkan sesuai ketentuan).
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 adan sudah paham kah ....??
bagaimana ???? udah adan sudah paham kah ....??
pasti bagi kalian yang baru pertama kali mendengar kode - kode di atas, sekarang cuma bisa ngangguk - ngagguk aja yaaa dan untuk belajar ini semua butuh kesabaran dan 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.
oke mungkin di antara kalian jika memang benar masih ada yang belum tahu di mana letak kode - kode css di letakan .. sekarang biar lebih jelasnya, lihat tutorial di bawah :
catatan :
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.
oke mungkin di antara kalian jika memang benar masih ada yang belum tahu di mana letak kode - kode css di letakan .. sekarang biar lebih jelasnya, lihat tutorial di bawah :
catatan :
Biasanya untuk 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.
1 . External style sheet
2 . Internal style sheet
3 . Inline style
untuk tutorial meletakan kode css dengan 3 cara tersebut .akan dijelaskan pada tutorial css selanjutnya, mudah - mudahan tutorial mengenai CSS di atas dapat berguna dan bermanfaat.
Sumber : jualcdsoftware. com & Dari berbagai sumber
0 comments:
Post a Comment
Berikan Komentar Anda