Pengenalan CSS

Target dari tulisan pengenalan css 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.

Pengenalan CSS

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 yang kemudian akan dilanjutkan tentang bagaimana menerapkan CSS pada dokumen HTML yang telah kita buat. Apabila anda telah ahli pada CSS, anda juga dapat langsung mempelajari tentang pengenalan animasi pada CSS3.

Incoming search terms:

Be Sociable, Share!

Related Posts:

No Comments

Add a Comment

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