Style
Pada Halaman WEB
.jpg)
Cascading
Style Sheet atau lebih sering disebut dengan istilah CSS merupakan salah satu
dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website.
CSS bukanlah
sebuah bahasa pemrograman, melainkan sebuah aturan untuk mengendalikan beberapa
komponen pada web sehingga akan lebih terstruktur, seragam dan mudah dalam
pengaturan saat pendesain sebuah halaman web.
CSS merupakan
sekitar pembuatan dan pengaturan style font, warna, jarak, bentuk, dan
lain-lain yang tidak dapat dilakukan dengan elemen - elemen HTML. Dapat
dikatakan bahwa CSS merupakan pengembangan dari HTML dalam hal format dokumen
web. Adanya CSS memudahkan kita untuk mengatur dan memilih sebuah website dan
tampilannya karena CSS memisahkan antara bagian presentasi dan isi dari web
yang dibuat.
CSS akan membantu
para web designer untuk mengubah tampilan teks (baik dari
bentuk dan ukuran font maupun warnanya), menambahkan gambar,
hingga mengubah latar belakang sebuah halaman HTML.
Keberadaan CSS bisa
terlihat dengan adanya atribut warna teks. Di sini CSS memberi perintah berupa
teks berwarna biru melalui tag <span> dengan atribut class=”warna”. Jadi
setiap tag <span> muncul, teks yang mengikutinya akan berwarna biru.
Pun demikian saat kamu
ingin mengganti warnanya. Tinggal mengganti CSS pada tag <style> dari
“blue” ke warna lain, maka teks yang awalnya berwarna biru akan berubah warna.
Beberapa
pengertian CSS
· 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. Anda hanya perlu
membuat perubahan dalam style sheet.
· CSS
memungkinkan Anda 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.
Berikut adalah contoh
mudah penulisan css pada suatu halaman web:
<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;)
dapat pula ditulis
seperti:
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;
}
Pada contoh diatas,
elemen header, body, paragraph, unordered list berada pada
group yang sama. Semua elemen tersebut nantinya akan berwarna biru.
Pengelompokan
dalam CSS
· Untuk
berbagi style yang sama, bila beberapa elemen mempunyai nilai
properti yang sama (misalnya font, ukuran, warna, dll).
· Dengan
satu perintah dapat memberikan properti style pada elemen yang
berbeda dengan nilai yang sama.
· Untuk
menghemat waktu bila terjadi penambahan properti dan juga ketika merubah
properti di elemen.
.jpg)
Tidak ada komentar:
Posting Komentar