3.ExternalCSS
html :
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh External CSS</title>
<link rel="stylesheet" href="styles.css"> <!-- Menghubungkan file CSS eksternal -->
</head>
<body>
<h1>3.Pengertian External CSS</h1>
<h2>Apa itu External CSS?</h2>
<p>External CSS adalah metode penulisan CSS yang diletakkan di dalam file terpisah dengan ekstensi .css. File CSS ini kemudian dihubungkan ke dokumen HTML menggunakan tag <code><link></code>. Gaya yang ditentukan di sini dapat digunakan di beberapa halaman.</p>
<h2>Keuntungan External CSS</h2>
<p>1. Memudahkan pengelolaan gaya untuk banyak halaman.</p>
<p>2. Mengurangi ukuran file HTML, sehingga lebih cepat dimuat.</p>
<p>3. Memungkinkan penggunaan kembali gaya di berbagai halaman.</p>
<p class="external">Ini adalah contoh teks dengan External CSS.</p>
</body>
</html>
style.css :
/* styles.css */
/* Gaya untuk seluruh halaman */
body {
font-family: Arial, sans-serif;
background-color: #d0baa4;
padding: 20px;
}
/* Gaya untuk elemen h1 */
h1 {
color: rgb(81, 144, 253);
}
/* Gaya untuk elemen h2 */
h2 {
color: darkgreen;
}
/* Gaya untuk elemen p */
p {
color: black;
line-height: 1.6;
}
/* Gaya untuk elemen dengan kelas external */
.external {
color: red;
font-weight: bold;
}
0 komentar:
Posting Komentar