Cara Menginput atau memasukan kode CSS ke dalam halaman HTML
HTML atau Hypertext Markup Language pada dasarnya 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 dibuat berdasarkan fungsi dan kegunaannya, seperti untuk membuat tabel <table>, untuk membuat paragraf <p>, dan lain-lain.Nah CSS atau Cascading Style Sheet digunakan untuk merancang tag-tag HTML tersebut agar bisa tampil lebih bagus sesuai dengan keingingn kita.
Sekarang bagaimana cara memasukan dan menggabungkan kode CSS ke dalam HTML.
Secara garis besar, ada 3 cara memasukan kode 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 kode CSS secara langsung ke dalam kode di dalam HTML dalam ruang lingkup tag <body> dengan menggunakan atribut style. Berikut contoh penggunaan metode Inline Style CSS :
<html>Jika script di atas dijalankan di browser, maka akan tampil seperti 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 bagian <head></head> dari halaman HTML.
<!DOCTYPE html>Jika script di atas dijalankan di browser, maka akan tampil seperti 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 kode css digabung di dalam kode HTML, sehingga jika ada halaman html yang lain, yang memerlukan style yang sama, maka halaman tersebut pun harus memasukan kode css yang sama. Tentu saja hal ini membuat kode semua halaman html menjadi panjang. Jika ada kesalahan script tentu sangat report bagi seorang web programmer.
Jadi kelemahan dan kekurangan kedua metode tersebut adalah jika ingin membuat beberapa halaman dengan tampilan yang sama, maka setiap halaman akan memiliki kode 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 kode CSS dari semua kode HTML, dan masing-masing disimpan di dalam file yang terpisah. Sehingga jika file HTML memerlukan kode css, maka cukup memanggil kode tersebut dengan memanggil filenya, tidak perlu menuliskan kode 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 kode di atas ke dalam sebuah file bernama kode.css
Kemudian buat sebuah fie HTML dengan menggunakan kode 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 menggunakan 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 menggunakan 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>
