CSS

 1. Pengertian CSS

CSS (Cascade Style Sheet) merupakan singkatan dari Cascading Style Sheets. CSS adalah bahasa stylesheet yang digunakan untuk mendefinisikan tampilan atau styling dari elemen HTML pada halaman web. CSS digunakan untuk memisahkan antara konten (HTML) dengan tampilan (styling) pada halaman web.

2. Cara Kerja CSS

CSS bekerja dengan menyediakan aturan styling atau dekorasi visual untuk elemen HTML pada halaman web. CSS dapat menentukan warna, font, ukuran, posisi, dan sebagainya dari elemen HTML. Cara kerja CSS adalah sebagai berikut:

- CSS ditulis dalam file terpisah dengan format .css atau disertakan pada tag style pada halaman HTML.

- Saat halaman web diakses, browser akan memuat file CSS atau membaca tag style pada halaman HTML.

- Setiap elemen HTML pada halaman web akan ditampilkan sesuai dengan aturan styling yang telah didefinisikan pada file CSS atau tag style.

- CSS bekerja dengan menggunakan selector atau pengenal elemen yang cocok dengan aturan styling. CSS juga menggunakan inheritance atau pewarisan styling dari elemen induk ke elemen anak.

3. Pemanfaatan CSS

CSS paling banyak digunakan untuk mengontrol tampilan dan layout pada halaman web. Dalam pengembangan web modern, CSS digunakan bersama dengan HTML dan JavaScript untuk menciptakan efek visual yang menarik dan interaktif pada halaman web. Pemanfaatan CSS di antaranya:

- Mempercepat waktu muat halaman web dengan memisahkan antara konten dengan tampilan (styling) pada halaman web.

- Memungkinkan pengembang web untuk menentukan tampilan yang sama pada seluruh halaman web dengan mudah.

- Memudahkan pengembang web untuk melakukan perubahan atau perbaikan tampilan pada halaman web secara cepat dan efisien.

- Meningkatkan aksesibilitas, memperbaiki tampilan pada berbagai perangkat dan ukuran viewport, serta meningkatkan keamanan dan kinerja halaman web.

4. Contoh CSS

Contoh pemanfaatan CSS pada halaman web antara lain:

- Menambahkan background color pada elemen HTML seperti body atau div.

```

body {

    background-color: #F0F0F0;

}

```

- Menentukan ukuran font dan tipe font pada elemen teks HTML seperti h1 atau p.

```

h1 {

    font-size: 32px;

    font-family: Arial, sans-serif;

}

```

- Menambahkan efek transisi atau animasi pada elemen HTML seperti button atau gambar.

```

button {

    background-color: purple;

    color: #FFF;

    border: none;

    padding: 10px 20px;

    transition: background-color 0.5s ease;

}

button:hover {

    background-color: pink;

}

```