Membuat Syntax CSS Yang Pertama

Baeklah, sodare-sodare sekalian, seperti janji kite kemaren, kite bakal ngelanjutin pelajaran kite mengenai CSS dan Web Design nye. Pade kesempatan ini, kite akan mempelajari chapter ke 2 dari ebook CSS dan Web Design yang kemaren aye ceritain. Mungkin ade yang bertanye-tanye, koq langsung chapter ke 2?

Iye, kite langsung ke chapter 2 aje, karena chapter 1 isinye cuman ceritain manfaat CSS doang. Kite semua inikan udah pada tahu kalo CSS itu emang ade manfaatnye. Nah, jadi aye rase, kite kaga perlu lagi dah ngomongin soal manfaat, alasan, sejarah, dan segala macemnye. Mendingan kite langsung ke pelajaran berikutnye aje, betul kaga?

Membuat Syntax CSS

Kate yang nulis ebook ini, untuk membuat CSS itu, kite tidak harus pake program yang khusus. Kite cukup menggunakan program text editor yang biasa aje. Tapi, kalo kebetulan kite punya program yang emang khusus untuk membuat CSS, tentu akan lebih baik. Tapi kalo tidak punya, itu juga bukanlah masalah.

Nah, untuk latihan ini kite cukup pake Notepad aje. Notepad itu adalah program text editor yang terdapat didalam windows. Jika windows yang sodare pake adalah Windows XP, begini cara membuka program Notepad, pilih Start> All Program > Accessories > Notepad. Setelah itu ketikkan contoh kode CSS dibawah ini:

p
{
color: blue;
text-align: right;
font-family: courier;
}

Setelah itu simpan file ini, dan beri nama file ini dengan name ape aje, yang penting ade .css diujungnye. Misalnye, kite simpen file ini dengan nama "parastyle.css". Nah, sekarang kite akan membuat file HTML-nya. Pilih menu File> New di Notepad. Dan Notepad akan memberikan sebuah layar kosong yang baru. Setelah itu ketikkan kode-kode HTML di bawah ini:

<html>
<head>
<link type=”text/css” rel=”stylesheet” href=”ParaStyle.css”>
</head>
<body>
<H1>Headline Text</H1>
<p>This is body text</p>
</body>
</html>

Setelah itu, simpen file dan kasih name "PStyle.htm". Tapi inget, saat nyimpen file htm ini, simpen di folder yang sama dengan file "parastyle.css" tadi. Nah, setelah itu, tutup program notepadnye. Lalu buka program Explorer.

Arahkan Explorer ke folder tempat kite menyimpan file HTML tadi. Lalu klik dua kali pada file "PStyle.htm". Maka, Windows akan membuka program Internet Explorer untuk menampilkan file HTML yang barusan kite buat tadi. Apa yang ditampilkan oleh IE, adalah file HTML yang sudah kite format menggunakan CSS.

Nah, sampe disini berarti kite sudah berhasil membuat CSS kite yang pertame. Ternyate membuat CSS itu gampang juga. Kaga serumit yang dibayangkan sebelumnye. Ah, kalo tahu CSS itu semudah ini, kenape kaga dari dulu aje, kite belajar CSS, betul kaga?

Selanjutnye ape lagi nih? Ape sekarang kite sudah bisa men-design web?

Sabar dulu dong, kite kan baru mulai. Perjalanan kita masih panjang, kawan. Masih banyak yang belum kite tahu. Kode-kode diatas aje belon kite mengerti sepenuhnye. Betul juga, kite tadi kan cuma niru-niru doang. Kaga tahu ape maksud dan arti kode-kode diatas. Tuuuuh.. benerkan, dengerin tuh.

3 Syntaxt CSS: Selector - Property - Value

Menurut yang nulis ebook CSS dan Web Design ini, kalo kite sebelumnye pernah belajar HTML tanpa menggunakan CSS, kite akan tahu bahwa ada sedikit perbedaan dalam cara penulisan syntax atau kode CSS ini. Bedanya?

Kalo di HTML tanpa CSS, saat kite akan memformat suatu komponen, maka syntax yang akan kite gunakan adalah tag - attribut. Misalnye kite akan memformat paragraph dengan align atau perataan kanan dan kiri. Kalo kite pake kode HTML tanpa CSS, maka syntaxnye adalah sebagai berikut: <p align="justify">. Dimana p adalah tag, dan align="justify" adalah attributnye.

Sedangkan pada CSS, syntax yang digunakan adalah Selector - Property - Value. Sekarang, biar kite bisa lebih memahami maksud dan cara menggunakan syntax CSS ini, nyok kite bahas atu-atu!

CSS syntax -Selector

Yang dimaksud dengan selector pada CSS, adalah sama dengan tag atau komponen pada HTML. Tag atau komponen dalam HTML itu adalah apa yang terdapat diantara tanda < dan tanda >. Contohnya < h1 >, < p >, < b >, dan lain-lain. Nah, itu artinya, saat kita ingin membuat suatu CSS selector, kita harus tahu apa tag nya didalam HTML.

Berarti kite harus menghapal tag-tag atau komponen-komponen HTML juga dong? Betul. Tapi kaga usah khawatir. Banyak koq, buku-buku, ebook, ataupun artikel yang berisi daftar tag atau komponen HTML. Jika kamu belum menemukannya, kaga usah takut, kite bakalan mempelajarinye juga nanti.

CSS syntax -Property dan Value

CSS property atau properties, bisa juga kite samakan dengan attribut di HTML. Property adalah bagian yang menjelaskan attribut dari suatu CSS selector. Contohnya saat kite ingin memformat paragraph tadi. Maka kode atau CSS syntax-nya adalah sebagai berikut: p {text-align: right;}. Nah, coba perhatikan perbedaannya dengan contoh untuk mengatur paragraph tanpa CSS diatas!

Dari kedua contoh itu, kite bisa melihat perbedaannya secara jelas. Dari kedua contoh itu, kite jadi tahu kalau ternyata cara penulisan syntax pada HTML sangat berbeda dengan cara penulisan syntax CSS. Biar kite bisa lebih jelas lagi, coba kite deketin kedua contoh untuk memformat paragram tadi.

  • HTML - <p align="justify">
  • CSS - p {text-align: right;}

Dari kedua contoh itu kita jadi tahu bahwa kalo di HTML, tag atau komponennya berada di dalam tanda < dan >. Sedangkan pada CSS, tag atau selectornya berada diluar tanda { dan }.

Selain itu ada perbedaan untuk menunjukkan value atau harga dari sebuah properties. Yaitu, jika HTML menggunakan tanda sama dengan (=). Sedangkan CSS menggunakan tanda titik dua (:). Dan satu lagi, setelah menetapkan value di CSS, kita harus menambahkan tanda titik koma (;) di belakangnya.

Nah, sampe disini berarti kite sudah menjadi semakin jelas mengenai perbedaan syntax CSS dan HTML, juga cara penulisannya. Sampai disini, berarti pembahasan kite mengenai cara membuat dan menulis syntax CSS ini kita cukupkan dulu sampe disini. Nanti kite bakal membahas mengenai CSS ini lebih lanjut lagi, dan lebih banyak lagi, serta lebih seru lagi, dijamin, or your money back!!!