CSS (Cascading Style Sheets)
Memahami dan mengetahui fungsi dari
CSS (Cascading Style Sheets) sebagai Bahasa pemrograman guna mengatur desain
layout web.
CSS (Cascading Style Sheets) adalah
sebuah cara untuk memisahkan isi dengan layout dalam halaman-halaman web yang
dibuat. CSS memperkenalkan template yang berupa style untuk membuat dan
mempermudah penulisan dari halaman-halaman yang dirancang. Hal ini sangat
penting karena halaman yang menggunakan CSS dapat dibaca secara bolak-balik dan
isinya dapat dilihat oleh pengunjung dari manapun.
CSS dapat menciptakan halaman
yang tampak sama dengan resolusi layar dari pengunjung yang berbeda tanpa
memerlukan suatu tabel. Dengan CSS,
akan lebih mudah melakukan setting tampilan keseluruhan web hanya dengan
menggantikan atribut-atribut atau perintah dalam style CSS dengan
atribut yang diinginkan tanpa harus mengubah satu per satu atribut tiap elemen
yang ada dalam situs yang dibuat.
Cara kerja
CSS
Cara kerja CSS sangatlah mudah,
karena CSS hanya membutuhkan style sebagai penentu dari font, warna, dan
format-format lain untuk memformat atribut sebuah halaman web yang dibuat. Tiap
style mempunyai dua buah elemen dasar, yaitu “selector” dan “declaration”.
Sebuah selector adalah tag HTML, sementara declaration adalah
satu atau beberapa perintah atau nilai dari CSS yang menunjukkan tipe bentuk
yang diaplikasikan pada selector. Declaration ini biasanya ditandai dengan
tanda kurung kurawal {}. Perintah atau nilai CSS yang berbeda dipisahkan
satu dengan yang lain dengan menggunakan tanda titik-koma (;) seperti pada
contoh berikut :
<style>
h1
{color:blue; font-size:12px;}
</style>
|
Dapat dilihat bahwa :
.h1 adalah selector, dan {color:blue; font-size:12px} adalah declaration.
Selector-selector dan style dalam CSS
akan dimasukkan dalam sebuah tempat yang sama dalam isi dokumen HTML atau
dibuat di luar dokumen HTML yang nantinya akan dipanggil untuk menentukan isi
tampilan dokumen HTML.
Hal yang paling umum dalam memukan
kode Style Sheet dengan menggunkan tag <style>. Tag ini selalu dalam
bagian <head> dan sebelum </head> dari dokumen. Secara garis besar
perhatikan contoh berikut :
<!DOCTYPE
html>
<html>
<head>
<style>
. . . aturan-aturan css . . .
</style>
</head>
<body>
. . . Dokumen HTML yang
akan diberikan aturan CSS
</body>
</html>
|
Rules dalam
penulisan selector style pada CSS
Selector digunakan untuk memilih
elemen-elemen HTML berdasarkan nama, id, class, atribut dan lain-lain. Berikut
ini merupakan beberapa teknik penulisan selector dalam CSS.
Element
selector merupakan
cara penulisan syntax css berdasarkan
elemen-elemen yang sudah disediakan pada bahasa HTML. Anda dapat memlihi semua
elemen dari tag <p> pada sebuah halaman seperti contoh
dari elemen selector adalah sebagai berikut:
p {
color: red;
text-align: center;
}
|
Class
Selector digunakan
untuk memilih elemen html yang memiliki sifat atau perilaku yang sama dalam
satu halaman. Selector Class ini bisa digunakan untuk beberapa elemen dalam
satu halaman. Penerapan selector Class sebaiknya memperhatikan kesamaan
elemen-elemen pada halaman html.
Penulisan selector class pada CSS
diawali dengan huruf titik (.) atau dot. Kemudian nama class ditulis tepat
setelah tanda titik. Deklarasi CSS untuk Class ini ditulis diantara kurung
kurawal seperti pada selector elemen dan selector id. Berikut ini adalah
penulisan class selector:
.center
{
Text-align: center;
Color: red;
}
|
Contoh script pemanggilannya adalah
sebagai berikut :
<p
class=”center”>contoh pemanggilan class
Selector</p>
|
Id Selector Untuk menuliskan selector
Id kita menggunakan karakter hash (#). Kemudian nama Id ditulis tepat setelah
tanda # tanpa spasi. Deklarasi CSS untuk ID ini ditulis diantara kurung kurawal
seperti pada selector elemen. Contoh penulisannya adalah sebagai berikut:
#paral
{
Text-align: center;
color: red;
}
|
Contoh script pemanggilannya adalah
sebagai berikut :
<p
id=”paral”>>contoh pemanggilan style menggunakan id
Selector</p>
|
Grouping
Selector Digunakan
jika anda memiliki beberapa elemen dengan deklarasi style yang sama. Misalnya
contoh berikut ini:
h1 {
text-align: center;
center: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
|
Jika kita lihat pada contoh di atas,
terdapat tiga elemen dengan deklarasi style yang sama. Penulisan selector tersebut
sangat tidak efektif. Maka dari itu agar penulisan style lebih efektif maka
akan lebih baik untuk mengelompokkan selector-selector. Untuk
mengemlompokkan atau grouping selector, gunakan tanda koma untuk setiap selector.
contoh di bawah ini adalah cara untuk mengelompokan beberapa selector dengan
deklarasi style yang sama.
h1, h2, p {
text-align:
center;
color:
red;
}
|
No comments:
Post a Comment