CSS

CSS (Cascading Style Sheets)

CSS

Pengenalan CSS

  • CSS (Cascading Style Sheets) adalah bahasa untuk mengatur tampilan halaman web.
  • Memisahkan konten (HTML) dari desain.
  • Memungkinkan perubahan desain tanpa mengubah struktur HTML.
  • Contoh penggunaan CSS:
    p {
  color: blue;
  font-size: 16px;
}
CSS

Cara Menyisipkan CSS

CSS

1. Inline CSS

  • Langsung dalam tag HTML menggunakan atribut style.
  • Contoh:
    <p style="color: red;">Teks berwarna merah</p>
CSS

2. Internal CSS

  • Ditulis di dalam <style> dalam <head>.
  • Contoh:
    <style>
  p { color: blue; }
</style>
CSS

3. External CSS

  • Ditulis dalam file terpisah (style.css).
  • Dipanggil dalam HTML dengan <link>.
  • Contoh:
    <link rel="stylesheet" href="style.css">
CSS

Styling Text

  • Properti penting:
    • color: Warna teks
    • font-family: Jenis font
    • font-size: Ukuran font
    • font-weight: Ketebalan teks
    • text-align: Posisi teks
CSS
  • Contoh:
    h1 {
  color: green;
  font-size: 24px;
  text-align: center;
}
CSS

Combining Selectors

  • Menggabungkan beberapa selector untuk efisiensi.
  • Contoh:
    h1, h2, p {
  color: blue;
}
CSS

Class dan ID Selectors

  • Class Selector (.): Bisa digunakan pada banyak elemen.
  • ID Selector (#): Unik, hanya untuk satu elemen.
  • Contoh:
    .judul {
  font-size: 20px;
  color: red;
}

#utama {
  background-color: yellow;
}
CSS

Working with Colors

  • Warna dalam CSS bisa ditulis sebagai:
    • Nama warna: red, blue
    • Hexadecimal: #ff0000
    • RGB: rgb(255, 0, 0)
    • HSL: hsl(0, 100%, 50%)
CSS
  • Contoh penggunaan:
    body {
  background-color: #f0f0f0;
  color: #333;
}
CSS

Pseudo Classes

  • Digunakan untuk memilih elemen berdasarkan statusnya.
  • Contoh:
    a:hover {
  color: red;
}
input:focus {
  background-color: yellow;
}
CSS
  • Warna link berubah saat hover, aktif, dan dikunjungi.
  • Contoh:
    a:link {
  color: blue;
}
a:visited {
  color: purple;
}
a:hover {
  color: red;
}
CSS

Using Chrome DevTools

  • Alat debugging bawaan Chrome.
  • Bisa digunakan untuk melihat dan mengedit CSS langsung di browser.
CSS

Urutan Selector

  • Spesifisitas menentukan selector mana yang menang.
  • Urutan dari rendah ke tinggi:
    • Elemen (p)
    • Class (.judul)
    • ID (#utama)
    • Inline (style="...")
    • !important
CSS
  • Contoh konflik:
    p { color: blue; } 
.paragraf { color: red; } 
#teks { color: green; }
CSS

Inheritance dan Universal Selector (*)

  • Inheritance: Properti teks diwariskan oleh elemen anak.
  • Universal Selector (*): Menerapkan gaya ke semua elemen.
  • Contoh:
    * {
  font-family: Arial, sans-serif;
}
CSS

CSS Box Model

  • Elemen dalam CSS terdiri dari:
    • Content: Isi elemen
    • Padding: Ruang dalam sebelum border
    • Border: Batas elemen
    • Margin: Jarak dengan elemen lain
CSS
  • Contoh visualisasi:
    div {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}
CSS

Margin dan Padding

  • Margin: Jarak luar elemen.
  • Padding: Jarak antara isi dan batas elemen.
  • Contoh:
    div {
  margin: 20px;
  padding: 10px;
}
CSS

Menambahkan Dimensi

  • Properti width dan height menentukan ukuran elemen.
  • Contoh:
    div {
  width: 300px;
  height: 200px;
}
CSS

Types of Boxes

  • Block Elements: div, p, h1, ul, li
  • Inline Elements: span, a, img
  • Inline-block: Kombinasi inline & block
CSS

Pseudo Elements

  • Menambahkan elemen tambahan tanpa mengubah HTML.
  • Contoh:
    p::first-letter {
  font-size: 2em;
  color: red;
}
CSS

Referensi