12/07/2015

Mengenal dan Memahami Dasar CSS

12/07/2015

CSS (Cascading Style Sheets)  adalah bahasa komputer yang digunakan untuk menulis format instruksi yang berisi aturan-aturan bagaimana sebuah halaman website akan ditampilkan. Aturan-aturan ini (CSS) kemudian menentukan : tata ruang sebuah elemen HTML, posisi, lebar, tinggi, jenis dan warna huruf yang digunakan, bakcground atau latar belakang, jarak antar elemen HTML  dll. Sebagai contoh, penulisan sebuah judul dalam halaman web dengan HTML seperti  <h1> ABAZTA</h1>  dapat diatur dengan dengan varian gaya CSS seperti jenis font yang digunakan, warna, dan tipenya. Karena itulah sebagian besar tampilan dokumen HTML ditentukan oleh CSS.
Saya akan menampilkan contoh dokumen HTML seperti berikut ini,

HTML

 <!DOCTYPE html>
<html>
<head>
<style>
  h1 {font-style:normal; font-weight:bold; text-align: center; color: Green}
</style>
</head>
<body>

<h1>Abazta</h1>
<p>This is a paragraph.</p>

</body>
</html>

Pada contoh di atas, kita telah menetapkan gaya tampilan pada tag h1 , yaitu pada bagian ini <h1>Abazta</h1> dengan penulisan sintaks CSS seperti berikut

HTML

h1 {font-style:normal; font-weight:bold; text-align: center; color: Green}

Mari kita lihat perbedaan elemen HTML judul pada dua model berikut (klik lihat hasil)
HTML
CSS (tidak ada CSS)
bedakan model penulisan berikut !
HTML
CSS (dengan CSS)

Tampak dari kedua kolom di atas ada perubahan gaya teks judul antara elemen HTML yang menerapkan CSS dengan yang tidak menerapkan gaya CSS.

Mengenal Sintaks CSS

sintaks css
sumber gambar: w3c

Sintaks css dalam bahasa sederhana berarti format penulisan CSS. Format tersebut dibangun dengan dua bagian utama, yaitu : Selektor (selector) dan Deklarasi (declarations).
  1. Selector adalah penanda (tag) identitas elemen HTML terpilih yang akan menjadi target atau sasaran format CSS. Maka pada setiap elemen HTML terdapat tiga selector dasar yang bisa kita tuliskan pada aturan CSS yaitu tag HTML, ID, dan CLASS.

  2. Declarations adalah bentuk-bentuk aturan atau format atau gaya yang akan diterapkan pada selector. Ada dua bagian yang terdapat pada declarations, yaitu
    1. Property
    2. (Atribut yang digunakan dalam penulisan CSS untuk menentukan format atau gaya tertentu sebuah elemen, misal format warna teks dalam sebuah elemen HTML, format lebar, format tinggi, format jarak elemen yang bersangkutan dengan elemen yang lain, dan sebagaianya ) 
    3. Value 
    4. (Nilai yang diterapkan untuk property)

Selanjutnya kita akan mempelajari lebih jauh tentang aturan penulisan sintaks CSS pada bagian ini : Aturan Penulisan Sintaks CSS