Inline CSS adalah kode CSS yang dituliskan di dalam file HTML. Jenis CSS ini hanya mempengaruhi satu baris kode HTML.
Perhatikan contoh berikut :
<!DOCTYPE html>
<html>
<head>
</head>
<title>Mozza Page's</title>
<body>
<h2 style="background-color: violet; font-family: Times New Roman;">HAllO GUYS</h2>
</body>
</html>
kemudian hasilnya akan menjadi sprti ini :
2. Internal CSS
Internal CSS adalah kode CSS yang ditulis di dalam tag <style> dan kode HTML dituliskan di bagian atas (header) file HTML. Internal CSS dapat digunakan untuk membuat tampilan pada satu halaman website dan tidak digunakan pada halaman website yang lain.
contoh codingan sbg berikut ;
<html>
<head>
<style>
#color{
background-color : palegreen; color: red;
}
</style>
</head>
<body>
<h2 id="color">contoh internal</h2>
</body>
</html>
lalu hasilnya outputnya akan menampilkan ;
3. External CSS
Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML Eksternal CSS ditulis di sebuah file khusus yang berekstensi .css. File eksternal CSS biasanya diletakkan setelah bagian <head> pada halaman.
Berikut ini adalah contoh penempatan External CSS pada file HTML. Sebagai contoh saya membuat file CSS dengan nama style.css berikut isi kode style.css :
.merah{
display: inline-block;
width: 100px;
height: 100px;
border: 5px solid;
margin-top: 20px;
margin-bottom: 30px;
margin-right: 30px;
text-align: center;
background-color: red;
border-color: black;
}
.kuning{
display: inline-block;
width: 100px;
height: 100px;
border: 5px solid;
margin-top: 20px;
margin-bottom: 30px;
text-align: center;
background-color:yellow;
border-color: black;
}
.hijau{
display: inline-block;
width: 100px;
height: 100px;
border: 5px solid;
margin-top: 20px;
margin-bottom: 30px;
margin-right: 30px;
text-align: center;
background-color: green;
border-color: black;
}
.biru{
display: inline-block;
width: 100px;
height: 100px;
border: 5px solid;
margin-top: 20px;
margin-bottom: 30px;
text-align: center;
background-color: blue;
border-color: black;
}
Untuk menggunakan file style.css dalam HTML, Anda perlu menambahkannya ke dalam file HTML. Dengan menggunakan tag <link> berikut contohnya.
<link rel="stylesheet" type="text/css" href="style.css">
Berikut ini penempatan kode dalam satu file HTML :
<html>
<head>
<meta charset="UTF-8">
<title>belajar membuat kotak dengan div</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="merah">
<p>merah</p>
</div>
<div class="kuning">
<p>kuning</p>
</div>
<br>
<div class="hijau">
<p>hijau</p>
</div>
<div class="biru">
<p>biru</p>
</div>
</body>
</html>
No comments:
Post a Comment