Belajar CSS: Pengertian, Peran, Fungsi, dan Macamnya

By Posted on

Pengertian CSS

CSS atau Cascading Style Sheets merupakan bahasa pemrograman web yang digunakan untuk mengatur tampilan suatu halaman web. CSS digunakan untuk memisahkan konten HTML dari tampilan visual yang dihasilkan. Dengan CSS, Anda dapat membuat tampilan website yang menarik dan profesional.

Peran CSS

Peran CSS sangat penting dalam pembuatan website. Dengan CSS, Anda dapat mengubah tampilan website secara keseluruhan dengan melakukan perubahan pada satu file CSS saja. Selain itu, CSS juga memungkinkan Anda untuk membuat tampilan website yang responsif dan mudah diakses dari berbagai perangkat.

Fungsi CSS

CSS memiliki banyak fungsi, di antaranya:

  • Mengatur warna dan jenis font pada teks
  • Mengatur ukuran dan tata letak elemen pada halaman web
  • Mengatur warna dan tampilan border pada elemen
  • Mengatur tampilan gambar dan latar belakang pada halaman web
  • Mengatur animasi dan transisi pada elemen

Macam-macam CSS

Terdapat tiga macam CSS, yaitu:

  • Inline CSS, yaitu CSS yang ditulis di dalam tag HTML
  • Internal CSS, yaitu CSS yang ditulis di dalam tag <style> di dalam file HTML
  • External CSS, yaitu CSS yang ditulis di dalam file terpisah dengan ekstensi .css

Inline CSS

Inline CSS digunakan untuk mengatur tampilan suatu elemen secara langsung di dalam tag HTML. Contohnya:

<p style="color: blue; font-size: 16px;">Ini adalah contoh teks dengan inline CSS</p>

Dalam contoh di atas, warna teks diatur menjadi biru dan ukuran font diatur menjadi 16px.

Internal CSS

Internal CSS digunakan untuk mengatur tampilan elemen pada halaman web secara global. Contohnya:

<head><style>p {color: blue;font-size: 16px;}</style></head><body><p>Ini adalah contoh teks dengan internal CSS</p></body>

Dalam contoh di atas, semua elemen <p> pada halaman web akan memiliki warna biru dan ukuran font 16px.

External CSS

External CSS digunakan untuk mengatur tampilan elemen pada halaman web secara global dan terpisah dari file HTML. Contohnya:

Buatlah file baru dengan nama style.css dan isi dengan kode berikut:

p {color: blue;font-size: 16px;}

Setelah itu, hubungkan file style.css ke file HTML dengan menggunakan tag <link>. Contohnya:

<head><link rel="stylesheet" type="text/css" href="style.css"></head><body><p>Ini adalah contoh teks dengan external CSS</p></body>

Dalam contoh di atas, semua elemen <p> pada halaman web akan memiliki warna biru dan ukuran font 16px.

Kesimpulan

CSS merupakan bahasa pemrograman web yang digunakan untuk mengatur tampilan suatu halaman web. Dengan CSS, Anda dapat membuat tampilan website yang menarik dan profesional. CSS memiliki banyak fungsi, di antaranya mengatur warna dan jenis font pada teks, mengatur ukuran dan tata letak elemen pada halaman web, dan mengatur tampilan gambar dan latar belakang pada halaman web. Terdapat tiga macam CSS, yaitu inline CSS, internal CSS, dan external CSS. Masing-masing memiliki kegunaan dan cara penggunaan yang berbeda.

Related posts: