Pengertian, Syntax, dan Implementasi CSS (Cascading Style Sheet)

Seperti janji saya dari lama untuk melanjutkan Tutorial mengenai HTML, saya coba mulai dari Pengenalan CSS.

Apa itu CSS?

CSS singkatan dari Cascading Style Sheet, atau jika diterjemahkan yaitu Bahasa Lembar Gaya. CSS merupakan bahasa yang digunakan untuk mengatur tampilan/desain suatu halaman web. CSS sama halnya dengan styles pada aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).

Dengan kata lain, Cascading Style Sheet adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website. Singkatnya dengan menggunakan metode CSS ini mudah mengubah secara keseluruhan warna dan tampilan yang ada pada website. Dengan CSS, temen-temen dapat lebih mempercantik tampilan web. baik dari style text, button, textfield, table, dan lain-lain.

Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. Sebagai contoh, perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf), colors (warna), margins (ukuran), background (latar belakang), font size (ukuran font) dan lain-lain. Elemen-elemen tersebut disebut juga dengan styles.

Perkembangan CSS

CSS 1

CSS pertama yang menjadi Rekomendasi W3C resmi CSS level 1, diterbitkan pada Desember 1996.dikembangkan berpusat pada pemformatan dokumen HTML.

CSS 2

CSS2 mendukung penentuan posisi konten, huruf (font), tampilan pada tabel (table layout) dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama.

CSS 3

Dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D.
Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni @media query.
Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image.

Tools CSS

Editor

Sama halnya seperti HTML dan bahasa pemrograman lainnya, CSS berisi kode teks yang dapat dibuat menggunakan text edtor seperti Notepad, Notepad++, Dreamweaver, dll.

Designer

Konsep untuk membuat tampilan web dengan menambahkan CSS berbeda-beda. Mungkin sebagian orang bisa langsung membuat CSS dari nol hingga menghasilkan tampilan yang bagus. Tetapi pada umumnya seorang web designer terlebih dahulu menggunakan tools image editor seperti Photoshop, Adobe Ilustrator, dll untuk membuat design mockup. Mockup tersebut kemudian dijadikan acuan untuk membuat kerangka tampilan web menggunakan HTML dan CSS. Setelah itu, mockup tersebut di-"slice" (dipotong-potong) menjadi bagian-bagian kecil untuk dimasukkan ke dalam kerangka tampilan web tadi. Metode ini sering disebut dengan slicing.

Result & Troubleshoot

Untuk melihat hasil dari CSS yang telah dibuat, tentunya dengan membuka file HTML pada browser, misalnya menggunakan Mozilla Firefox, Google Chrome, Internet Explorer, dll.
Jika setelah dibuka ternyata terdapat ketidaksesuaian pada hasil tampilan, dapat dilakukan troubleshoot dengan menggunakan fitur melihat source code pada browser. Untuk Firefox, bisa menggunakan plugin Firebug. Pada Google Chrome, bisa digunakan Developer Tools yang terdapat pada opsi menunya.

Manfaat CSS

Manfaat yang bisa diperoleh jika kita membuat tampilan web dengan sentuhan CSS diantaranya :

• Kode menjadi sederhana dan lebih mudah diatur
• Ukuran file menjadi lebih kecil, sehingga load file lebih cepat
• Mudah untuk mengubah tampilan, hanya dengan mengubah CSS saja
• Dapat berkolaborasi dengan Javascript
• Dapat digunakan dalam hampir semua web browser

Syntax CSS

CSS memiliki syntax yang sederhana dan menggunakan sejumlah kata kunci berbahasa Inggris untuk menentukan nama-nama berbagai properti. CSS memiliki dua aturan utama, yaitu Selector dan Declaration. Untuk lebih jelasnya, lihat cara penulisan serta komponen yang terdapat pada CSS berikut :

• Dalam kode CSS, ada 2 bagian yang terpisah, yaitu Selector dan Declaration.
• Selector biasanya merupakan elemen HTML atau tag dimana berbagai properti diberi suatu nilai.
• Setiap Declaration terdiri dari Property dan Value.
• Untuk penulisan Declaration harus menggunakan tanda kurung kurawal {...}
• Property adalah atribut style yang ingin dirubah, misalnya color, background, margin, dll.
• Setiap Property memiliki Value (nilai) sesuai dengan jenis property-nya.

Pengelompokan Selector

Seperti yang dilihat pada contoh di atas, salu selector dapat memiliki beberapa property. Jika terdapat beberapa selector yang memiliki property yang sama, dapat dilakukan pengelompokan selector. Lihat contoh berikut :

- Syntax CSS

h1, body, p, ul { color: blue; }

- Syntax HTML

<body>
<h1>Warna Biru</h1>
Contoh teks
</body>

Pada contoh di atas, elemen header, body, paragraph, dan unordered list berada pada group yang sama. Semua elemen tersebut nantinya akan memiliki teks berwarna biru.

ID dan Class

Untuk memahami tentang ID dan Class, dapat melihat contoh kode CSS berikut :

#identitas {
   font-size: 20px;
   color: #FF0000;
   background-color: #000;
}

.kelas {
   font-size: 30px;
   color: #12FF34;
   background-color: #FFFFFF;
}

• Selector ID menggunakan tanda pagar (#) sebagai penandanya, sedangkan Selector Class menggunakan tanda titik (.).
• Penamaan pada selector ID dan Class dapat dibuat secara bebas, tetapi sebaiknya disesuaikan dengan nama kelompok yang terkait untuk mempermudah pengeditan.
• Perbedaan antara ID dan Class pada CSS adalah pada tingkat penggunaannya. ID sebaiknya digunakan sebagai identitas yang unik seperti Logo, Header, Footer, Sidebar.
• Sedangkan Class digunakan untuk menandai atribut yang lebih spesifik seperti ketebalan border (garis pinggir), kode warna, paragraph, jenis font, ukuran font, dll.
• Class dapat digunakan untuk mengatur tampilan atau atribut dari suatu kelompok data HTML, baik yang memiliki ID tertentu atau tidak.
• ID digunakan untuk memberikan identifikasi atau atribut pada kelompok data atau elemen HTML yang lebih besar.

Implementasi CSS

Ada 2 cara yang bisa diterapkan untuk menggunakan CSS pada tampilan web. Cara pertama yaitu dengan membuat CSS langsung di dalam satu file HTML. Cara ini disebut dengan internal/inline style sheet.

Cara yang kedua yaitu dengan cara membuat file CSS tersendiri,lalu file tersebut dipanggil melalui HTML yang dibuat. Cara ini disebut dengan external style sheet.

Internal Style CSS

Metode Internal Style maksudnya ialah style CSS digabung atau ditulis bersamaan dengan tag-tag HTML. Agar dapat lebih dipahami, lihat contoh kode HTML berikut :

File index.html

<html>
  <head>
    <title>Contoh Internal Style</title>
    <style type="text/css">
      body {
        font-family: Arial, Helvetica, sans-serif;
      }
      .kelas {
        font-size: 50px;
        color: #FF0000;
        background-color: #000;
      }
      #identitas {
        font-size: 30px;
        color: #000;
        background-color: #FF0000;
      }
    </style>
  </head>
  <body>
    <div class="kelas">Contoh Penulisan Class</div> 
    <br \>
    <div id="identitas">Contoh Penulisan ID</div>
  </body>
</html>

Dilihat dari kode di atas, syntax CSS ditulis langsung di dalam HTML yang dibuat, yaitu pada bagian <head> dengan tag <style>. Selector body langsung digunakan oleh HTML tanpa perlu dipanggil kembali, sedangkan ID dan Class pada contoh di atas dipanggil pada tag <div>.

External Style CSS

Merupakan metode penulisan CSS dimana Syntax CSS dibuat file tersendiri yang terpisah dengan file HTML. File CSS ini nantinya dapat digunakan oleh semua file HTML yang ada. Untuk memanggil file CSS yang telah dibuat, tambahkan baris berikut pada bagian <head> HTML :

<link rel="stylesheet" type="text/css" href="lokasi_file_css.css" />

Untuk lebih memahami penggunaannya, perhatikan contoh berikut :

- File gaya.css

body {
      font-family: Arial, Helvetica, sans-serif;
}
.kelas {
      font-size: 50px;
      color: #FF0000;
      background-color: #000;
}
#identitas {
      font-size: 30px;
      color: #000;
      background-color: #FF0000;
}

- File index.html

<html>
  <head>
    <title>Contoh External Style</title>
    <link rel="stylesheet" type="text/css" href="gaya.css" />
  </head>
  <body>
    <div class="kelas">Contoh Penulisan Class</div> 
    <br \>
    <div id="identitas">Contoh Penulisan ID</div>
  </body>
</html>

CSS Framework

Framework secara sederhana dapat diartikan kumpulan dari fungsi-fungsi/prosedur-prosedur dan class-class untuk tujuan tertentu yang sudah siap digunakan sehingga bisa lebih mempermudah dan mempercepat pekerjaan seorang programmer, tanpa harus membuat fungsi atau class dari awal.

CSS Framework adalah paket kode CSS/XHTML sebagai acuan dasar membuat web, sehingga kita tidak perlu lagi menulis kode web (CSS/XHTML) dari nol.

Beberapa contoh CSS Framework yang sering digunakan diantaranya :

• Bootstrap
• YAML 4
• Less Framework 4
• 960 Grid System

Keuntungan Menggunakan CSS Framework

Penggunaan CSS Framework pada web memiliki beberapa keuntungan, diantaranya :

Lebih Cepat

Membuat sebuah website membutuhkan waktu yang tidak sebentar. Tapi dengan menggunakan framework kita tidak harus memulai semuanya dari awal untuk setiap projek

Tableless

Sebuah teknik dimana struktur website tidak menggunakan table pada layoutnya, melainkan dengan cara memisahkan data antara HTML dan CSS. Hal ini dilakukan agar lebih mudah dilakukan maintenance dan diakses oleh berbagai media aplikasi, berkurangnya kebutuhan bandwidth, dan yang lebih utama yaitu lebih SEO friendly.

Cross-browser Compatibility

Cross-browser compatibility ini memiliki pengertian bahwa website dapat diakses oleh berbagai browser.

Kekurangan Menggunakan CSS Framework

Selain kelebihan yang telah disebutkan di atas, terdapat juga kekurangan yang perlu diperhatikan jika menggunakan CSS Framework, diantaranya :

• Membutuhkan waktu untuk mempelajari framework, karena CSS yang tersedia tidak dibuat sendiri.
• Mengabaikan keunikan desain layout.
• Kode menjadi mubazir karena tidak semua kode yang ada pada framework kita gunakan pada tampilan web yang dibuat.
• Sulit untuk melakukan troubleshoot jika terdapat bug pada framework.
• HTTP request yang berlebihan karena biasanya framework CSS memiliki data yang terpisah-pisah.

Sekian pengenalan mengenai CSS. InsyaAllah pada lain kesempatan akan dibuat tutorial khusus mengenai CSS dan berlanjut ke bahasa pemrograman lainnya. Terima kasih telah membaca. Semoga bermanfaat.