Apa Itu CSS dan Kenapa Penting?

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan tata letak halaman web. Dengan CSS, kita dapat mengubah warna, ukuran, jenis font, jarak antar elemen, dan banyak lagi, tanpa mengubah struktur HTML. CSS sangat penting untuk membuat tampilan website yang menarik, responsif, dan konsisten.

Tiga Cara Menyisipkan CSS ke HTML

  • Inline: Langsung di dalam elemen HTML, contoh: <p style="color:blue;">Teks biru</p>
  • Internal: Menggunakan tag <style> di bagian <head> dokumen HTML.
  • Eksternal: Menghubungkan file CSS terpisah menggunakan <link>, contoh: <link rel="stylesheet" href="style.css">

Sintaks Dasar CSS: Selector, Property, dan Value

Sintaks CSS terdiri dari tiga bagian: selector, property, dan value. Contoh: 

p {
  color: red;
}

Artinya, semua elemen <p> akan memiliki warna teks merah.

Mengenal Jenis-Jenis Selector di CSS

  • Element selector: Menargetkan elemen HTML, contoh: h1 { }
  • Class selector: Menargetkan elemen dengan atribut class, contoh: .judul { }
  • ID selector: Menargetkan elemen dengan atribut id, contoh: #header { }
<p class="highlight">Contoh teks</p>
.highlight {
  background-color: yellow;
}

Warna, Font, dan Teks di CSS

Gunakan properti berikut untuk mengatur tampilan teks:

p {
  color: navy;
  background-color: lightgray;
  font-family: Arial, sans-serif;
  text-align: center;
}

Box Model: Konsep Dasar Layout di CSS

Setiap elemen HTML dianggap sebagai kotak yang terdiri dari:

  • Content: Isi utama (teks atau gambar)
  • Padding: Jarak antara isi dan border
  • Border: Garis di sekitar padding
  • Margin: Jarak antar elemen
div {
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
}

Mengatur Ukuran dan Posisi Elemen

div {
  width: 200px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 100px;
  z-index: 1;
}

Properti position menentukan bagaimana elemen diposisikan, sedangkan z-index mengatur urutan tampilan jika elemen saling tumpang tindih.

Display dan Visibility: Kontrol Cara Elemen Ditampilkan

span {
  display: inline;
}
div {
  display: block;
}
p.sembunyi {
  display: none;
}

display mengatur jenis tampilan elemen, sedangkan visibility: hidden; akan menyembunyikan elemen tanpa menghapus ruangnya.

Flexbox: Tata Letak Modern dan Fleksibel

Flexbox memudahkan penyusunan elemen secara fleksibel di dalam kontainer:

.kontainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

Flexbox sangat berguna untuk membuat layout yang responsif dan mudah diatur, seperti menu horizontal atau kolom sejajar.

Media Queries: Membuat Web Responsive

Media queries digunakan untuk mengubah tampilan berdasarkan ukuran layar, seperti HP atau tablet: 

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Dengan media queries, satu website bisa tampil baik di berbagai perangkat tanpa membuat versi terpisah.

×