AstroDigi.com | Selasa, 1 Mar 2011 | CSS (Cascading Style Sheet) adalah kumpulan perintah yang berfungsi untuk mengatur huruf (font, size, style, color, dll) dan mengatur warna yang digunakan pada halaman HTML. Anda bisa mendapatkan banyak pilihan file CSS baik dengan mendownload atau mendapatkannya bersamaan dengan template HTML.
Ada dua cara untuk menyisipkan CSS yaitu:
Pertama: Menyisipkan secara internal
Sisipkan CSS diantara <head> dan </head> dengan perintah sebagai berikut:
<style type="text/css">
. . . . baris perintah CSS . . . .
</style>
Contoh:
<head>
<style type="text/css">
.bot {
color : #000000;
margin-top : 20px;
padding-bottom : 10px;
margin-bottom : 0px;
margin-left : 200px;
margin-right : 10px;
font-size : 11px;
font-family : Tahoma,Verdana,Arial;
font-weight: bold;
}
.bot a {
color : #000000;
text-decoration: none;
}
.bot a:hover {
color : #294A7B;
}
</style>
</head>
Pada penggunaannya anda tinggal mengawali penulisan text di HTML dengan <p
class="bot"> dan mengakhirinya dengan </p> . Maka semua text akan diperlakukan seperti pada perintah CSS tersebut yaitu:
Font=Tahoma/Verdana/Arial
Ukuran Font=11
Margin=200pixel (kiri), 10pixel (kanan), 10pixel (atas) dan 0 (bawah)
Warna Huruf=#000000 (=hitam)
Warna Bila Dilewati Mouse=#294A7B (=abu-abu agak kebiruan)
Ketebalan Font=Bold (=tebal)
Kedua: Menyisipkan secara eksternal
Copy semua perintah CSS dan simpan dalam sebuah file, dan beri nama dengan ekstensi .CSS , misalnya Hurufku.CSS dan simpan satu folder dengan halaman HTML (catatan: bagi yang sudah cukup mengerti, bisa juga difolder lain asal dituliskan juga lokasi foldernya).
Sisipkan CSS diantara <head> dan </head> dengan perintah sebagai berikut:
<link rel="stylesheet" type="text/css" href="Hurufku.CSS">
Jadi bila dalam kasus ini anda menyimpan perintah CSS seperti pada contoh pertama diatas:
.bot {
color : #000000;
margin-top : 20px;
padding-bottom : 10px;
margin-bottom : 0px;
margin-left : 200px;
margin-right : 10px;
font-size : 11px;
font-family : Tahoma,Verdana,Arial;
font-weight: bold;
}
.bot a {
color : #000000;
text-decoration: none;
}
.bot a:hover {
color : #294A7B;
}
Dalam sebuah text file dengan nama Hurufku.CSS, maka hasilnya akan sama juga dengan cara pertama tadi.
Jadi anda bisa merubah CSS internal menjadi CSS eksternal ataupun sebaliknya dengan petunjuk diatas.
Selamat mencoba . . . have a nice day :)
www.AstroDigi.com (Nino Guevara Ruwano)
Slam kenal ??
aq baru belajar buat blogg
tutornya sangat membantu
baru saja aq lihat tutor ini
kini blogg ku ada perubahan
Salam kenal juga bung Masanet :) senang sekali bila artikel ini bisa bermanfaat . . akan menyusul artikel-artikel tentang HTML yang lain, silakan ikuti terus :)