[Linux]Pengenalan Syntax CSS


CSS (Cascading Style Sheet) merupakan standard yang dibuat untuk melengkapi standard HTML dalam melakukan formatting tampilan. Diperkenalkan sejak HTML 4.0, dan saat ini semua browser modern sudah mendukung CSS.

Mulai Belajar CSS

Umumnya, CSS dipelajari setelah anda memiliki pengetahuan atau mengenal HTML dengan baik, karena kedua hal ini saling terkait satu sama lain. Namun demikian, sangat memungkinkan untuk secara bersamaan mempelajari keduanya melalui contoh-contoh yang banyak terdapat di Internet.

Kegunaan CSS

Css dapat membantu kita melakukan hal-hal sebagai berikut;

Mengatur bagaimana sebuah elemen HTML ditampilkan oleh browser
Mempercepat dan menjaga konsistensi perancangan sebuah halaman situs karena CSS dapat diletakkan di file lain (eksternal) dan dapat digunakan berulang-ulang
Pemisahan antara proses pembuatan HTML dan pengaturan tampilan memberikan kita kemudahan dalam melakukan perubahan dan perbaikan di kemudian hari
CSS memiliki aturan prioritas mengenai properti yang mana yang akan digunakan oleh sebuah elemen HTML, hal ini memudahkan proses logika dalam tahap pembuatan, karena hasilnya menjadi bisa ditentukan (predictable).

Syntax

Syntax CSS terdiri dari 3 bagian;

Selector
Property
Value

Dituliskan dalam format;

selector { property: value }

Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.

Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.

Value adalah nilai dari pengaturannya.

Contoh Syntax:

h1 { color: red }

Contoh di atas menunjukkan

    Selector: h1
    Property: color
    Value: red

Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).

Pengelompokan Selectors

Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:

h1,h2,h3 { color: red }

Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.

Penggunaan Banyak Properties

Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).

Contoh:

h1,h2,h3 {color:red; font-family:arial; font-size:150%;}

Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type font arial, dan ukuran font 150%.

Cara Penulisan Yang Baik

Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan values nya di indent. Ya cuma biar rapih dan lebih mudah di baca aja sih, ga harus kok.

h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}

Sekarang anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda mengaplikasikan kode CSS ke halaman website.

CSS Comment

Kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan pengingat.

Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.

/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s