Dasar CSS / Pengenalan CSS / Definisi dan Fungsi CSS

Pengertian CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendesain tampilan halaman web. CSS memungkinkan kita untuk mengatur tata letak, warna, dan ukuran elemen pada halaman web.

CSS bekerja dengan cara memilih elemen HTML yang akan diubah tampilannya, lalu menentukan bagaimana tampilan elemen tersebut. CSS dapat diletakkan pada file terpisah dari file HTML, atau langsung ditulis pada file HTML.

Fungsi CSS dalam pengembangan web

CSS memiliki beberapa fungsi dalam pengembangan web, yaitu:

Mempercantik tampilan halaman web: CSS memungkinkan kita untuk mengatur tata letak, warna, dan ukuran elemen pada halaman web sehingga tampilan halaman web menjadi lebih menarik.
Memisahkan antara konten dan tampilan: Dengan menggunakan CSS, kita dapat memisahkan antara konten dan tampilan pada halaman web. Hal ini memungkinkan kita untuk mengubah tampilan halaman web tanpa harus mengubah konten HTML.
Meningkatkan pengalaman pengguna: Dengan menggunakan CSS, kita dapat membuat halaman web menjadi lebih menarik dan mudah dibaca oleh pengguna.
Meningkatkan SEO: CSS memungkinkan kita untuk mengoptimalkan tampilan halaman web sehingga lebih mudah diindeks oleh mesin pencari.
Meningkatkan responsivitas: CSS memungkinkan kita untuk membuat halaman web menjadi responsif, sehingga tampilan halaman web dapat menyesuaikan dengan berbagai perangkat dan ukuran layar.

Cara Kerja CSS

Contoh penggunaan CSS pada file HTML:

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

Pada contoh di atas, CSS digunakan untuk mengubah warna teks pada elemen h1 menjadi biru.

Tantangan

Ubah warna teks pada elemen h1 pada contoh di atas menjadi merah.

Kesimpulan

CSS adalah bahasa yang digunakan untuk mendesain tampilan halaman web. CSS memungkinkan kita untuk mengatur tata letak, warna, dan ukuran elemen pada halaman web. Ada beberapa cara untuk menggunakan CSS pada halaman web, yaitu internal CSS, external CSS, dan inline CSS.

Struktur Dasar CSS

Files

index.html

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color: blue;

}

</style>

</head>

<body>

<h1>Hello, World!</h1>

</body>

</html>

Preparing Environment

Installing dependencies
Starting http server