.jpeg)
Hai semuanya, pada kali ini saya akan memberikan tutorial mengenai HTML. Pada artikel sebelumnya, kita sudah membahas mengenai CSS. Sekarang kita akan membahas cara Untuk menghubungkan HTML dengan CSS, kita bisa menggunakan 3 cara. Apa saja caranya ? Simak tutorial nya dibawah ini.
1. CSS Inline
Apa itu CSS Inline ? CSS Inline adalah sebuah metode penerapan CSS pada HTML. Cara penerapan nya adalah dengan menuliskan langsung codingan CSS pada tag HTML. Berikut ini adalah contoh codingannya.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title> CSS Inline </title> </head> <body> <h1 style="color: red;"> Selamat Datang di Blog Freeze Gans </h1> <p style="background-color:blue;color:yellow;"> Ini Merupakan Contoh CSS Inline </p> </body> </html>
Hasilnya seperti dibawah ini
Selamat Datang di Blog Freeze Gans
Ini Merupakan Contoh CSS Inline
2. CSS Internal
Apa itu CSS Internal ? CSS Internal adalah sebuah metode penerapan CSS pada HTML yang cara penggunaan nya adalah dengan menuliskan codingan CSS di dalam tag <head>. Berikut ini adalah contoh codingan nya
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> CSS Internal </title>
<style>
.green {color:green;background-color:black;}
.blue {color:red;background-color:blue;}
</style>
</head>
<body>
<h1 class="green"> Selamat Datang di Blog Freeze Gans </h1>
<p class="blue"> Ini Merupakan Contoh CSS Internal </p>
</body>
</html>Hasilnya seperti dibawah ini
Selamat Datang di Blog Freeze Gans
Ini Merupakan Contoh CSS Internal
3. CSS Eksternal
Apa itu CSS Eksternal ? CSS Eksternal adalah sebuah metode penerapan CSS pada HTML yang cara penggunaan nya adalah dengan cara menuliskan codingan CSS nya di file yang berbeda. Jadi untuk menggunakan cara ini, langkah pertama nya adalah membuat file CSS nya dan menuliskan codingan CSS pada file CSS nya. Untuk file CSS nya kita simpan dengan format .css. Berikut ini adalah contoh codingan css nya.
.blue {color:gray;background-color:yellow;}
.black {color:blue;background-color:black;}
.link {text-decoration:none;}Kemudian untuk memanggil file CSS nya, kita gunakan codingan <link href="style.css" type="text/css" rel="stylesheet">.
Artikel menarik lainnya :
Untuk yang style.css bisa kamu ubah sesuai dengan nama file css yang barusan kamu buat. Berikut ini adalah contoh codingan HTML nya<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title> CSS Eksternal </title> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <h1 class="black"> Selamat Datang di Blog <a class="link" href="https://freezegans.blogspot.com/">Freeze Gans</a> </h1> <p class="blue"> Ini Merupakan Contoh CSS Eksternal </p> </body> </html>
Hasilnya seperti dibawah ini
Selamat Datang di Blog Freeze Gans
Ini Merupakan Contoh CSS Eksternal