Inline Style adalah cara penulisan file CSS secara langsung kedalam Tag HTML, berikut ini contoh penulisan Inline Style:
<html>
<head>
<title>Penggabungan File HTML dan CSS</title>
</head>
<body>
<p>
<h2 style=”color:#FFCC00″>Contoh untuk Inline Style
</p>
</h2
</body>
</html>
Keterangannya : tulisan ‘
Style ‘ itu merupakan perintah CSS untuk tulisan di H2 supaya warna font
di rubah menjadi warna #FFCC00 ( Orange )
2.Embedded Style
Embedded Style merupakan cara penulisan CSS kedalam file HTML per halaman ( Page )
Berikut ini contoh penulisannya :
<html>
<head>
<title>Penggabungan File HTML dan CSS</title>
<style type=”text/css”>
h2{
color:#FFCC00;
background:#CC0000;
}
</style>
</head>
<body>
<p>
<h2>Contoh untuk Embedded Style
</p>
</h2>
</body>
</html>
Seperti anda lihat contoh
penulisan diatas untuk Embedded Style penulisan CSS di antara
<head>…</head> disini tulisan CSS langsung di eksekusi oleh
browser dan untuk type seperti ini cocok untuk website yang halamannya
tidak banyak misalnya untuk company profil dll.
Untuk yang lebih komplek cocoknya menggunakan Link Style yang akan kita bahas di bawah ini.
3.Link Style
Untuk penulisan Link Style
merupakan penulisan secara terpisah antara file HTML dan file CSS dan
kita tinggal memasang link saja, dan pemasangan Link anda bisa taruh di
antara <head>…</head>.
Berikut ini contoh penulisannya.
File HTML : ( anda simpan dengan nama index.html )
<html>Anda buat folder baru dengan nama css dan anda simpan code dibawah ini dan anda simpan ke dalam folder tersebut dengan nama style.css )
<head>
<title>Penggabungan File HTML dan CSS</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<p>
<h2>Contoh untuk Link Style
</p>
</h2>
</body>
</html>
h2{
color: #FFCC00;
background: #CC0000;
}
Anda bisa melihat hasilnya dengan membuka file index.html pada browser anda dengan menklik 2 kali.
Anda masih bisa membuat file
html dengan memberi nama yang lain dan letakkan di antara
<head>…</head> anda beri linkini:
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
Dan anda bisa merubah tampilan
seluruh halaman hanya dengan mengedit file style.css maka seluruh file
juga ikut berubah mengikuti apa yang anda rubah.
Tidak ada komentar:
Posting Komentar