Seri Pemrograman Web Dasar : Bagian 3 – CSS

Modul Pemrograman Web Dasar: CSS

Pengantar CSS

CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk mengatur tampilan dan tata letak halaman web. CSS memungkinkan kita untuk memisahkan konten (HTML) dari desain sehingga kode lebih rapi dan mudah dikelola.

Struktur Dasar CSS

CSS bekerja dengan menggunakan aturan (ruleset) yang terdiri dari:

Selektor: Menentukan elemen HTML yang akan diberikan gaya.
Deklarasi: Berisi properti dan nilai (misalnya, color: red;).

Contoh Struktur:

h1 {
  color: blue;
  font-size: 20px;
}

Selektor dan Properti CSS

Ada beberapa jenis selektor:

Selektor Tag: Mengatur semua elemen dengan tag tertentu. p { color: black; }
Selektor Kelas: Mengatur elemen dengan kelas tertentu. .box { background-color: yellow; }
Selektor ID: Mengatur elemen dengan ID tertentu. #header { text-align: center; }

Cara Menyematkan CSS

Ada tiga cara untuk menyematkan CSS:

Inline CSS: Langsung pada elemen HTML. <h1 style="color: red;">Hello World</h1>
Internal CSS: Di dalam tag <style> pada file HTML. <style> body { background-color: lightblue; } </style>
Eksternal CSS: Menggunakan file terpisah (.css). <link rel="stylesheet" href="style.css">

Contoh Penerapan CSS pada Form

Berikut ini adalah contoh sederhana membuat form pendaftaran dengan menggunakan CSS:

HTML:

<form class="form-example">
  <label for="name">Nama Lengkap:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Daftar</button>
</form>

CSS:

.form-example {
  max-width: 300px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f4f4f4;
  border-radius: 5px;
}
.form-example label {
  margin-bottom: 5px;
  display: block;
}
.form-example input {
  width: 100%;
  padding: 8px;
  margin: 5px 0 10px;
}
.form-example button {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

Memanggil file CSS kedalam HTML

<head>
  <link rel="stylesheet" href="style.css">
</head>

Tips dan Trik CSS

Gunakan konsistensi dalam penamaan kelas.
Manfaatkan properti CSS seperti margin, padding, dan flexbox untuk tata letak.
Selalu uji desain di berbagai perangkat.

Referensi: DevDocs CSS

Semoga artikel ini membantu mahasiswa dalam memahami dasar-dasar CSS. Jangan lupa praktikkan setiap contoh untuk memperkuat pemahaman. Selamat belajar!

Categories: Pemrograman Web Dasar

website