HTML | Internal, External, Inline Pada Css
Apa Itu CSS?
CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk mengatur tampilan dan gaya elemen-elemen HTML dalam sebuah dokumen web. CSS memungkinkan Anda untuk mengontrol warna, ukuran, jenis font, jarak, posisi, dan banyak aspek lain dari tampilan elemen-elemen HTML di halaman web Anda.
Dengan menggunakan CSS, Anda dapat memisahkan tata letak dan styling dari konten HTML, sehingga memudahkan perawatan dan pembaruan situs web Anda. Ini juga memungkinkan Anda untuk membuat tampilan yang konsisten di seluruh situs web Anda dengan hanya mengedit satu file CSS, tanpa perlu mengubah HTML setiap halaman.
Tipe Pada CSS
CSS Memiliki 3 Tipe, Yaitu:
1. Internal
CSS internal merujuk pada penggunaan CSS yang disisipkan secara langsung di dalam dokumen HTML yang sama, baik dalam elemen
<style> di dalam bagian <head> dokumen HTML atau dalam atribut style elemen HTML itu sendiri. Dalam penggunaan CSS internal, gaya dan aturan CSS ditentukan di dalam dokumen HTML yang sama, sehingga hanya memengaruhi elemen-elemen dalam dokumen itu.Contoh CSS Internal:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<!-- CSS Internal -->
<style>
h1 {
font-size: small;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
2. External
CSS external adalah metode penggunaan Cascading Style Sheets (CSS) di mana aturan CSS disimpan dalam file terpisah dari dokumen HTML. File CSS ini kemudian dihubungkan (linked) ke dokumen HTML menggunakan elemen
<link> di bagian <head> dokumen HTML. Dengan menggunakan CSS eksternal, Anda dapat memisahkan tata letak dan gaya dari konten HTML, membuatnya lebih mudah untuk merawat, memperbarui, dan memanage tampilan situs web yang lebih besar.Contoh CSS External:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<!-- Menyambungkan Ke File CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
File CSS:
h1 {
font-size: small;
}
3. External
CSS inline merujuk pada penggunaan aturan CSS yang disisipkan secara langsung di dalam atribut
style dari elemen HTML. Ini berarti Anda menentukan gaya untuk elemen HTML tertentu dalam halaman web itu sendiri, langsung di dalam tag HTML yang sesuai. CSS inline memiliki prioritas tertinggi dalam kaskade CSS, yang berarti aturan CSS inline akan menggantikan aturan CSS yang didefinisikan dalam file eksternal atau di dalam elemen <style> di dalam bagian <head> dokumen HTML.Contoh CSS Inline:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- CSS Inline -->
<h1 style="font-size: small;">Hello, World!</h1>
</body>
</html>
Kesimpulan
Pemilihan metode CSS yang tepat tergantung pada kebutuhan proyek Anda. Penggunaan CSS eksternal umumnya dianggap sebagai praktik terbaik untuk mengelola tampilan dan gaya situs web yang lebih besar, sementara CSS internal dan inline bisa digunakan dalam kasus-kasus khusus atau pada halaman web yang lebih sederhana.
Terimakasih.
L, Renn
Komentar
Posting Komentar