Mengenal Apa Itu CSS

Apa Itu CSS ?

CSS (Cascading Style Sheet) merupakan salah satu bahasa pemerograman yang bertujuan untuk menghias dan mengatur gaya tampilan / layout pada halaman website supaya lebih menarik. CSS adalah sebuah teknologi internet yang direkomendasikan World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970 dan terus berkembang hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).

Pada Desember 1996, W3C memperkenalkan level 1 spesifikasi CSS atau biasa dikenal CSS1 yang mendukung format, warna font, dan lain-lain. Kemudian pada bulan Mei 1998, W3C menerbitkan CSS2 yang di dalamnya diatur fungsi peletakan elemen. Dan sekarang W3C telah memperbaiki dan meningkatkan kemampuan CSS2 ke CSS3 (level 3).

CSS digunakan oleh web programer dan juga blogger untuk menentukan warna, tata letak font, dan semua aspek lain dari presentasi dokumen di situs mereka. Saat ini, hampir tidak ada situs web yang dibangun tanpa kode CSS.

Bagi Anda seorang blogger, harus tahu apa itu CSS dan bagaimana cara menggunakannya agar blog Anda lebih menarik dan banyak pengunjung yang betah membaca artikel. Banyak sekali hal yang bisa Anda lakukan agar tampilan blog lebih menarik seperti menambahkan animasi, transisi, slide dan sebagainya.

Pengenalan Dasar

CSS terdiri dari selektor, deklarasi, properti dan nilai. Seperti pada HTML, PHP dan bahasa pemerograman lainnya CSS juga memiliki aturan penulisan sendiri. Contoh penulisan kode CSS :

Body {
   background-color: white;
}

Body adalah selektor,
{..} adalah deklarasi,
background-color adalah properti,
white adalah nilai (warna).

Cara Menggunakan CSS

Dalam CSS, ada 3 cara bagaimana cara penggunaannya yaitu :

External Style Sheet
Internal Stylr Sheet
Inline Style

1. External Style Sheet

Sebuah style sheet eksternal sangat ideal bila CSS diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> dimasukan ke dalam bagian head :

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

Sebuah style sheet eksternal dapat ditulis dalam editor teks apapun. File tersebut seharusnya tidak berisi tag HTML. Style sheet Anda harus disimpan dengan ekstensi ".css". Sebuah contoh dari isi sebuah file style sheet adalah sebagai berikut :


hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}/div>

*Note : Jangan menambahkan spasi antara nilai properti dan unit seperti "margin-left: 20 px". Cara penulisan yang benar yaitu "margin-left: 20px".

2.Internal Style Sheet

Sebuah style sheet internal harus digunakan bila dokumen tunggal memiliki style CSS yang unik. Anda dapat mendefinisikan CSS internal di bagian kepala halaman HTML, dengan menggunakan tag <style>, seperti ini :


<head>

<style>

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

</style>

</head>

3. Inline Style

Untuk menggunakan gaya inline, Anda menggunakan atribut style dalam tag yang relevan seperti tag <p>. Atribut style dapat berisi properti CSS. Contoh ini menunjukkan bagaimana untuk mengubah warna dan margin kiri paragraf:

<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>

Contoh lain penggunaan CSS dengan Internal Style Sheet :

<!DOCTYPE html>

<html>
<head>
<style>
p {
    text-align: center;
    color: red;
} 
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

Coba copy kode diatas ke dalam text editor lalu simpan dengan nama file "coba.html". Kemudian buka dan lihatlah hasilnya. Jika Anda masih belum paham dengan penjelasan diatas, silahkan bertanya. Selamat mencoba dan semoga bermanfaat.