Cara Menginput Instruksi Css Ke Halaman Html

Cara Menginput atau memasukan arahan 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, ibarat untuk menciptakan tabel <table>, untuk menciptakan paragraf <p>, dan lain-lain.

Nah CSS atau Cascading Style Sheet digunakan untuk merancang tag-tag HTML tersebut supaya dapat tampil lebih manis sesuai dengan keingingn kita.

Sekarang bagaimana cara memasukan dan menggabungkan arahan CSS ke dalam HTML.
Secara garis besar, ada 3 cara memasukan arahan 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 arahan CSS secara pribadi ke dalam arahan di dalam HTML dalam ruang lingkup tag <body> dengan memakai atribut style. Berikut pola penggunaan metode Inline Style CSS :

<html>
<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>

Jika script di atas dijalankan di browser, maka akan tampil ibarat di bawah ini :

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>
<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>

Jika script di atas dijalankan di browser, maka akan tampil ibarat di bawah ini :

3. Metode External Style Sheet

Kalau kita perhatikan dua metode di atas yaitu inline style sheet dan internal style sheet, semua arahan css digabung di dalam arahan HTML, sehingga jikalau ada halaman html yang lain, yang memerlukan style yang sama, maka halaman tersebut pun harus memasukan arahan css yang sama. Tentu saja hal ini menciptakan arahan semua halaman html menjadi panjang. Jika ada kesalahan script tentu sangat report bagi seorang web programmer.
Kaprikornus kelemahan dan kekurangan kedua metode tersebut ialah jikalau ingin menciptakan beberapa halaman dengan tampilan yang sama, maka setiap halaman akan mempunyai arahan 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 arahan CSS dari semua arahan HTML, dan masing-masing disimpan di dalam file yang terpisah. Sehingga jikalau file HTML memerlukan arahan css, maka cukup memanggil arahan tersebut dengan memanggil filenya, tidak perlu menuliskan arahan 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 arahan di atas ke dalam sebuah file berjulukan kode.css

Kemudian buat sebuah fie HTML dengan memakai arahan 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>