Skip to Content
LearningCSSPenulisan CSS

Penulisan CSS

CSS dapat ditulis menggunakan 3 cara penulisan.

  1. Inline CSS
  2. Internal CSS
  3. Eksternal CSS

Inline CSS

Inline CSS artinya hanya digunakan untuk menerapkan style pada elemen tertentu saja, dalam satu baris kode. Maka dari itu disebut ‘inline’.

Untuk menggunakan Inline CSS, tambahkan atribut style pada elemen yang relevan. Atribut style dapat berisi properti CSS apapun.

Contoh:

<!DOCTYPE html>
<html>
<body>
 
<h1 style="color:blue;text-align:center;">Ini adalah Judul</h1>
<p style="color:blue; font-size:18px;">Ini adalah paragraf dengan gaya inline.</p>
 
</body>
</html>

Dalam contoh di atas, kita menambahkan atribut style pada tag <p> untuk memberi warna biru pada teks dan menetapkan ukuran font menjadi 18px.

Kelebihan dan Kekurangan Gaya Inline

  • Kelebihan: Gaya inline cocok digunakan untuk memberi gaya yang unik hanya pada satu elemen tanpa mengubah file CSS eksternal atau tag <style>.

  • Kekurangan: Gaya inline tidak praktis jika Anda ingin mengubah banyak elemen dengan gaya yang sama. Dalam kasus tersebut, menggunakan file CSS terpisah lebih efisien dan mudah dikelola.

Meskipun gaya inline memberikan cara cepat dan mudah untuk mendesain elemen, sangat disarankan untuk menggunakan CSS terpisah (file eksternal atau tag <style>) untuk menjaga kebersihan dan keteraturan kode, terutama untuk proyek web yang lebih besar.

Internal CSS

Penulisan secara Internal artinya menyisipkan CSS di dalam file HTML secara langsung.

Internal CSS didefinisikan di dalam elemen <style>, yang terletak di dalam bagian <head> sebuah file HTML.

Internal CSS dapat digunakan jika suatu halaman HTML dikhususkan memiliki style yang unik, berbeda dari halaman HTML lainnya.

Lihat contoh berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Halaman dengan Internal Style</title>
    <style>
        body {
            background-color: lightgray;
            font-family: Arial, sans-serif;
        }
 
        h1 {
            color: darkblue;
            text-align: center;
        }
 
        p {
            color: darkgreen;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Judul Utama</h1>
    <p>Ini adalah paragraf yang menggunakan gaya dari internal style sheet.</p>
</body>
</html>

  • <style>: Elemen yang digunakan untuk menulis aturan CSS di dalam file HTML.

  • Elemen CSS seperti body, h1, dan p mengatur style untuk elemen-elemen tersebut di halaman HTML.

  • Style seperti background-color, font-family, dan color diterapkan ke elemen yang relevan sesuai dengan tag yang ditentukan.

Kelebihan dan Kekurangan Internal Style Sheet

  • Kelebihan: Internal style sheet sangat berguna ketika hanya satu halaman yang memerlukan gaya unik, tanpa perlu membuat file CSS terpisah.

  • Kekurangan: Internal style sheet tidak ideal untuk situs web besar dengan banyak halaman karena gaya hanya berlaku untuk satu halaman. Menggunakan file CSS eksternal lebih efisien untuk konsistensi di seluruh situs.

Dengan menggunakan Internal style sheet, Anda dapat mengatur gaya khusus untuk halaman tertentu dengan mudah, tanpa mengganggu gaya di halaman lainnya.

Eksternal CSS

Penulisan Eksternal CSS artinya kode CSS ditulis pada sebuah file khusus berekstensi (.css), di luar file HTML.

Dengan menggunakan Eksternal CSS, Anda dapat mengubah tampilan seluruh situs web hanya dengan mengubah satu file!

Setiap halaman HTML harus menyertakan referensi ke file Eksternal CSS di dalam elemen <link>, yang terletak di dalam bagian <head>.

Lihat contoh berikut:

  1. File HTML yang berekstensi .html
<!DOCTYPE html>
<html>
<head>
    <title>Halaman dengan External Style</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Judul Utama</h1>
    <p>Ini adalah paragraf yang menggunakan gaya dari external style sheet.</p>
</body>
</html>
  1. File style.css isinya seperti berikut ini:
body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
}
 
h1 {
    color: darkblue;
    text-align: center;
}
 
p {
    color: darkgreen;
    font-size: 18px;
}

  • Elemen <link> digunakan untuk menghubungkan halaman HTML dengan file CSS eksternal.

  • Atribut href menunjukkan lokasi file CSS eksternal yang digunakan, dalam hal ini, file styles.css.

  • Style seperti background-color, font-family, color, dan font-size diterapkan ke elemen-elemen yang relevan di file HTML.

Kelebihan dan Kekurangan External Style Sheet

  • Kelebihan: External style sheet sangat efisien karena gaya hanya ditulis di satu tempat dan dapat diterapkan ke banyak halaman HTML. Ini sangat berguna untuk situs web besar yang memiliki banyak halaman, memungkinkan perubahan gaya yang konsisten di seluruh situs dengan mengubah satu file CSS.

  • Kekurangan: Untuk halaman HTML yang hanya memiliki satu gaya unik, menggunakan file CSS terpisah mungkin terasa berlebihan. Namun, untuk situs besar, ini adalah metode yang sangat disarankan.

Dengan menggunakan Eksternal CSS, Anda dapat menjaga kode HTML tetap bersih dan terorganisir, serta memudahkan pemeliharaan dan pembaruan tampilan seluruh situs, hanya dalam 1 (satu) file CSS saja.

Last updated on
PendahuluanSelector