Rabu, 12 Mei 2010

Mengenal Selector, Property dan Value pada CSS

CSS Jagoanbloggger

Apa itu selector, property dan value? Hmmm…. Saya juga bingung bagaimana menjelaskannya. Tapi kalau boleh mencoba kira-kira penjelasannya adalah sebagai berikut:

1) Selector : yaitu suatu syntax CSS yang digunakan untuk memilih elemen HTML mana yang akan terpengaruh oleh suatu kode CSS.
2) Property : Kalau Selector digunakan untuk memilih elemen HTML yang akan di Format, maka property digunakan untuk menentukan “apanya yang akan diformat dari elemen tersebut?” apakah warnanya, ukurannya ataukah posisinya dll.
3) Value  : adalah nilai dari suatu property.

Sebagai contoh, suatu ketika sobat ingin membuat paragraf yang mempunyai background berwarna merah dengan melibatkan CSS. Maka suatu paragraf bisa kita anggap sebagai selectornya,background sebagi propertynya dan value-nya adalah merah.
Selector---------------?Paragaraf---------------------?p
Property---------------?Background------------------?background
Value-------------------?Warna merah---------------?red
Adapun cara penulisan CSS untuk selector, property dan value adalah sebagai berikut:
Selector{property:value}
Dengan demikian jika sobat ingin membuat paragraf dengan background berwarna merah, maka sintax CSS-nya adalah sebagai berikut:
P{background:red}
Setelah itu, setiap sobat membuat suatu paragraf (tentunya dengan menggunakan dengan tag < p>) pada dokumen HTML yang bersangkutan, maka secara otomatis akan memiliki background berwarna merah. Namun, perlu diingat bahwa format penulisan CSS diatas hanya berlaku pada Internal CSS dan Eksternal CSS, sedangkan pada Inline CSS format penulisannya akan berbeda.
Contoh Penulisan Internal CSS untuk membuat paragraf dengan background berwarna merah adalah sebagai berikut:
<html>
<head><title>Paragraf Berwarna merah</title>
<style type="text/CSS">
p{background:red}
</style>
</head>
</body>
<p>
It seems that almost everybody has a cell phone these days, and with the <br />
growing adoption of smart phones, more and more people are browsing the internet <br />
on their mobile device. Even though some phones, like the iPhone, have browsers <br />
that make viewing regular webpages suitable, a mobile version of your website can <br />
mean several benefits, like faster load times, and ensuring your content can be viewed <br />
on a wider range of phones.
</p>
</body>
</html>
Hasilnya kira-kira sebagai berikut:


Kira-kira seperti itulah penjelasan mengenai selector, property dan value pada CSS. Semoga bermanfaat bagi sobat. Nah, karena saya juga masih dalam tahap pembelajaran, bisa jadi terdapat kekurangan pada tulisan ini. Bagi sobat yang ingin menambahkan atau mengoreksi silahkan komen disini.

2 Komentar:

Anonim mengatakan...

Terimakasih infonya..

Reza mengatakan...

Pas banget. Untuk merubah tampilan blog memang harus merubah kode - kode css. Dan memahami selector, poperty dan value dari css adalah suangaaatt penting. Sukses terus

Posting Komentar