Beranda
CSS

Cara Menulis CSS di HTML

Itulah tadi artikel dari kodeviolet.com tentang cara menulis CSS di HTML. Kalian bisa memilih metode yang paling sesuai dengan kebutuhan proyek kalian
Kode Violet
Cara Menulis CSS di HTML

Hai teman-teman! Kali ini kodeviolet.com akan membahas tentang cara menulis CSS di HTML, yang pastinya sangat penting untuk kalian yang ingin membuat tampilan website jadi lebih menarik dan profesional. Yuk kita pelajari bersama!

Apa itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan format elemen dalam dokumen HTML. Dengan CSS, kalian bisa mengatur warna, ukuran, posisi, font, dan berbagai aspek visual lainnya dari elemen web.

Tiga Cara Menulis CSS di HTML

Ada tiga cara utama untuk menulis CSS di HTML:

  1. Inline CSS

    CSS ditulis langsung di dalam atribut elemen HTML. 
    <p style="color: blue; font-size: 16px;">Teks ini menggunakan inline CSS.</p>

  2. Internal CSS

    CSS ditulis di dalam tag <style> pada bagian <head> dari dokumen HTML. 
    <!DOCTYPE html>
<html>
<head>
  <title>Contoh Internal CSS</title>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>Teks ini menggunakan internal CSS.</p>
</body>
</html>

  3. Eksternal CSS

    CSS ditulis di file terpisah (misalnya style.css) dan dihubungkan ke HTML dengan tag <link>. 
    <!-- File: index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Contoh Eksternal CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>Teks ini menggunakan eksternal CSS.</p>
</body>
</html>
    /* File: style.css */
p {
  color: red;
  font-size: 20px;
}

Perbandingan Ketiga Metode CSS

Berikut tabel perbandingan ketiga cara penulisan CSS:

Metode CSS Kelebihan Kekurangan
Inline Cepat dan langsung terlihat Sulit dipelihara, tidak efisien
Internal Mudah digunakan untuk satu file Tidak efisien untuk banyak halaman
Eksternal Efisien dan terstruktur Butuh file tambahan

Kesimpulan

Itulah tadi artikel dari kodeviolet.com tentang cara menulis CSS di HTML. Kalian bisa memilih metode yang paling sesuai dengan kebutuhan proyek kalian. Untuk proyek besar dan profesional, eksternal CSS adalah pilihan terbaik karena lebih mudah dikelola. Semoga bermanfaat dan sampai jumpa di artikel selanjutnya!

Posting Komentar