CSS (Cascading Style Sheet) merupakan standard yang dibuat untuk melengkapi standard HTML dalam melakukan formatting tampilan. Diperkenalkan sejak HTML 4.0, dan saat ini semua browser modern sudah mendukung CSS.
Mulai Belajar CSS
Umumnya, CSS dipelajari setelah anda memiliki pengetahuan atau mengenal HTML dengan baik, karena kedua hal ini saling terkait satu sama lain. Namun demikian, sangat memungkinkan untuk secara bersamaan mempelajari keduanya melalui contoh-contoh yang banyak terdapat di Internet.
Kegunaan CSS
Css dapat membantu kita melakukan hal-hal sebagai berikut;
- Mengatur bagaimana sebuah elemen HTML ditampilkan oleh browser
- Mempercepat dan menjaga konsistensi perancangan sebuah halaman situs karena CSS dapat diletakkan di file lain (eksternal) dan dapat digunakan berulang-ulang
- Pemisahan antara proses pembuatan HTML dan pengaturan tampilan memberikan kita kemudahan dalam melakukan perubahan dan perbaikan di kemudian hari
- CSS memiliki aturan prioritas mengenai properti yang mana yang akan digunakan oleh sebuah elemen HTML, hal ini memudahkan proses logika dalam tahap pembuatan, karena hasilnya menjadi bisa ditentukan (predictable).
Syntax
Syntax CSS terdiri dari 3 bagian;
- Selector
- Property
- Valua
Dituliskan dalam format;
selector { property: value; property2: value2}
Selector biasanya merupakan elemen HTML yang ingin kita atur tampilannya, misalnya;
body {color:#000000; margin:0px;}
Contoh di atas memberikan nilai hitam (#000000) pada property color di elemen body, dengan demikian color (warna font) selama tidak diubah pada aturan lainnya akan memiliki warna hitam. Juga diperhatikan bahwa untuk memberikan lebih dari 1 property dapat dilakukan pemisahan dengan semicolon (;).
Agar lebih mudah dibaca, contoh diatas juga bisa ditulis seperti;
body {
color:#000000;
margin:0px;
}
Pengelompokkan
Selector dapat kita kelompokkan untuk menggunakan satu aturan yang sama dengan menggunakan tanda koma, contoh berikut akan memberikan nilai abu-abu (#cccccc) pada property color di elemen heading (h1-h5).
h1, h2, h3, h4, h5 {
color:#cccccc;
}
Dengan demikian, semua elemen heading (h1 – h5) akan menggunakan warna abu-abu kecuali diubah oleh aturan dibawahnya.
Mengaitkan Halaman HTML dengan File CSS
File CSS yang dibuat terpisah atau eksternal dengan ekstensi .css dapat dikaitkan ke dalam file HTML melalui <link rel=’stylesheet’> yang biasanya diletakkan di dalam tag <head>. Berikut adalah contoh penulisannya;
<head>
...
<link rel='stylesheet' href='/path/url/css/namafilestyle.css' type='text/css' />
...
</head>
Demikian merupakan konsep dasar CSS untuk dipelajari sebelum kita dapat menggunakannya pada sebuah halaman HTML.
Referensi
{ 0 comments… add one now }