Apa itu CSS? Pengertian, Fungsi, Jenis, dan Contohnya

Apa itu CSS?

Cascading Style Sheet atau CSS adalah bahasa pemrograman yang digunakan untuk mengatur tampilan visual (front-end) situs web dan menentukan bagaimana dokumen serta situs web akan terlihat.

Di dalam CSS, Anda bisa memasukkan kumpulan perintah untuk menjelaskan tampilan halaman website dalam mark-up language standar, seperti HTML.

Pertama kali dikembangkan pada tahun 1996 oleh World Wide Web Consortium (W3C) untuk mengatur format halaman HTML, CSS dapat membantu Anda membangun situs web dengan tampilan menarik dan memberikan pengalaman baik bagi pengguna. 

Dahulu, HTML bahkan tidak dilengkapi dengan tags untuk membantu pengguna memformat halaman, sehingga pengguna hanya bisa menulis markup untuk situs web. Akhirnya, pada HTML versi 3.2, tags seperti <font> mulai diperkenalkan.

Namun, kala itu, banyak developer merasa kesulitan untuk menulis kembali kode mereka (rewrite), terutama untuk kode yang panjang dan sulit. Untuk itu, W3C menghadirkan CSS untuk mengobati kerisauan tersebut. 

Kini, Anda dapat menggunakan CSS untuk mengatur style pada dokumen HTML atau bahasa markup lainnya seperti mengatur gaya huruf, ukuran, warna, spacing, membuat tombol, dan style, serta masih banyak lagi.

Cara Kerja CSS

Secara umum, CSS adalah bahasa pemrograman yang menggunakan sintaksis berbasis bahasa Inggris sederhana dan terdiri dari aturan-aturan yang mudah dipahami.

HTML, yang digunakan untuk membuat struktur atau markup halaman web, tidak dirancang untuk menangani elemen-elemen visual atau styling.

Oleh karena itu, CSS hadir untuk memberikan solusi ini dengan mengatur tampilan dan format elemen-elemen yang ada di halaman HTML.

Pada dasarnya, cara kerja CSS sangatlah sederhana, terdiri dari dua bagian utama: selector dan declaration block. Pertama, kita memilih elemen HTML yang ingin diubah tampilannya (menggunakan selector), kemudian kita menyatakan gaya atau style yang ingin diterapkan pada elemen tersebut (dalam declaration block).

Meskipun ada banyak aturan atau rules yang harus diingat, struktur dasar CSS itu sendiri cukup mudah. Selector digunakan untuk memilih elemen HTML yang ingin Anda sesuaikan tampilannya. Misalnya, Anda bisa memilih sebuah paragraf, gambar, atau judul.

Setelah memilih elemen dengan selector, Anda akan membuat declaration block yang berisi satu atau lebih deklarasi. 

Setiap deklarasi terdiri dari property dan value yang dipisahkan oleh tanda titik dua. Setiap deklarasi diakhiri dengan tanda titik koma. Semua deklarasi dalam declaration block dipisahkan oleh tanda titik koma, dan seluruh block tersebut dibungkus dengan tanda kurung kurawal.

Fungsi CSS

Pada dasarnya, fungsi CSS adalah untuk membuat tampilan dokumen HTML atau bahasa markup menjadi lebih menarik dan bervariasi. Selain itu, ada pula fungsi CSS lainnya yaitu:

1. Menyediakan Tampilan Responsif 

Salah satu fungsi CSS adalah menyediakan tampilan responsif untuk segala ukuran layar, baik desktop maupun seluler. CSS memiliki property seperti max-width dan min-width untuk mengatur tampilan sesuai ukuran layar. Dengan begitu, situs web Anda bisa memberikan pengalaman pengguna yang lebih baik.

2. Mempersingkat Waktu Loading

Selain mengoptimalkan tampilan yan resposnif, fungsi CSS lainnya adalah membuat halaman web dapat memberikan respon yang lebih cepat. 

Dengan CSS, Anda bisa meminimalkan jumlah kode yang ditulis karena style CSS bisa diterapkan pada beberapa halaman web sekaligus. Dengan demikian, ukuran file menjadi lebih kecil dan halaman web dapat dimuat lebih cepat.

3. Memudahkan Pengelolaan Kode

Penggunaan CSS dapat memudahkan Anda dalam melakukan pengelolaan kode. Sebagai contoh, jika Anda ingin mengganti jenis font yang digunakan di suatu website, Anda tidak perlu mengubah satu per satu font tersebut. 

Pasalnya, hanya dengan mengubah kode CSS terkait jenis font, perubahan-perubahan tersebut akan berlaku di seluruh halaman HTML.

4. Menambah Variasi pada Tampilan Situs Web

Selain dapat menjadikan tampilan situs web Anda jadi lebih menarik, CSS juga dapat membantu menambah variasi tampilan situs web. 

Karena didukung dengan berbagai property untuk mengatur tampilan website, Anda akan lebih mudah menjadikan halaman situs web jauh lebih variatif, terutama dengan adanya framework-framework CSS yang tersedia.

Jenis-Jenis CSS

Berdasarkan cara penulisannya, CSS dapat dibagi menjadi tiga jenis yaitu internal, external, dan inline CSS. Simak penjelasan dari masing-masing jenis CSS di bawah ini:

1. Internal CSS

Internal CSS adalah kode CSS yang dituliskan di dalam bagian <head> dokumen HTML. Anda dapat menambahkan kode CSS dengan menuliskan tag <style> pada header HTML tersebut. 

Namun, internal CSS kurang efisien karena dapat memperlambat performa website dan membuat ukuran file menjadi lebih besar.

2. External CSS

External CSS adalah penulisan kode CSS yang terpisah dengan dokumen HTML. Biasanya kode CSS akan disimpan dalam file ekstensi .css, kemudian dapat diimpor melalui tag <link> yang terdapat pada bagian <head>. Pada tag <link> tersebut, Anda hanya perlu menuliskan atribut rel="stylesheet" dan atribut href yang berisi direktori tempat file ekstensi .css disimpan.

External CSS banyak digunakan dalam pengembangan website karena dapat mempercepat waktu loading. Selain itu, external CSS juga membuat kode program lebih rapi dan ukuran file menjadi lebih kecil.

3. Inline CSS

Inline CSS adalah jenis CSS yang dapat digunakan untuk menambahkan style yang berbeda sesuai kebutuhan tiap elemen. 

Akan tetapi, penggunaan inline CSS dinilai sedikit kurang efisien karena style hanya dapat digunakan pada satu elemen saja. Artinya, Anda perlu menambahkan style CSS tersendiri untuk diimplementasikan pada elemen lainnya.

Contoh Sintaks CSS

Berikut adalah beberapa cara mengaplikasikan sintaks CSS dalam dokumen HTML. Perhatikan source code di bawah ini:

Contoh Internal CSS

Pada internal CSS, Anda dapat menambahkan tag style dan properti CSS di bagian <head> dokumen HTML. Dalam kode berikut ini terdapat internal CSS untuk mengatur style pada paragraf dan H1.

<!DOCTYPE html>
<html>
  <head>
    <title>Panduan CSS</title>
    <style>
      body {
        background-color:lightblue;
      }
      h1 {
        color:white;
        text-align:center;
      }
      p {
        font-family:Arial;
        font-size:30px;
      }
    </style>
  </head>
  <body>
    <h1>Panduan CSS</h1>
    <p>Belajar HTML & CSS</p>
  </body>
</html>

Output Internal CSS

Contoh External CSS

Untuk menggunakan external CSS, Anda harus menambahkan referensi ke file CSS eksternal di dalam tag <link> pada bagian <head> dokumen HTML. Cara untuk memanggil file eksternal CSS adalah dengan menuliskan atribut href=”direktori file CSS” di dalam tag <link>. Perhatikan contoh kode HTML dan file mystyle.css berikut.

Kode HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Panduan CSS</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>
  <body>
    <h1>Panduan CSS</h1>
    <p>Belajar HTML & CSS<p>
  </body>
</html>

Kode CSS yang disimpan dalam file mystyle.css

<style>
  body {
    background-color:lightgreen;
  }
  h1 {
    color:blue;
    text-align:center;
  }
  p {
    font-family:Calibri;
    font-size:20px;
  }
</style>

Output External CSS

Contoh Inline CSS

Pada inline CSS, Anda dapat menambahkan atribut style dan properti CSS dalam atribut HTML. Perhatikan kode berikut untuk mengatur style pada paragraf dan H1 dengan inline CSS.

<!DOCTYPE html>
<html>
  <head>
    <title>Panduan CSS</title>
  </head>
  <body>
    <h1 style=color:orange;text-align:center;>Panduan CSS</h1>
    <p style=font-family:TimesNewRoman;font-size:40px;>Belajar HTML & CSS</p>
  </body>
</html>

Output Inline CSS