Belajar Koding HTML & CSS Bagian 2: Dasar - Dasar Utama Syntax CSS - Squfi Seputar Teknologi, Animasi dan Game

Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mengatur tampilan dan format elemen dalam dokumen HTML. Dengan CSS, Anda dapat mengendalikan warna, font, ukuran, dan tata letak elemen di halaman web.

Dalam pengembangan web, terdapat tiga cara utama untuk menyisipkan kode CSS ke dalam dokumen HTML:

Inline CSS: Kode CSS ditulis langsung pada atribut style di dalam elemen HTML tertentu.

Contoh:

<p style="color: blue; font-size: 16px;">Teks ini berwarna biru dan berukuran 16 piksel.</p>

Metode ini cocok untuk penyesuaian gaya pada elemen individual, namun kurang efisien jika digunakan secara luas karena sulit dalam pemeliharaan kode.

Internal CSS: Kode CSS ditulis di dalam tag <style> yang ditempatkan di bagian <head> dari dokumen HTML.

Contoh:

<!DOCTYPE html>

<html>

<head>

<title>Contoh Internal CSS</title>

<style>

p {

color: red;

font-size: 18px;

}

</style>

</head>

<body>

<p>Paragraf ini berwarna merah dan berukuran 18 piksel.</p>

</body>

</html>

Tampilan Hasil (Output) Internal CSS

Metode ini memudahkan pengaturan gaya untuk satu halaman secara keseluruhan, namun jika digunakan pada banyak halaman, pemeliharaan kode bisa menjadi lebih sulit.

External CSS: Kode CSS ditulis dalam file terpisah dengan ekstensi .css, kemudian dihubungkan ke dokumen HTML menggunakan tag <link> di dalam bagian <head>.

Contoh file CSS (style.css):

p {

color: green;

font-size: 20px;

}

Contoh file HTML (latihan1.html)

<!DOCTYPE html>

<html>

<head>

<title>Contoh External CSS</title>

</head>

<body>

<p>Paragraf ini berwarna hijau dan berukuran 20 piksel.</p>

</body>

</html>

Tampilan Hasil (Output) External CSS

Metode ini sangat efisien untuk proyek dengan banyak halaman, karena memungkinkan konsistensi gaya dan memudahkan pemeliharaan kode.

Dalam memilih metode yang tepat, pertimbangkan kebutuhan proyek Anda. Untuk proyek kecil atau perubahan spesifik, Inline CSS mungkin cukup. Namun, untuk proyek yang lebih besar dengan banyak halaman, penggunaan External CSS lebih disarankan untuk menjaga konsistensi dan kemudahan pemeliharaan kode.

Setelah memahami tiga metode utama dalam menyisipkan CSS ke dalam HTML—Inline CSS, Internal CSS, dan External CSS—penting untuk mengetahui kelebihan dan kekurangan masing-masing metode agar dapat memilih pendekatan yang paling sesuai dengan kebutuhan proyek Anda.

Perbandingan Metode Penyisipan CSS:

Metode CSS	Kelebihan	Kekurangan	Contoh Penggunaan
Inline CSS	- Mudah dan cepat untuk menerapkan gaya pada elemen spesifik. - Tidak memerlukan file tambahan.	- Sulit dikelola pada proyek besar karena kode gaya bercampur dengan konten. - Tidak efisien untuk perubahan global.	<p style="color: blue;">Teks biru</p>
Internal CSS	- Memungkinkan pengaturan gaya untuk seluruh halaman tanpa file eksternal. - Cocok untuk halaman tunggal dengan gaya unik.	- Tidak efisien untuk situs dengan banyak halaman karena kode CSS harus diulang pada setiap halaman. - Meningkatkan ukuran file HTML.	html<br><head><br> <style><br> p { color: red; }<br> </style><br></head><br>
External CSS	- Memisahkan konten dan presentasi, membuat kode lebih terstruktur. - Memungkinkan penggunaan kembali gaya di beberapa halaman, meningkatkan konsistensi dan efisiensi. - Mempercepat waktu muat halaman melalui caching.	- Memerlukan permintaan HTTP tambahan untuk memuat file CSS eksternal. - Jika file CSS tidak dimuat dengan benar, halaman mungkin tampil tanpa gaya.	html<br><head><br> <link rel="stylesheet" href="styles.css"><br></head><br>

Rekomendasi:

Proyek Kecil atau Perubahan Spesifik: Gunakan Inline CSS untuk penyesuaian cepat pada elemen individu.
Halaman Tunggal dengan Gaya Khusus: Internal CSS cocok untuk mengatur gaya unik pada satu halaman tanpa memerlukan file eksternal.
Situs Web dengan Banyak Halaman: External CSS adalah pilihan terbaik untuk konsistensi dan kemudahan pemeliharaan, memungkinkan satu file CSS digunakan di berbagai halaman.