CSS adalah singkatan dari "Cascading Style Sheets". CSS digunakan untuk mengendalikan tampilan dan gaya elemen-elemen HTML dalam halaman web. Ini memungkinkan Anda untuk mengubah warna, ukuran, jenis huruf, tata letak, dan banyak aspek tampilan lainnya dari elemen-elemen HTML tanpa harus mengubah struktur atau konten asli dari halaman web.
Ada 3 jenis css :
1. Internal CSS
Internal CSS digunakan dengan menempatkan kode CSS langsung di dalam tag <style> dalam dokumen HTML. Ini berarti kode CSS hanya berlaku untuk halaman web tersebut.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh CSS Internal</title>
</head>
<body>
<style>
body {
background-color: black;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
p {
color: white;
font-size: 24px;
}
</style>
<h1>Ini heading</h1>
<p>Ini paragraf</p>
</body>
</html>
2. External CSS
Eksternal CSS digunakan dengan menyimpan kode CSS dalam file terpisah dengan ekstensi .css, dan kemudian menghubungkannya ke halaman HTML menggunakan tag <link>.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh CSS External</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h1>Ini heading</h1>
<p>Ini paragraf</p>
</body>
</html>
body {
background-color: black;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
p {
color: white;
font-size: 24px;
}
3. Inline CSS
Inline CSS digunakan dengan menambahkan atribut style ke elemen HTML individual. Ini akan mengganti gaya yang mungkin telah ditetapkan dalam CSS eksternal atau internal.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh CSS Inline</title>
</head>
<body>
<p style="color: red; font-size: 16px;">Teks</p>
</body>
</html>
.png)
.png)
.png)
Komentar
Posting Komentar