Untuk menghubungkan file HTML dengan CSS, Bisa di lakukan dengan 3 cara, adalah Inline Style, Embedded Style, Link Style. Nah untuk terang nya mari kita liat rujukan dibawah ini.
1. Inline Style
Inline Style merupakan cara menghubungkan file CSS pribadi ke dalam element HTML
Berikut rujukan untuk penulisannya.
<html>
<head>
<body style="background-color:#DFDFDF;">
<h1 style="color:red; font-size;15px ;text-align:center;"> Ini rujukan memakai inline style </h1>
</body>
</head>
</html>
2. Internal Style
Internal Style hampir sama dengan Inline Style merupakan cara menghubungkan file CSS Tepat di didalam syntax HTML, Penulisannya sempurna diantara pembuka tag <head> dan epilog tag </head>.
Berikut rujukan untuk penulisannya.
<html>
<head>
<style>
body {
background-color:#DFDFDF;
}
h1 {
text-align:center;
font-family:Century;
font-size:16pt;
}
p {
text-align:left;
font-family:Century;
font-size:14pt;
}
</style>
</head>
<body>
<h1> Contoh Penulisan syntax untuk Internal Style </h1>
<h2>Contoh lain nya dari </h2>
</body>
</html>
Pada rujukan diatas sanggup kita liat Syntax CSS berada sempurna di antara tag pembukan <head> dan tag epilog </head>
3. Eksternal Style
Sama menyerupai nama nya, Eksternal Style merupakan cara menghubungkan file CSS terpisah dengan HTML dan penghubungannya memakai link, Penulisan linknya sempurna berada di antara pembuka tag <head> dan epilog tag head </head>.
Berikut rujukan penulisannya dari file CSS nya.
body {
background-color:#DFDFDF;
}
h1 {
text-align:center;
font-family:Centuryl
font-size:16pt;
}
h2 {
text-align:left;
font-family:Century;
font-size:14pt;
}
File di atas simpan dengan nama file.css ( Nama terserah anda, yang penting ekstensinya .css )
Berikut rujukan penulisan untuk Link penghubung pada HTML nya.
<html>
<head>
<link href="file.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1> Contoh penulisan syntax untuk Eksternal Style </h1>
<h2> </h2>
</body>
</html
Untuk menggabungkan kedua file tersebut memakai Tag <link href=”nama file css yang anda buat” rel=”stylesheet” type=”text/css”>.
Sekian tutorial CSS dasar ihwal Cara menghubungkan CSS dengan HTML, Untuk penggunaan CSS selanjutnya akan saya bahas pada tutorial selanjutnya.
No comments:
Post a Comment