CSS
Cascading Style Sheet
Cascading Style Sheet ( CSS ) secara sederhana adalah sebuah metode yang digunakan untuk mempersingkat penulisan tag HTML, seperti font, color , text dan tebel menjadi lebih ringkas sehingga tidak terjadi pengulangan penulisan. Kegunaan CSS, antara lain :
a.
Mempersingkat penulisan tag HTML : Anda tidak perlu lagi mendefinisikan setiap tag dengan property dan nilai yang
sama.
b. Mempercepat
proses rendering atau pembacaan HTML karena tidak terdapat pengulangan tulisan.
c. Mudah dan
cepat dalam me-maintenance : dikarenakan file CSS dibuat secar terpisah , maka Anda tidak perlu merombak
semua elemen atau property dalam HTML,
cukup mengedit file CSS-nya saja.
1. Cara penulisan CSS
A. Inline Style Sheet
Penulisan
metode ini sangat jarang digunakan karena hampir sama seperti menuliskan property pada tag HTML. Misal,
kita ingin memberikan warna hijau pada
tag <p>, maka cara penulisannya sebagai berikut :
<p style=”color:green”>
B. Embedded Style Sheet
Penulisan
syntax CSS didalam dokumen HTML dengan metode Embedded Style Sheet menggunakan tag <style> dan </style>.
Contoh :
<style type=”text/css”>
H1 { color : red }
</style>
C. Linked Style Sheet
Penulisan
script CSS di halaman yang berbeda atau terpisah dari HTML. Untuk melakukan link ke file CSS yang telah dibuat
digunakan tag <link
rel> yang ditempatkan pada bagian tag <HEAD>.
Contoh penggunaan :
<link href="style.css" rel="stylesheet" type="text/css">
2. Aturan Penulisan CSS
CSS memiliki aturan dalam
penulisannya, yang terdiri atas :
o Selector : yang terdiri dari tag, class dan lain sebagainya. Bagian
pertama sebelum tanda “{ }” itulah yang
dinamakan selector.
o Declaration : untuk mendeskripsikan property dan value yang
akan digunakan pada selector atau
pemisah.
Contoh penggunaan rule :
h1 {
color :#0000FF
}
Keterangan :
o Selector
: h1
o property
: color
o value
: #0000FF
.
Macam-macam Selector
Selector atau pemisah dalam CSS, dibagi menjadi beberapa
bagian,antara lain: o Tag / elemen HTML
Menggunakan
tag yang terdapat pada HTML. Setiap tag yang ada dalam HTML bisa dijadikan selector.
Contoh :
h1 { color : green }
i { font-style : normal }
o Class
Penggunaan selector class akan diawali pengan tanda titik ( . ) di awal penulisannya, kemudian pada tag HTML
ditambahkan class = (nama class)
o ID
Digunakan untuk mendefinisikan tag secara individual atau spesifik
. Penggunaan selector ID akan diawali
dengan tanda pagar ( # ).
Contoh :
#header {
font-size :
20px;
}
Style diatas akan digunakan oleh tag yang mengandung identitas
khusus header, misalnya :
<DIV ID = “header”>
3. CSS Background
Background
dikenal sudah sejak lama sebagai penghias, baik untuk foto, image atau kebutuhan lainnya. Background berlaku
pula untuk penghias halaman web.
Properti CSS background mengizinkan kita untuk mengatur warna, setting image, repeat image secara horizontal maupun
vertikal.
Syntax dasar
:
selector { property : value }
body {
background-color : value; |
background-image : none | url ; |
background-repeat : repeat| repeat-x
|repeat-y; }
Keterangan :
4. CSS Font
Pemilihan font yang baik dalam mendesain web tentunya akan
memberikan nilai keindahan tersendiri
untuk isi web yang dibuat.
Syntax dasar :
selector {
font-size : ( value );
font-family : (value
);
font-style : | normal |
italic | oblique ;
font-variant :normal |
small caps ;
font-weight : normal | bold | bolder | lighter
| 100- 900;
}
5. CSS Teks
Penggunaan CSS untuk text yaitu untuk mengontrol teks, seperti
pengaturan warna, perataan paragraph,
spasi dan lain sebagainya.
Syntax dasar :
selector {
color : value;
text-align : left | right | center | justify ;
text – decoration :
none|underline|overline|line-through|blink ;
text-transform : none|capitalize|uppercase|lowercase ; letter-spacing : value;
text-indent : value;
word-spacing : value;
white-space : normal|pre|nowrap;
}
6. List CSS
6.1.
List-Style-Type
Properti ini digunakan untuk memilih bentuk listyang digunakan
untuk point point teks. Contoh sintaks_nya:
Selector {property : value; }
ul {
list-style-type
: disc | circle | square | decimal |
decimal-leading-zero | lower-roman | upper-roman | lower alpha |
upper-alpha | lower-latin | upper-latin
}
6.2. List-Style-Image
Properti ini digunakan untuk merubah bentuk point list menjadi
sebuah gambar. Untuk icon gunakan image
yang ukurannya kecil atau file dengan extention .ico Selector {property : value; }
ul {
list-style-image : url | none;
}
6.3. List-Style-Position
Properti ini digunakan untuk mengatur apakah list yang kita buat
nanti akan menjorok kedalam atau
menjorok keluar
Selector {property : value; }
ul {
list-style-image : url | none;
list-style-position : inside | outside;
}
7. Border CSS
Border biasa kita gunakan untuk membuat bingkai berupa kotak
untuk mempercantik tampilan suatu
halaman web. Perbedaan antara border dalam
HTML dan CSS adalah jika dalam Html border merupakan property dari
table tapi kalau dalam CSS border dapat
berdiri sendiri. Sintaks dasar :
Selector {property : value; }
.class {
border-style
: dotted | dashed | solid | double | groove |
ridge | inset | outset | none;
}
A. Border Bottom
Mengatur jenis style, tebal,
warna pada border bagian bawah:
Selector {property : value; }
.class {
border-bottom-style
: dotted | dashed | solid | double |
groove | ridge | inset | outset | none;
border-bottom-width :
value(px,cm,mm,in,point,picas,%);
border-bottom-color : value(name,hexa,rgb);
}
Comments
Post a Comment