Skip to main content

Pengenalan CSS

Hubungan antara HTML dan CSS sangat erat, di mana HTML menyusun struktur konten, dan CSS menentukan bagaimana konten tersebut ditampilkan. Kita hanya perlu paham HTML dan CSS untuk bisa bikin website yang cantik.

Apa itu CSS? CSS adalah singkatan dari Cascading Style Sheets. CSS ini adalah bahasa yang dipakai untuk mengatur aspek visual / presentasi / style dari elemen HTML. Versi termutakhir dari CSS adalah CSS3.

Default Style​

Browser otomatis mengaplikasikan default styles untuk beberapa elemen yang seringkali malah mengganggu waktu kita bikin layout. Untuk mengatasi ini, kita bisa pake trik yang disebut CSS reset untuk menghilangkan semua style yang asalnya dari browser. Contohnya elemen p di bawah ini.

Penulisan Style​

Kembali ke file index.html, ubah isinya jadi seperti ini.

<body>
  <div style="background: lightblue">Ini div 1</div>
  <div style="background: lightblue">Ini div 2</div>
  <span style="background: pink">Ini span 1</span>
  <span style="background: pink">Ini span 2</span>
  <p style="background: green; color: #fff;">Ini p1</p>
</body>

Inline Style

Tampilan halaman akan berubah seperti gambar di atas. Teknik penulisan CSS seperti itu disebut inline style. Selain cara itu, CSS juga bisa ditulis pakai tag style di dalam head.

<head>
  <style>
      div {
        background-color: lightblue;
      }

      span {
        background-color: pink;
      }

      p {
        background-color: green;
        color: #fff;
      }
  </style>
</head>

Dua cara di atas itu semuanya valid tapi cara yang lebih baik adalah CSS dalam file terpisah berekstensi .css. Kenapa cara ini lebih baik? Karena file CSS disimpan dalam cache browser. Kalo dokumen HTML-nya diedit tapi CSS-nya tetap, ketika halaman web dibuka oleh pengunjung yang udah pernah datang sebelumnya, browser hanya akan memuat dokumen HTML yang baru. File CSS-nya diambil dari cache selama masih ada. Ini berlaku juga sebaliknya. Kalo CSS-nya diedit tapi dokumen HTML-nya tetap, browser ambil HTML dari cache.

info

Cache adalah tempat browser menyimpan data sementara. Data ini termasuk file yang diunduh browser pada waktu kita mengakses sebuah website.

Coba kita kembalikan lagi isi body ke kondisi sebelumnya, tanpa inline style. Terus buat file index.css , isinya seperti kode di bawah. Di index.html, sebelum tag penutup </head> , kita muat file CSS itu pakai elemen link. Hasil tampilannya pasti sama seperti sebelumnya.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- buat ngeload file CSS -->
  <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
  <div>Ini div 1</div>
  <div>Ini div 2</div>
  <span>Ini span 1</span>
  <span>Ini span 2</span>
  <p>Ini p1</p>
</body>
</html>

Selektor​

Selector adalah kode yang kita pakai untuk memilih elemen yang mau kita atur visualnya. Anatomi sebuah stylesheet kurang lebih begini:

Selector

Setiap blok yang punya pasangan kurung kurawal itu disebut rule. Setiap rule berisi selector & declaration (deklarasi) style yang isinya adalah properti (property) & nilai (value) dipisahkan tanda titik dua. Satu rule bisa dipakai untuk styling lebih dari satu selector.

/* Satu rule, satu selector */
div {
  ...
}

/* Satu rule, banyak selector. Dipisah koma */ 
div, span, p {
  ...  
}

Di bawah ini beberapa selektor dasar yang nanti sering kita pakai.

Selektor Tipe​

Selektor paling sederhana disebut type selector yang ditulis hanya pake nama tag. Kalo saya tulis:

button {
  color: red;
}

Rule di atas akan membuat semua <button> di halaman HTML punya teks berwarna merah. Kalo ada 100, semuanya pake teks warna merah kecuali ada rule lain yang lebih tinggi prioritasnya.

Selektor Atribut class & id​

Atribut class & id adalah dua dari banyak atribut yang bisa kita pasang di elemen HTML & lazim dipakai sebagai selektor. Atribut class dipakai untuk pengelompokan, sementara atribut id untuk identitas. Satu class boleh dipakai banyak elemen, tapi setiap elemen hanya bisa punya satu id yang unik artinya nggak boleh ada dua elemen dengan id yang sama di satu halaman HTML.

Coba ubah isi index.html & index.css seperti di bawah ini terus buka di browser.

<body>
  <div id="elemen-1">Elemen unik dengan id</div>  
  <div class="red-text">Hello</div>
  <div class="blue-text">Hello</div>
  <div class="red-text">Hello</div>
  <div class="red-text">Hello</div>
  <div class="blue-text">Hello</div>
</body>
info

Sintaks /* */ adalah cara menulis komentar di CSS, mirip <!-- --> di HTML.

Descendant Selector​

Descendant secara bahasa artinya keturunan. Jadi selektor ini memungkinkan kita memilih elemen yang ada di dalam elemen lain di manapun posisi relatifnya terhadap parent. Sintaksnya pakai spasi di antara dua selektor atau lebih.

<div class="container">
  <div>Div A</div>
  <span>
    Span A1
  </span>
  <span>
    Span A2
  </span>
</div>

<div class="container">
  <div>
    <div>Div B</div>
    <span>
      Span B1
    </span>

    <div>
      <div>
        <span>Span B2</span>
      </div>
    </div>
  </div>
</div>

.container div & .container span artinya pilih semua div & span yang ada di dalam .container. Elemen div & span ini levelnya bisa anak (child), cucu (grandchild), cicit (great grandchild), dan seterusnya.

Untuk dokumen seperti di bawah ini, coba kalian tulis CSS untuk memberi warna merah semua elemen kelas box-red yand ada di bawah elemen kelas box-important, hanya jika box-important ada di dalam box-color.

<div>
  <div>
    <div class="box-red">Red</div>
  </div>
</div>
<div>
  <div>
    <div>
      <div class="box-important">
        <div class="box-red">Red 2</div>
      </div>
    </div>
  </div>
</div>
<div>
  <div>
    <div>
      <div class="box-color">
        <div class="box-blue">
          <div>
            <div class="box-important">
              <div class="box-red">Red 3</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Child Selector​

Selektor ini mirip dengan yang di atas, bedanya dia nggak milih semua elemen di dalam parent tapi hanya yang langsung di dalamnya saja. Jadi hanya child-nya, sementara child-nya child, dst nggak ikut dipilih. Sintaksnya bukan pakai spasi tapi tanda lebih-besar >. Selektor ini sering juga disebut direct-child selector.

.container > span {
  background: pink;
  color: black;
}

Kenapa span B1 & span B2 nggak berubah styling-nya? Coba cari sendiri jawabannya 😊.

Selektor Universal​

Selektor universal kita pake untuk memilih semua elemen sekaligus. Kalo kita punya dokumen seperti di bawah ini:

<div class="a">
  div a
  <div class="b">
    div b
    <div class="c">
      div c
    </div>
  </div>
  <div class="d">
    div d
    <div class="e">
      div e
      <div class="f">
        div f
      </div>
      <div class="g">
        div g
      </div>
    </div>
  </div>
</div>

Untuk memilih semua elemen yang masuk di dalam div.a, kita tulis:

div.a * {
  width: 100px;
  background: lightpink;
  margin-left: 10px;
}
Demo Selektor Universal
info

Ada beberapa jenis selektor lain yang kita perlu pelajari. Nanti kita bahas waktu mengerjakan proyek website di bab-bab selanjutnya.

Specificity​

Specificity adalah cara atau aturan yang dipake oleh browser untuk menentukan style mana yang akan diterapkan pada sebuah elemen ketika ada lebih dari satu deklarasi CSS untuk properti yang sama dipasang ke elemen itu.

Browser perlu menentukan aturan mana yang paling "spesifik" sehingga style tersebut yang akan digunakan dan specificity menyediakan sistem penilaian yang memungkinkan browser membuat keputusan ini.

Coba baris pertama yang ada id-nya kita kasih class.

<div id="elemen-1" class="red-text">Elemen unik dengan id</div>

Hasilnya warna teks tetap hijau, nggak berubah jadi merah. Kenapa? Itu karena rule yang pakai id prioritasnya lebih tinggi daripada yang pakai class karena id lebih spesifik ke satu elemen tertentu sementara class bisa ke banyak elemen.

Kita bisa lihat di Developer Tools apa yang terjadi dengan .red-text di elemen-1. Di situ kelihatan, kalo kita pilih elemen-1, color di .red-text dicoret. Artinya dia di-override (ditimpa) oleh color di elemen-1.

Gimana kalo kita ingin semua elemen yang pakai class .red-text warnanya berubah merah, termasuk elemen-1? Kita bisa pake keyword !important di .red-text untuk menaikkan prioritas dari properti color. Jadi bukan color dari rule #elemen-1 yang meng-override, tapi kebalikannya, dia yang di-override.

.red-text{
  color: red !important;
}

warning

Keyword !important memang powerful, tapi harus dipakai sebagai solusi terakhir kalo memang nggak ada cara lain yang lebih efisien.

Masalah specificity ini bakal sering muncul selama kita kerja dengan CSS dan nggak terbatas antara id vs class. Bisa kejadian dengan bermacam-macam kombinasi selektor. Intinya sih sederhana: rule mana yang lebih spesifik, dia yang menang.

Gimana kalo specificity-nya sama? Yang menang adalah rule yang ditulis lebih bawah/belakangan. Contoh di bawah ini, dua kelas .red-text & .blue-text specificity-nya sama tapi karena rule .blue-text ada di bawah .red-text, tulisannya jadi biru. Kalo urutannya dibalik, jadi merah. Urutan penulisan kelas di HTML-nya sendiri nggak berpengaruh.

<div class="blue-text red-text">Hello</div>

Urutan Specificity​

Specificity dihitung berdasarkan komponen berikut dalam selektor CSS:

  1. Inline style: Memiliki tingkat specificity tertinggi. Gaya yang ditambahkan langsung pada elemen HTML menggunakan atribut "style" akan selalu mengalahkan style yang didefinisikan di tempat lain. Inline-style ini hanya bisa "dikalahkan" oleh rule yang pake !important.
  2. Selektor id
  3. Selektor class, pseudo-class, attribute
  4. Type selector, pseudo-element
  5. Selektor universal (*), kombinator (+, >, ~, ' '), dan pseudo-class negatif (:not())
tip

Kalo kalian ketemu masalah tampilan di web yang nggak bener, misalnya teks udah disetel miring tapi tampilannya tetap nggak berubah, ya bisa jadi kena masalah specificity. Cek dulu rule mana yang meng-override, mana yang di-override.

Referensi​