CSS sendiri bisa di artikan suatu kumpulan kode-kode untuk mengatur format atau tampilan suatu halaman HTML. CSS digunakan untuk mengumpulkan suatu blok perintah pemformatan yang sering dilakukan berulang-ulang sehingga dapat mempercepat proses kerja pendesainan halaman web. CSS dapat juga digunakan untuk membuat efek-efek dinamis dan atraktif yang tidak mungkin dilakukan oleh HTML biasa. Sejak pertama kali di publikasikan pada tahun 1996, CSS sudah mengalami perkembangan dari CSS 1 sampai yang terbaru yaitu CSS 3.
Kekurangan atau kelemahan dari penggunaan CSS adalah tidak semua browser mengartikan kode CSS dengan cara yang sama, artinya tampilan web dengan CSS yang terlihat baik di browser yang satu, bisa terlihat berantakan di browser lainnya. Jadi kita harus memeriksa tampilan web di semua browser untuk memeriksa tampilan agar terlihat baik dan menambahkan kode-kode tertentu jika dibutuhkan agar tampilan web terlihat baik di semua browser.
Syntax
CSS.
Syntax/perintah dalam CSS terdiri atas selector, property dan value.
Format penulisan syntax
CSS :
h2 { color : green;
}
h2
dari syntax di atas adalah selector, color adalah property dan green adalah valuenya.
Untuk menggunakan CSS ada beberapa cara yang bisa dilakukan antara lain :
a.
Inline CSS.
Kode
CSS dituliskan langsung dengan menambahkan atribut style=”..” pada tag tersebut. Style hanya akan mempengaruhi tag
yang bersangkutan dan tidak mempengaruhi
tag lainnya. Cara ini dilakukan jika
kita ingin memformat suatu elemen satu kali saja.
Kode:
Hasilnya:
b. Embedded CSS.
Kode
CSS di letakkan di antara tag <head>...</head>
Contoh : Kode:
save kode di atas, jalankan di browser
c.
Ekternal CSS.
Kode
CSS di tulis dalam satu file terpisah dengan ekstensi *.css, yang kemudian akan
kita panggil ke dalam halaman web yang yang kita buat. Cara ini lebih praktis karena kita hanya membutuhkan satu set kode
CSS untuk semua halaman web kita. Langkah-langkahnya
sebagai berikut:
-Buatlah satu file
dengan text editor (notepad, notepad++ dll) berisakan kode-kode CSS,lalu save
as dengan ekstensi .css, misalnya meong.css
kode:
body {background:#a5f962;
color:#FFFF00;
margin-left:0.5in}
h1 {font-size:18pt; color:#000fff}
p {font-size:12pt;
font-family:arial;
color:red; text-indent:0.5in}
Langkah selanjutnya adalah memanggil
file meong.css yang telah kita buat tadi dari halaman web yang akan kita
format. Caranya adalah dengan memasukkan kode dibawah ini di antara tag
<head>
kjalankan dibrowser dan liat hasilnya.
Class dan ID selector
Class selector adalah
selector yang dapat di gunakan oleh lebih dari satu tag HTML, artinya beberapa
tag HTML bisa menggunakan css dari class tersebut. Contohnya :
Kode CSS:
|
.tulisan{
font-size:17px;
color=blue;
}
|
Penggunaan pada HTML:
|
<h1 class=”tulisan”> contoh class
selector</h1>
<div class=”tulisan”>ini juga contoh class
selector</div>
|
Sedangkan ID selector adalah selector yang hanya
digunakan untuk satu tag HTML saja, biasanya digunakan untuk memformat tag HTML
yang kegunanannya hanya sekali saja, misalnya header,wrapper,menu navigasi dan
lain-lain.
Kode CSS:
|
#header {
background-color:green;
width:900px;
height:50px;
}
|
Penggunaan pada HTML
|
<div id=”header”> </div>
|
Tidak ada komentar:
Posting Komentar