1. CSS Inline
Apa itu CSS Inline ? CSS Inline adalah sebuah metode penerapan Css pada Html. Cara penerapan nya adalah dengan cara menuliskan langsung codingan css pada tag html. Contohnya seperti dibawah ini.
<!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 Coder </h1> <p style="background-color:blue;color:yellow;"> Ini Merupakan Contoh CSS Inline </p> </body> </html>
Hasilnya seperti dibawah ini.
2. CSS Internal
Apa itu CSS Internal ? CSS Internal adalah sebuah metode penerapan css pada html yang cara penggunaannya adalah dengan menuliskan codingan css di dalam tag <head>. Berikut ini adalah contohnya.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> CSS Internal </title>
<style>
.yellow {color:yellow;background-color:black;}
.blue {color:red;background-color:black;}
</style>
</head>
<body>
<h1 class="yellow"> Selamat Datang di Blog Freeze Coder </h1>
<p class="blue"> Ini Merupakan Contoh CSS Internal </p>
</body>
</html>
Hasilnya seperti dibawah ini.
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 di tempat yang berbeda dengan file html. Jadi jika ingin menggunakan metode ini, kita harus memiliki 2 file, yaitu file html dengan ekstensi .html dan file css dengan ekstensi .css. Contoh codingan css nya seperti dibawah ini.
.blue {
color:blue;
background-color:yellow;
}
.black {
color:black;
background-color:yellow;
}
Kemudian untuk memanggil file css nya, kita gunakan codingan <link href="style.css" type="text/css" rel="stylesheet">.
Untuk style.css bisa kamu sesuaikan dengan nama file css yang sudah kamu buat.
Untuk contoh codingan html nya seperti dibawah ini.
<!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="blue"> Selamat Datang di Blog Freeze Coder </h1> <p class="black"> Ini Merupakan Contoh CSS Eksternal </p> </body> </html>
Hasilnya seperti dibawah ini