Study Learning

Pengenalan CSS

Website tampak begitu membosankan dan “mengerikan” tanpa adanya CSS. CSS atau Cascading Style Sheet merupakan standar dari W3C untuk mengatur visualisasi berkas yang ditulis pada HTML. CSS hanya sebuah declarative language yang digunakan untuk mendeklarasikan suatu nilai yang nantinya digunakan untuk mengatur tampilan sebuah elemen HTML pada browser.

Keuntungan dan Cara Kerja CSS

Dengan menerapkan CSS, tampilan website kita akan lebih menarik. Berikut beberapa keuntungan yang didapatkan ketika kita menerapkan CSS.

Dapat mengontrol dan menerapkan layout secara presisi
Dengan menggunakan CSS kita bisa membuat sebuah website seperti dokumen cetak dengan desain yang menarik dan presisi.
Menghindari pekerjaan yang berulang-ulang dalam menerapkan styling
Kita dapat menetapkan styling pada beberapa berkas HTML hanya dengan menggunakan satu berkas CSS.
Didukung banyak browser
Seluruh browser saat ini minimal sudah mendukung CSS versi 2. Untuk browser yang populer seperti Chrome dan Firefox sudah mendukung CSS versi 3.

Menulis Aturan Styling

Dalam penggunaan CSS, terdapat dua bagian dalam sebuah rule. Yang pertama adalah identitas elemen atau elemen yang akan menerapkan rule (singkatnya kita akan sebut selector) dan yang kedua adalah deklarasi atau instruksi yang akan diterapkan pada sebuah selector.

Melampirkan Styling pada Dokumen HTML

Berikut adalah cara melampirkan styling pada dokumen HTML.

External Style Sheet

External Style Sheetmerupakan berkas terpisah yang di dalamnya hanya ada CSS rules. Berkas ini harus berekstensi .css, dan akan dihubungkan pada dokumen HTML. Cara ini merupakan yang paling powerful dalam menerapkan styling. Dengan cara ini, satu berkas styling (.css) dapat digunakan oleh banyak berkas HTML.

<head>
    <meta charset="UTF-8" />
    <title>Judul Dokumen</title>
   
    <!-- Impor berkas CSS Anda -->
    <link rel="stylesheet" href="style.css">
</head>

Embedded Style Sheet

Embedded Style Sheet merupakan kumpulan rules yang dituliskan dalam berkas HTML dengan menggunakan elemen <style>. Penulisan rules harus dituliskan dalam elemen <style> dan biasanya ditempatkan di dalam <head> dari berkas HTML.

<head>
    <meta charset="UTF-8" />
    <title>Judul Dokumen</title>
   
    <style>
      h1 {
        color: green;
      }
    </style>
</head>

Inline Style

Inline Style merupakan styling yang diterapkan pada elemen HTML dengan menggunakan atribut style. Contohnya seperti berikut.

<nama-elemen style="color: green">Konten dari Elemen HTML</nama-elemen>

Untuk menambahkan styling properties lainnya (multiple properties), kita tuliskan dengan menggunakan semicolon (;) sebagai pemisah antar styling properties-nya.

CSS Conception

Berikut adalah rangkuman penjelasan materi dalam submodul ini.

Inheritance

Styling HTML bersifat inheritance yang dapat mewarisi properti style “tertentu” pada suatu elemen ke elemen-elemen di dalamnya (child-elements).

Contohnya, CSS rules yang ditetapkan untuk elemen <body> akan diterapkan pada seluruh child-elements secara otomatis.

body {
    font-family: sans-serif;
}

Hasilnya berikut:

Group Selector

Jika beberapa selector yang berbeda memiliki penerapan properti-properti yang sama, kita dapat menggabungkan selector tersebut menggunakan group selector. Hal ini dapat meminimalisir penulisan kode yang berulang.

Contohnya berikut. Gunakan tanda koma (,) untuk memisahkan tiap selector-nya.

h2, h3 {
    color: #00A2C6;
}

Rule Order

Cascading artinya “mengalir”. Demikian halnya dengan alur kerja CSS dalam membaca kode, mengalir dari atas ke bawah. Oleh karena itu, kita harus memperhatikan urutan dalam penulisan rules, terutama saat terjadi sebuah konflik.

p {
    color: red;
  }
   
  p {
    color: blue;
}

Hasilnya berikut.