Pengenalan ke Styling

Pada sub-modul pengenalan sudah disinggung seperti apa peran CSS pada website. Website nampak begitu membosankan dan mengerikan tanpa adanya CSS. Cascading Style Sheet atau biasa disingkat CSS merupakan W3C standar yang digunakan untuk mengatur visualisasi berkas yang ditulis pada HTML. Pada sub-modul ini kita akan belajar penggunaan dasar dari CSS. Tepatnya mulai dari pembuatan berkas CSS, pengenalan struktur sintaksnya, hingga menerapkan dasar styling seperti memberikan warna pada sebuah teks.

CSS syntax berbeda dengan HTML, begitu pula dengan JavaScript. CSS bukanlah sebuah bahasa pemrograman karena di dalamnya tidak terdapat logika, tidak dapat sintaks pengondisian, tidak adanya proses iterasi, dsb. CSS hanya sebuah declarative language yang digunakan untuk mendeklarasikan suatu nilai yang nantinya digunakan untuk mengatur seperti apa sebuah elemen HTML ditampilkan pada browser.


Keuntungan dan Cara Kerja CSS


Keuntungan Menggunakan 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.

Sudah jelas, bukan? Tiada alasan kita tidak menerapkan CSS. Terkecuali dukungan pada browser yang terkadang berbeda setiap vendornya (contohnya vendor prefixes), tapi hal tersebut tidak menjadi masalah ketika kita tahu di mana letak perbedaan dan cara penerapannya.


Bagaimana Style Sheet Bekerja?

Sebuah style sheet bekerja melalui tahapan berikut:

  • Dimulai dari sebuah dokumen yang telah ditandai dengan tag elemen HTML.
  • Menuliskan aturan styling untuk menentukan bagaimana elemen HTML akan ditampilkan.
  • Melampirkan aturan styling yang sudah dibuat pada dokumen HTML. Ketika browser memuat dokumen, tampilan elemen yang ditampilkan akan menyesuaikan dengan aturan styling yang sudah ditetapkan.

Mari, kita bahas satu persatu tahapannya.


Memberikan Markup pada Dokumen

Pada sub-modul sebelumnya kita sudah mengenal banyak bagaimana cara untuk me-markup atau memberikan tag sebuah konten dalam HTML. Mungkin sebagian dari kita bingung, mengapa kita perlu mengelompokkan sebuah konten tapi tiada perubahan signifikan pada tampilan browser? Contohnya seperti elemen <div> yang tidak akan mengubah apapun sebelum kita menerapkan sebuah styling pada elemennya. Sebenarnya terdapat hubungan antara struktur dokumen dengan sebuah style sheet. Kita akan memahami ini seiring kita belajar hingga pembahasan lebih lanjut.


Melampirkan Styling pada Dokumen HTML

Setelah kita menuliskan rules, maka tahapan selanjutnya adalah melampirkan atau menerapkan aturan tersebut pada berkas HTML. Sebenarnya, terdapat tiga cara untuk menerapkan styling pada elemen HTML.


External Style Sheet

External Style Sheet merupakan berkas terpisah yang di dalamnya hanya terdapat sebuah rules. Berkas ini harus berekstensi .css, dan berkas ini nantinya dihubungkan pada dokumen HTML. Cara ini merupakan yang paling powerful dalam menerapkan styling. Karena dengan cara ini, satu berkas styling (.css) dapat digunakan oleh banyak berkas HTML.

Untuk menyambungkan berkas .css dengan dokumen HTML, kita dapat menggunakan elemen <link> pada <head> berkas HTML. Contohnya: 

    1
    2
    3
    4
 
<head>
       <title>Document Title</title>
       <link rel="stylesheet" href="style.css">
    </head>

Pada elemen <link> tersebut, kita tetapkan berkas CSS yang digunakan dengan menggunakan atribut href dan beri nilai “stylesheet” pada atribut rel sebagai relationship (hubungan) antara berkas style.css dengan dokumen HTML.

Pada contoh di atas kita tahu bahwa berkas css yang digunakan merupakan berkas lokal (berkas yang berada pada komputer/server kita sendiri). Nilai atribut href juga dapat berupa berkas .css yang tersedia melalui sebuah URL.

Contohnya, banyak pengembang menggunakan bootstraps.min.css untuk membantu penyusunan layout website-nya. Kita bisa menggunakannya pada berkas HTML dengan langsung menuliskan URL untuk berkas tersebut. 

    1
    2
    3
    4
 
<head>
       <title>Document Title</title>
       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    </head>

.css merupakan penamaan format berkas .css yang sudah di-minify atau sudah diminimalkan dengan menghilangkan white space yang tidak digunakan


Embedded Style Sheet

Embedded Style Sheet merupakan kumpulan rules yang dituliskan dalam berkas HTML dengan menggunakan elemen <style>. Dengan begitu rules yang dituliskan hanya dapat dicakup oleh satu berkas HTML. Penulisan rules harus dituliskan dalam elemen <style> dan ditempatkan di dalam <head> dari berkas HTML. 

    1
    2
    3
    4
    5
    6
    7
    8
 
<head>
       <title>Document Title</title>
       <style>
           /*
            * Rules styling dituliskan di sini
            */
       </style>
    </head>

Inline Style

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

1
 
<h1 style="color: green">Kota Bandung</h1>

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

1
 
<h1 style="color: green; margin-top: 2em">Kota Bandung</h1>

Inline styles hanya diterapkan pada elemen di mana atribut style diterapkan. Teknik ini seharusnya dihindari terkecuali benar-benar diperlukan untuk menggantikan sebuah styling yang ditetapkan pada Embedded Style Sheet atau External Style Sheet.


Commenting in Style

Pada contoh kode di atas, kita sudah melihat sebuah teks pada rule yang dimulai dari /* dan diakhiri dengan */. Teks tersebut merupakan commenting line di dalam sebuah CSS. Sama seperti commenting pada HTML dan bahasa pemrograman lainnya, Teks yang dijadikan sebuah komentar tidak akan diproses oleh browser (sebagai compiler) atau lebih tepatnya “diabaikan”.

Berikut adalah contoh memberikan komentar pada CSS:

    1
    2
    3
    4
    5
    6
 
/* ini merupakan komentar satu baris */
     
    /* CSS juga mendukung komentar lebih dari satu baris,
      seluruh teks yang berada pada pembuka dan penutup sebuah komentar
      akan diabaikan oleh browser sebagai compiler.
    */

Menerapkan Styling Dasar pada Halaman Profil

Sejauh ini kita sudah mengetahui bagaimana menuliskan sebuah rule dan menggunakannya pada berkas HTML. Sekarang kita coba terapkan beberapa styling dasar pada halaman profil yang sudah kita buat dari beberapa sub-modul sebelumnya.

Latihan kali ini akan mencakup tahapan seperti pembuatan berkas CSS, menuliskan rule pada berkas CSS, hingga menghubungkan berkas CSS dengan HTML.

Di akhir latihan ini kita akan membuat halaman profil tampak seperti ini:


Membuat Berkas CSS

Silakan buka kembali root folder proyek yang telah kita buat dan buka folder assets.


Jika kita sudah selesai mengikuti latihan pada beberpa sub-modul sebelumnya, maka di dalam folder assets akan terdapat folder image. Sekarang, kita tambahkan folder baru dan beri nama styles.


Folder styles ini akan kita gunakan untuk menyimpan berkas CSS. Maka silakan buka folder tersebut dan buat berkas baru dan beri nama style.css.


Menghubungkan Berkas CSS dengan HTML

Setelah kita menuliskan rules pada berkas style.css, kita perlu menghubungkan berkas tersebut dengan berkas HTML sebagai stylesheet agar elemen HTML yang ditampilkan dapat menerapkan rules CSS yang kita terapkan.

Silakan kita buka kembali berkas index.html, kemudian tambahkan kode berikut di dalam elemen <head>: 

1
 
<link rel="stylesheet" href="assets/styles/style.css">

Sehingga keseluruhan kode pada elemen head nampak seperti ini:

    1
    2
    3
    4
 
<head>
       <title>Kota Bandung</title>
       <link rel="stylesheet" href="assets/styles/style.css">
    </head>

Simpan perubahan pada berkas index.html, kemudian coba buka berkas tersebut menggunakan browser. Jika kita berhasil menerapkan styling pada berkas HTML, maka pada browser akan tampak seperti ini:


Perubahan pertama terjadi pada tipe font yang ditampilkan pada seluruh konten yang terdapat di dalam elemen body.


Kemudian perubahan selanjutnya ada pada elemen <h2> dan <h3> dengan perubahan warna pada teksnya.


Dan perubahan terakhir ada pada elemen <footer> yang berada pada bawah halaman. Elemen ini akan menerapkan warna background menjadi biru, teks yang ada di dalamnya berwarna putih dan terdapat padding dalam menampilkan kontennya.


Selamat! Kita sudah berhasil menerapkan styling dasar pada halaman HTML. Pada materi selanjutnya, kita akan membahas lebih detail mengenai styling dan kita akan belajar menyusun layout agar peletakkan elemen dapat lebih presisi.


CSS Conception

Sebelum membahas lebih detail mengenai styling, terdapat beberapa konsepsi dalam CSS yang harus kita pahami.


Inheritance

Styling HTML bersifat inheritance yang artinya dapat mewarisi properti style “tertentu” pada elemen yang ada di dalamnya. Contohnya pada rules yang kita tuliskan untuk elemen <body> akan diterapkan pada seluruh elemen yang ada di dalam elemennya (body). Contoh lainnya, pada rules yang diterapkan pada elemen <footer> dengan properti color yang bernilai white, akan diterapkan pada seluruh elemen yang ada di dalam <footer>. Hal ini menjadi alasan mengapa memahami struktur dokumen itu penting.


Group Selector

Jika kita menerapkan rule yang sama pada beberapa selector yang berbeda, di CSS kita dapat menggabungkan selector tersebut sehingga dapat meminimalisir penulisan kode yang berulang.

Contohnya pada styling yang sudah kita buat sebelumnya, terdapat rule yang serupa antara h2 dan h3. 

    1
    2
    3
    4
    5
    6
    7
 
h2 {
       color: #00a2c6
    }
     
    h3 {
       color: #00a2c6
    }

Jika terdapat kasus seperti ini, kita dapat menuliskan dua selector sekaligus dalam satu struktur rule. Gunakan tanda koma (,) untuk memisahkan tiap selector-nya. Silakan kita buka kembali berkas style.css dan gabungkan rule untuk elemen <h2> dan <h3> menjadi seperti ini: 

    1
    2
    3
 
h2, h3 {
       color: #00a2c6
    }

Rule Order

Sesuai dengan namanya, cascading artinya “mengalir.” Demikian halnya dengan alur kerja CSS dalam membaca kode yang mengalir dari atas ke bawah. Karena itu kita harus memperhatikan urutan dalam penulisan rules, terutama saat terjadi sebuah konflik.

Konflik dapat terjadi karena kita dapat menerapkan beberapa styling pada satu dokumen HTML. Contohnya, apa yang seharusnya ditampilkan pada browser ketika eksternal css mengharuskan elemen <p> menampilkan warna merah, tetapi pada embedded css <p> harus menampilkan warna biru? Kembali pada alur kerja CSS yang membaca dari atas ke bawah, sehingga warna yang akan diterapkan adalah warna yang paling akhir didefinisikan.

Untuk lebih jelasnya, kita bisa lihat contoh berikut:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
 
<!doctype html>
    <html lang="en">
    <head>
       <title>Judul Berkas</title>
       <style>
           p {
               color: red;
           }
     
           p {
               color: blue;
           }
       </style>
    </head>
    <body>
    <p>Sesuai dengan namanya cascading yang artinya <q>mengalir</q>, alur kerja CSS dalam membaca kode pun seperti itu.
       Mengalir dari atas ke bawah sehingga kita harus memperhatikan urutan dalam penulisan rules <i>styling</i></p>
    </body>
    </html>

Maka pada browser elemen <p> menerapkan warna biru pada tulisannya.


Tetapi kita bisa membuat sebuah property styling agar dianggap penting untuk diterapkan oleh browser dan tidak memperhatikan urutannya. Kita bisa menambahkan keyword !important diakhir nilai propertinya. 

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
 
<!doctype html>
    <html lang="en">
    <head>
       <title>Judul Dokumen</title>
       <style>
           p {
               color: red !important;
           }
     
           p {
               color: blue;
           }
       </style>
    </head>
    <body>
        <p>Sesuai dengan namanya cascading yang artinya <q>mengalir</q>, alur kerja CSS dalam membaca kode pun seperti itu. Mengalir dari atas ke bawah sehingga kita harus memperhatikan urutan dalam penulisan rules <i>styling</i></p>
    </body>
    </html>

Sehingga warna yang diterapkan pada teks paragraf adalah merah.


Gunakan !important ketika memang benar-benar dibutuhkan saja. Sebaiknya kita pahami aturan urutan pada CSS dengan baik sehingga meminimalisir penggunaan tanda tersebut.

Berikut catatan yang sudah kita pelajari sejauh ini tentang styling:

  • Rule : Sebuah aturan styling yang harus diterapkan pada elemen HTML. Dalam sebuah rule terdapat selector dan deklarasi properti styling.
  • Selector : Sebuah bagian dari rule, yang mengidentifikasi target elemen untuk menetapkan sebuah rule.
  • Declaration : Sebuah bagian dari rule, yang terdiri dari pasangan properti dan nilainya.
  • External Style Sheet : Berkas terpisah yang di dalamnya hanya terdapat sebuah rules yang akan digunakan pada website.
  • Embedded Style Sheet : Kumpulan rules yang dituliskan dalam berkas HTML dengan menggunakan elemen <style>.
  • Inline Style : styling yang diterapkan pada elemen HTML dengan menggunakan atribut style.

Sebelumnya : Pendalaman HTML Selanjutnya : Pendalaman CSS