Cara Menginput atau memasukan instruksi CSS ke dalam halaman HTML
HTML atau Hypertext Markup Language intinya merupakan kumpulan kode-kode dalam bentuk tag yang disusun untuk menampilkan menampilkan objek berupa teks, gambar, audio, dan video, ataupun dokuen lainnya. Tag-tag tersebut dibentuk menurut fungsi dan kegunaannya, menyerupai untuk menciptakan tabel <table>, untuk menciptakan paragraf <p>, dan lain-lain.Nah CSS atau Cascading Style Sheet digunakan untuk merancang tag-tag HTML tersebut semoga dapat tampil lebih manis sesuai dengan keingingn kita.
Sekarang bagaimana cara memasukan dan menggabungkan instruksi CSS ke dalam HTML.
Secara garis besar, ada 3 cara memasukan instruksi CSS ke dalam dokumen HTML yaitu
- Inline Style
- Internal Style
- External Style
1. Metode Inline Style Sheet
Metode Inline Style Sheet merupakan cara memasukan/menginput instruksi CSS secara pribadi ke dalam instruksi di dalam HTML dalam ruang lingkup tag <body> dengan memakai atribut style. Berikut pola penggunaan metode Inline Style CSS :
<html>Jika script di atas dijalankan di browser, maka akan tampil menyerupai di bawah ini :
<head>
<title>Contoh Inline Style CSS</title>
</head>
<body>
<h1 style="background-color:blue; color:white" >
Text ini akan bewarna putih dengan background warna biru
</h2>
</body>
</html>
2. Metode Internal Style Sheets
Metode Internal Style Sheets atau disebut juga Embedded Style Sheets. Dengan metode ini kode CSS dipisahkan dari tag HTML, tetapi nasih tetap ditulis dalam satu halaman HTML.Atribut style yang sebelumnya berada di dalam tag, dikumpulkan pada pada sebuah tag <style>. Tag style ini harus berada pada bab <head></head> dari halaman HTML.
<!DOCTYPE html>Jika script di atas dijalankan di browser, maka akan tampil menyerupai di bawah ini :
<html>
<head>
<title>Contoh Internal Style CSS</title>
<style type="text/css">
h2 {
background-color:red;
color:white;
}
</style>
</head>
<body>
<h2>
Text ini akan bewarna putih dengan latar belakang merah
</h2>
</body>
</html>
3. Metode External Style Sheet
Kalau kita perhatikan dua metode di atas yaitu inline style sheet dan internal style sheet, semua instruksi css digabung di dalam instruksi HTML, sehingga bila ada halaman html yang lain, yang memerlukan style yang sama, maka halaman tersebut pun harus memasukan instruksi css yang sama. Tentu saja hal ini menciptakan instruksi semua halaman html menjadi panjang. Jika ada kesalahan script tentu sangat report bagi seorang web programmer.
Makara kelemahan dan kekurangan kedua metode tersebut yakni bila ingin menciptakan beberapa halaman dengan tampilan yang sama, maka setiap halaman akan mempunyai instruksi CSS yang sama.
Untuk mengatasi kekurangan dan kelemahan kedua metode di atas, maka diciptkanlah metode yang ketiga yaitu Metode External Style Sheets.
Metode External Style Sheets memisahkan semua instruksi CSS dari semua instruksi HTML, dan masing-masing disimpan di dalam file yang terpisah. Sehingga bila file HTML memerlukan instruksi css, maka cukup memanggil instruksi tersebut dengan memanggil filenya, tidak perlu menuliskan instruksi css-nya.
Sebagai contoh, kita gabungkan format css dari dua metode sebelumnya, dan disimpan dalam sebuah file yang ber-extensi css.
h1 {
background-color:blue;
color:white;
}
h2 {
background-color:red;
color:white;
}
simpan instruksi di atas ke dalam sebuah file berjulukan kode.css
Kemudian buat sebuah fie HTML dengan memakai instruksi css yang ada di dalam file kode.css
dan disimpan di dalam folder yang sama dengan file kode.css.
Bagaimana cara memanggil file kode.css?
Ada 2 cara memanggil file css dari sebuah halaman html.Yang pertama dengan memakai tag <link>
<html>
<head>
<title>Contoh External Style CSS</title>
<link rel="stylesheet" type="text/css" href="kode.css"></head>
<body>
<h1> Judul ini ini bewarna putih dan background warna biru</h1>
<h2> Sub Judul ini bewarna putih dan background warna merah </h2>
</body>
</html>
Yang kedua dengan memakai tag <style> dan @import url(file.css)
<html>
<head>
<title>Contoh External Style CSS</title>
<style type="text/css">
@import url(kode.css);
</style>
</head>
<body>
<h1> Judul ini ini bewarna putih dan background warna biru</h1>
<h2> Sub Judul ini bewarna putih dan background warna merah </h2>
</body>
</html>
EmoticonEmoticon