Tutorial Mudah dan Cepat Belajar CSS

Belajar CSS
AW - Tutorial Mudah dan Cepat Belajar CSS - Nah tutorial selanjutnya setelah sobat belajar tentang Belajar HTML maka saatnya saya membahas tentang mudah dan cepat belajar CSSS. Ke dua kode yaitu HTML dan CSS ini  harus sobat kuasai sebab dengan menguasai ke dua kode tadi paling tidak sobat sudah bisa membuat website sederhana. Oke sebelumnya saya ingin memberi arahan kepada sobat yang ingin belajar CSS, di dalam proses pembelajaran css hal yang pertama harus sobat pahami atau setidaknya familiar  dengan yang namanya html,
jika kalian ingin belajar html silakan klik di sini 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 sobat 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 saya 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

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

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;
}


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

p.center {text-align:center;}

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


Oke kita lanjut ..

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


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

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

Untuk membahas ke tiga peletakan kode di atas akan saya bahas pada edisi postingan berikutnya agar sobat juga tidak terlalu pusing. Oke sampai jumpa lagi ya..??



0 komentar: