Pengenalan CSS

Target dari tulisan ini adalah anda akan mampu memahami konsep dasar CSS, mampu memahami struktur dasar syntax CSS. CSS merupakan kepanjangan dari Cascading Style Sheet. CSS menggunakan aturan-aturan didalamnya untuk menentukan bagaimana tampilan sebuah halaman. Aturan-aturan ini biasanya dipisahkan dalam bentuk dokumen lain yang tersimpan sebagai file berformat .css. Hal ini bertujuan untuk memisahkan antara markup HTML dengan style tampilan.
HTML tidak pernah ditujukan untuk mengatur format sebuah dokumen. HTML ditujukan untuk mendefisikan isi dari sebuah dokumen, misalnya:

<h1> Ini adalah sebuah Header</h1>
<p>Ini adalah sebuah paragrap</p>

Saat tag sepertiĀ  <font> ditambahkan pada versi HTML 3.2, merupakaan saat-saat yang merepotkan para web developer. Hal ini terasa saat membuat web untuk skala besar, dimana tag-tag seperti <font> tersebut harus ditambahkan pada tiap-tiap halaman yang akan menimbulkan pemborosan waktu dan biaya.
Untuk mengatasai masalah ini, maka W3C akhirnya meluncurkan CSS. Mulai HTML 4, pengaturan format dokumen dapat dipisahkan pada file lain bertipe CSS. Dengan adanya CSS ini, maka sangat menghemat waktu bagi para developer, dimana dengan hanya mengubah satu file css saja, dapat langsung berpengaruh pada semua halaman website tersebut.

Syntax CSS
Aturan CSS memiliki dua bagian utama, yaitu sebuah selector dan satu atau beberapa deklarasi.

syntax css

Sususan syntax CSS (sumber: w3schools.com)

Selector biasanya merupakan sebuah elemen HTML yang ingin anda atur tampilannya. Setiap deklarasi terdiri dari sebuah property dan sebuah value. Sebuah property merupakan style atribut yang ingin anda rubah tampilannya.
Contoh syntax CSS.

Selector yang berupa element html, cukup dituliskan nama element tersebut, misalnya body, h3, h1, p atau yang lainnya. Selain selector berupa eleme-element HTML, juga memungkinkan untuk membuat selector kita sendiri. Selector ini akan dibahas dibagian bawah bab ini.

p {color:red;text-align:center;}

Atau bisa dituliskan:

p
{
     color:red;
     text-align:center;
}

Sampai disini untuk pengenalan CSS, bahasan berikutnya adalah tentang pengenalan ID dan Class

Incoming search terms:

Be Sociable, Share!

Related Posts:

No Comments

Add a Comment

Your email address will not be published. Required fields are marked *