Banyak dari kita yang masih belum mengerti akan penggabungan antara
file HTML dan File CSS supaya jika kita mengedit file CSS bisa langsung
merubah tampilan file HTML, untuk itu akan saya bahas dalam tulisan saya
kali ini.
Sebenarnya ada 3 macam cara untuk penggabungan , dan itu nanti bisa anda pakai semua tergantung kebutuhan anda.
Dalam membuat penggabungan antara File HTML dan File CSS ada 3 cara yaitu :
1. Inline Style
2. Embedded Style
3. Link Style
Apa itu Inline Style, Embedded Style, Link Style ikuti terus tulisan saya berikut ini.
1. Inline Style
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>
<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>
Anda buat folder baru dengan nama css dan anda simpan code dibawah
ini dan anda simpan ke dalam folder tersebut dengan nama style.css )
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.
Cara ini lebih cocok dan sering digunakan oleh para Web Design karena kemudahannya.
Dengan menggunakan CSS
anda diberi kemudahan untuk mendesign web yang mempunyai banyak
keungulan lebih jika anda mendesign dengan menggunakan HTML saja.
Nah…! Anda tinggal pilih cara mana yang paling cocok menurut cara anda.
sumber: https://rudydevianto.com
0 komentar:
Posting Komentar