Menyisipkan CSS Ke Halaman HTML

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.

Minggu, 26 Februari 2012