Pengenalan CSS

Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mengatur tampilan dan tata letak halaman web. Dengan CSS, kita bisa mengubah warna, ukuran, font, dan posisi elemen HTML agar tampilan website lebih menarik dan user-friendly.

A. Mengapa CSS Penting?

• Memisahkan konten (HTML) dan tampilan (CSS) agar lebih mudah dikelola.
• Meningkatkan konsistensi desain di seluruh halaman website.
• Membantu menciptakan tampilan responsif untuk berbagai perangkat.
• Mempercepat waktu loading dengan penggunaan stylesheet eksternal.

B. Cara Menulis CSS

Ada tiga cara utama untuk menulis CSS dalam dokumen HTML:

1. Inline CSS
   • Ditulis langsung dalam atribut elemen HTML.
   • Contoh: <p style="color: red;">Ini teks berwarna merah.</p>
2. Internal CSS
   • Ditulis di dalam tag <style> dalam file HTML.
   • Contoh:

     <style>
       p {
         color: blue;
       }
     </style>
     

3. External CSS
   • Ditulis dalam file terpisah dengan ekstensi .css dan dipanggil di HTML menggunakan <link>.
   • Contoh:

     <link rel="stylesheet" href="styles.css">
     

     File styles.css:

     p {
       color: green;
     }
     

C. Struktur Dasar CSS

CSS memiliki sintaks dasar sebagai berikut:

selector {
  property: value;
}

• Selector: Elemen HTML yang akan diberi gaya (contoh: p, h1, div).
• Property: Properti yang ingin diubah (contoh: color, font-size).
• Value: Nilai dari properti yang diberikan (contoh: red, 16px).

Contoh:

body {
  background-color: lightgray;
  font-family: Arial, sans-serif;
}
h1 {
  color: blue;
  text-align: center;
}

D. Kesimpulan

CSS adalah alat penting dalam pengembangan web untuk mengatur tampilan website. Dengan memahami dasar CSS, kita bisa mulai mengubah tampilan elemen HTML dengan lebih fleksibel dan efisien.