Apa itu CSS?
- CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web.
- Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.
- Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda.
- CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan.
- Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet.
- Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.
Keuntungan Menggunakan CSS
- CSS memberikan keseragaman pada halaman web.
- Dengan CSS dapat menghemat banyak waktu dan pekerjaan berulang. Saat menggunakan CSS, perubahan tidak perlu dilakukan dalam setiap halaman web.
- CSS memungkinkan untuk memuat halaman web Anda dengan mudah.
- Layers (Lapisan), seperti item pop-up, dapat digunakan dalam dokumen.
- CSS membantu Anda memelihara halaman web Anda dengan mudah dan efektif
Kekurangan
- Tampilan pada browser berbeda-beda.
- Kadang juga terdapat browser yang tidak support CSS (browser lama).
- Harus tahu cara menggunakannya.
- dibutuhkan waktu lebih lama dalam membuatnya.
- Belum lagi ada bug/error dalam CSS.
Contoh CSS 1
<html> <head> <style Type="text/css"> h1{font-family:tahoma} h2{color: blue} p{font-size:11pt ; font-style: italic} </style> </head> <body> <h2>NuSinau</h2> <p>NuSinau adalah suatu website tempat berbagi berbagai ilmu pengetahuan. </p></body> </html>
Sintak CSS (Syntax CSS)
selector (properti: nilai)
body (color: blue)
p {font-family: tahoma}
h1 {font-weight: bold}
dan lain-lain
Selector
Selector biasanya merupakan elemen HTML atau tag dimana berbagai properti diberi suatu nilai. Dalam sebuah selector, setiap properti mempunyai nilai masing-masing dan sejumlah properti dengan nilai-nilai terkait dapat diatur.
Seperti pada contoh diatas; body, p, dan h1 adalah suatu selector dimana warna (color), nama font (font-family) dan jenis font (font-weight) diberi nilai untuk tiap propertinya (tahoma, bold, blue, dll).
Contoh
h1 (font-size: 20px; text-align: left; color: blue; font-family: Arial;)
h1 (font-size: 20px; text-align: left; color: blue; font-family: Arial;)
Pengelompokan Selector (Grouping of Selectors)
Seperti dapat dilihat, satu selector dapat memiliki beberapa properti. Dalam konteks yang berbeda, beberapa selector dapat mempunyai properti dengan nilai yang sama. Dengan begitu harus dilakukan pengolompokan selector.
h1 , body , p , ul { color : blue; }
Tidak ada komentar:
Posting Komentar