Sintaks CSS (Aturan Penulisan)


Artikel ini akan membahas lebih dalam tentang metode penulisan dan sintaks CSS, melihat bagaimana properti dan nilai – nilai (value) membentuk sebuah deklarasi atau pernyataan, beberapa deklarasi akan membentuk sebuah blok deklarasi, serta blok deklarasi.

CSS adalah bahasa deklaratif, yang membuat sintaksnya mudah dibuat dan mudah dimengerti. Selain itu, CSS juga memiliki sistem pemulihan kesalahan yang sangat bagus yang memungkinkan kamu untuk membuat kesalahan (error code) tanpa merusak segalanya (misalnya sebuah deklarasi yang tidak dipahami pada umumnya akan diabaikan begitu saja). Kelemahannya adalah bahwa bisa saja akan sangat sulit untuk memahami dan mencari kesalahan berasal. Untuk mengatasinya hanya satu yaitu membaca kodenya satu persatu hingga menjadi jelas titik permasalahannya.

Dalam penulisan kode CSS secara umum terdiri dari selector dan declaration (deklarasi) :

Aturan lengkap CSS

  1. Selector : digunakan untuk menargetkan elemen HTML yang ingin diberi style. Kamu akan mempelajari lebih lanjut tentang selector pada artikel selanjutnya.
  2. Declaration (deklarasi) : digunakan untuk mendefinisikan style apa yang ingin diterapkan, yang terdiri dari property dan value (nilai peropertinya). Setiap property memiliki value / nilai – nilai tertentu, setiap mendeklarasikan properti serta nilai propertinya dipisahkan dengan tanda titik dua (:) dan sebuah deklarasi diakhiri dengan tanda titik koma(;)
    1. Properties, kode pengenal yang dapat dibaca manusia yang menunjukkan fitur style / gaya apa yang ingin kamu ubah. Contoh : font-size(ukuran huruf), color(warna huruf), width(lebar), dll.
    2. Value, merupakan nilai properti yang menunjukkan akan seperti apa fitur style tersebut (misalnya ukuran huruf 10 pixel, warna huruf merah, atau lebar 200 pixel).
  3. Declaration block (blok deklarasi), merupakan gabungan dari beberapa deklarasi yang dikelompokkan dalam sebuah blok. Strukturnya adalah sebuah deklarasi yang di apit oleh kurung kurawal (di mulai dengan tanda “{“, dan diakhiri dengan tanda “}”).

Yang harus kalian tau adalah baik properti maupun nilainya bersifat case-sensitive dalam CSS (huruf besar dan huruf kecil dibedakan). Terdapat lebih dari 300 properti yang berbeda di CSS, dan masing – masing memiliki value / nilai – nilai yang berbeda, tidak semua nilai properti diizinkan untuk setiap properti.

Membuat kode CSS agar mudah dibaca

Seperti yang telah kamu lihat di atas, sintaks CSS tidak terlalu sulit. Namun, bahkan jika browser akan mengabaikan kesalahan penulisan, ada beberapa cara terbaik yang harus diketahui untuk membuat kode CSS supaya lebih mudah dibaca dan dipahami. Sehingga mudah nanti untuk mencari kesalahan berasal.

White Space

White space sebenarnya adalah spasi, tabs, dan baris baru dalam artian adalah sebuah ruang kosong / jarak antar karakter. Sama seperti HTML, browser akan mengabaikan ruang kosong pada kode CSS kamu. Tujuan white space / ruang kosong disini adalah untuk membantu pembacaan kode. Contoh sebuah deklarasi (declaration) masing – masing memiliki baris sendiri (seperti pada gambar di atas). Bisa dibilang penggunaan white space adalah cara yang terbaik untuk menulis kode CSS, karena akan lebih mudah pemeliharaan dan pemahaman pada setiap statemen / pernyataan.

Contoh :

div p {
    font: 1em/150% Helvetica, Arial, sans-serif;
    padding: 0;
    margin: 0 auto;
}
.article {
    display: block;
    padding: 15px 20px;
}

Kamu juga bisa menuliskan kode CSS di atas yang sama persis, tetapi sebagian besar whitespace dihapus. Namun jika kalian menuliskan kode di bawah ini pasti kalian akan kesulitan untuk membaca dan memahaminya.

div p {font: 1em/150% Helvetica, Arial, sans-serif;padding: 0;margin: 0 auto}
.article {display: block;padding: 15px 20px}

Kode Komentar

Sama seperti HTML, kamu juga dapat membuat kode komentar di CSS untuk membantu memahami fungsi – fungsi dari kode yang kamu buat. Kode komentar juga membantu orang lain untuk memahami kode yang kamu buat. Komentar sangatlah berguna untuk menemukan bagian – bagian dari kode kamu dan memudahkan untuk mencari penyebab kesalahan maupun dalam tujuan pembaharuan kode.

Komentar dalam kode CSS dimulai dengan tanda /* dan diakhiri dengan tanda */.

/* Ini adalah komentar pada CSS */
/*  ------------------------------------------------------*/
/* Style paragraf yang ada pada elemen div */
div p {
    font: 1em/150% Helvetica, Arial, sans-serif;
    padding: 0;
    margin: 0 auto;
}
/* Mengatur jarak pada article */
.article {
    display: block;
    padding: 15px 20px;
}

Shorthand (Meringkas kode)

Beberapa properti seperti font, background, padding, margin, dan border termasuk properti shorthand, karena nilai dari propertinya dapat disingkat dalam satu baris. Menghemat ruang / space dan juga waktu, serta membuat kode yang kamu buat menjadi lebih rapih.

Contoh :

/* dalam kode singkat seperti padding dan margin,
nilainya ditetapkan dalam urutan atas – kanan – bawah – kiri
(sama seperti arah jarum jam berputar).*/
padding: 10px 15px 5px 10px;

Kode di atas sama saja dengan :

padding-top: 10px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 10px;

Metode Penerapan CSS

Untuk memasukkan atau menerapkan CSS ke HTML ada 3 cara berbeda yaitu:

1. External Stylesheet

Kamu dapat menambahkan style CSS dengan link eksternal menggunakan tag <link rel=”stylesheet” type=”text/css” href=”url”>

<!DOCTYPE html>
<html>
<head>
    <title>Halaman HTML</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Hello World!</h1>
    <p>Ini adalah halaman HTML dengan CSS</p>
</body>
</html>

File CSS style.css

h1 {
    background: yellow;
    color: red; }
p {
    color: blue;
}

Bisa dibilang ini adalah cara yang terbaik, kenapa? karena anda dapat menggunakan satu stylesheet untuk menata beberapa dokumen/halaman dan hanya perlu memperbaharui CSS di satu tempat jika diperlukan perubahan.

2. Internal Stylesheet

Internal stylesheet adalah sebuah tempat dimana kamu tidak memiliki file CSS (eksternal). Pada metode ini CSS ditempatkan pada elemen <style> yang berada di dalam elemen <head> pada dokumen HTML.

<!DOCTYPE html>
<html>
<head>
    <title>Halaman HTML</title>
<style>
h1 {
    background: yellow;
    color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
    <h1>Hello World!</h1>
    <p>Ini adalah halaman HTML dengan CSS</p>
</body>
</html>

Ini bisa berguna dalam beberapa kondisi (seperti kamu menggunakan sistem CMS, yang dimana kamu tidak dapat memodifikasi file CSS secara langsung). Namun cara ini tidak begitu efisien, karena kode CSSnya akan di ulang – ulang di setiap halaman, dan harus di perbaharui di banyak tempat jika diperlukan perubahan.

3. Inline style

Ini merupakan metode merubah satu per satu tampilan elemen, menggunakan atribut style=””.

<!DOCTYPE html>
<html>
<head>
    <title>Halaman HTML</title>
</head>
<body>
    <h1 style="background: yellow; color: red;">Hello World!</h1>
    <p style="color: blue;">Ini adalah halaman HTML</p>
</body>
</html>

Cara ini bisa kamu gunakan untuk belajar CSS, namun tidak disarankan untuk digunakan untuk halaman yang banyak seperti aplikasi. Karena akan sulit untuk maintenance / pembaharuan serta sangat sulit untuk dibaca untuk style yang banyak.