CSS Eksternal

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 8 dari 76.

External CSS adalah cara menambahkan gaya CSS ke dokumen HTML dengan menempatkannya dalam file CSS terpisah dan menghubungkan file tersebut ke dokumen HTML menggunakan tag <link>. Pendekatan ini memungkinkan kamu menerapkan gaya yang sama ke beberapa halaman HTML, sehingga desain situs webmu lebih mudah dipelihara dan diperbarui. External CSS cocok untuk proyek besar yang mengutamakan konsistensi dan efisiensi.

Berikut cara menggunakan CSS eksternal:

Buat file CSS (misalnya, styles.css) yang berisi aturan CSS:

body {
    background-color: lightblue;
}
p {
    color: blue;
    font-size: 16px;
}

2. Tautkan file CSS ke dokumen HTML-mu dengan menambahkan tag <link> di bagian <head>:

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Dalam contoh ini, tag <link> menghubungkan file styles.css ke dokumen HTML. Atribut rel menentukan hubungan antara dokumen HTML dan file yang ditautkan (stylesheet), sedangkan atribut href menentukan jalur ke file CSS.

Tantangan

Mudah

Kamu diberi file HTML dan CSS (index.html dan styles.css). Tambahkan tag link di file HTML untuk menghubungkan kedua file tersebut, lalu tambahkan style ke file HTML!

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>