Cara Menggunakan CSS di HTML
CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan dan gaya halaman web. Dalam HTML, CSS diterapkan melalui berbagai metode, yang akan dibahas di sini.
Metode 1: Menyertakan Style di Dalam Tag <style>
- Cara ini menempatkan kode CSS langsung di dalam dokumen HTML.
- Letakkan tag
<style>di dalam bagian<head>dari dokumen HTML.
Contoh Penggunaan CSS
Selamat Datang!
Metode 2: Menyertakan Style Inline
- Cara ini menerapkan style secara langsung ke elemen HTML.
- Gunakan atribut
styledi dalam tag elemen.
Contoh Penggunaan CSS
Selamat Datang!
Metode 3: Menyertakan Style Melalui File Eksternal
- Cara ini memisahkan kode CSS dari HTML ke dalam file terpisah.
- Buat file CSS dengan ekstensi
.css(misalnya:style.css). - Hubungkan file CSS ke dokumen HTML menggunakan tag
<link>.
File style.css:
body {
background-color: #f0f0f0;
font-family: sans-serif;
}
h1 {
color: #333;
text-align: center;
}
File index.html:
Contoh Penggunaan CSS
Selamat Datang!
Keuntungan Menggunakan File Eksternal
- Organisasi: Memisahkan kode CSS dari HTML membuat kode lebih terstruktur dan mudah dikelola.
- Reusability: File CSS dapat digunakan kembali di beberapa halaman web.
- Performance: Browser dapat meng-cache file CSS, sehingga halaman web dimuat lebih cepat saat diakses kembali.
Tips Tambahan
- Gunakan CSS Preprocessor (seperti Sass, Less) untuk meningkatkan efisiensi penulisan CSS.
- Gunakan framework CSS (seperti Bootstrap, Tailwind CSS) untuk mempercepat pengembangan web.
- Pastikan kode CSS yang ditulis valid dan mengikuti standar penulisan CSS.
Semoga artikel ini bermanfaat dan membantu Anda dalam memahami cara menggunakan CSS di HTML!
