Menyematkan CSS

Menyematkan CSS dengan Tag <style>

Anda dapat menyematkan CSS secara langsung ke dalam dokumen HTML menggunakan tag <style>. Berikut contohnya:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh CSS Internal</title>
    <style>
        /* Ini adalah CSS internal */
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
        }
        p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Selamat Datang!</h1>
    <p>Ini adalah contoh penggunaan CSS internal.</p>
</body>
</html>

Menyematkan CSS dengan File Eksternal

Lebih umumnya, Anda akan menyimpan CSS dalam file terpisah dan menyematkannya ke dalam dokumen HTML menggunakan tag <link>. Berikut contohnya:

  1. Buat file CSS terpisah dengan ekstensi .css, misalnya style.css. Isi file tersebut dengan aturan CSS:
/* style.css */
body {
    background-color: lightblue;
}
h1 {
    color: navy;
}
p {
    font-size: 18px;
}
  1. Kemudian, dalam dokumen HTML Anda, tambahkan tag <link> di dalam bagian <head> untuk menghubungkan file CSS:
<!DOCTYPE html>
<html>
<head>
    <title>Contoh CSS Eksternal</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Selamat Datang!</h1>
    <p>Ini adalah contoh penggunaan CSS eksternal.</p>
</body>
</html>

Dengan cara ini, Anda dapat dengan mudah mengelola dan memodifikasi gaya tampilan situs web Anda secara terpusat dalam file CSS eksternal. Semoga tutorial ini bermanfaat!

PREVIOUS
NEXT