Berikut ini tiga cara untuk menggabungkan file HTML dengan CSS:
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 </h2>
</p>
</body>
</html>
<head>
<title> Penggabungan File HTML dan CSS </title>
</head>
<body>
<p>
<h2 style="color : #FFCC00"> Contoh untuk inline style </h2>
</p>
</body>
</html>
2. Embedded Style
Embedded style merupakan cara penulisan CSS kedalam file HTML perhalaman (page) dan penulisan file CSS sebelum .... tag </head>
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 </h2>
</p>
</h2>
</body>
</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 </h2>
</p>
</h2>
</body>
</html>
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 diantara <head>... </head>.
Untuk cara link style ini yang banyak digunakan oleh para Web Design atau programmer karena cara Link Style adalah cukup satu kali penulisan file CSS yang nantinya dipakai oleh seluruh halaman Website.
Biasanya para Web Designer menamai file Link Style CSS dengan nama style.css
Berikut ini contoh file nya:
<html>
<head>
<title> Penggabungan File HTML dan CSS </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>
<h2> Contoh untuk link style </h2>
</p>
</body>
</html>
File CSS biasanya disimpan dengan ekstensi .css atau dengan nama style.css.
<head>
<title> Penggabungan File HTML dan CSS </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>
<h2> Contoh untuk link style </h2>
</p>
</body>
</html>
h2 {
color : #FFCC00;
background : #CC0000;
}
Catatan :color : #FFCC00;
background : #CC0000;
}
- Untuk menyimpan link ke file style.css penempatannya harus diantara <head>... </head>
- Anda bisa membuat file.css lebih dari satu sesuai dengan kebutuhan
Tidak ada komentar:
Posting Komentar