Sintaks CSS

Nah berikut ini adalah sintaks kode dari css. Sintaksnya ini sangat berbeda dengan HTML yang sudah saya jelaskan sebelumnya. Sintaks awal css seperti ini:

selector { property: value }

Keterangannya

Selector adalah tag HTML atau elemen (class/ID) yang dipilih.
Property adalah atribut yang ingin diatur nilainya
Value adalah nilai dari property, bisa berupa angka ataupun teks

Dan berikut ini adalah contoh kode cssnya:

body { color: blue }

Penjelasan
Disitu body adalah HTML yang ingin di atur stylenya, dan color adalah property dari css dan untuk blue adalah nilai value yang ingin diberikan kepada tag body itu.

Inline Style

Dan ini adalah contoh penulisan dalam html, penulisannya sebenernya ada 3 cara. Yaitu inline, header, dan linked css. Nah sekarang yang akan dibahas adalah yang inline dulu. Contoh kasus, misalnya anda ingin agar teks dalam tag <p> bewarna biru, maka untuk penulisan inline style adalah seperti:

<p style="color: blue">Ini adalah paragraf dengan warna biru</p>

Dan ini adalah source code lengkapnya:

<html>

<body>

<p style="color: blue">Ini adalah paragraf dengan warna biru</p>

</body>

</html>

maka hasilnya akan tampak seperti ini:

Ini adalah paragraf dengan warna biru

Untuk penulisan warna dalam css ini, bisa juga dengan menggunakan warna sesuai hexadesimal. Untuk mengetahui lebih lanjut, silahkan mampir ke sinihttp://www.w3schools.com/cssref/css_colors.asp . Dan anda juga bisa menggunakan aplikasi sejenis Kcolorchooser untuk yang memakai Linux dengan DE KDE, atau gpick atau bisa juga memakai gimp untuk mengetahui kode hexadesimal dari warna yang kita inginkan. Tetapi css juga sudah menyediakan beberapa warna yang bisa langsung ditulis dengan mode string seperti blue di atas. Contohnya yang sudah disediakan adalah red, black, white, magenta, pink, dan lain-lain.

Header Style

Setelah kita membahas tentang inline style di atas, maka untuk bentuk penulisan dari header style adalah seperti ini:

<head>

    <title>Header Style</title>

    <style type="text/css">

         p {

            font-family: sans-serif;

         }

    </style>

</head>

Dan ini source code lengkapnya

<html>

<head>

    <title>Header Style</title>

    <style type="text/css">

         p {

            font-family: sans-serif;

         }

    </style>

</head>

<body>

<p>Font-family yang digunakan adalah sans-serif</p>

</body>

</html>

Hasilnya nanti akan tampak seperti ini:

Font-family yang digunakan adalah sans-serif

Linked CSS

Dan ini adalah penulisan css yang terakhir dalam html. Yaitu melink alamat css ke dalam html. Dan untuk linked css ini memiliki beberapa keuntungan dibandingkan dengan cara yang sudah saya sebutkan di atas. Berikut ini adalah keuntungan yang akan kita dapatkan:

Dengan Linked CSS kamu tidak perlu lagi membuka dokument html untuk mengedit source cssnya. Karena file cssnya sudah terpisah dari file HTML
File css yang sama dapat digunakan untuk beberapa dokument HTML yang berbeda. Dengan ini akan terjadi penghematan waktu.
Lebih memudahkan pemrogram untuk mencari kesalahan atau memberbaiki dokumen CSS.

Cara untuk membuat linked css ini sangat mudah. Yang harus dilakukan adalah buka dulu teks editornya dan misal tulis source code css seperti ini:

p { 

  font-family: times;

  color: blue;

  font-size: 14px;

}

Lalu setelah itu, file css itu di save di 1 folder dengan file html yang kita buat. Misal di simpan di dalam Desktop dan di folder HTML dengan nama style.css
Setelah itu sekarang coba buat dokumen htmlnya dengan teks editor yang tadi, dan tulislah koding seperti ini:

<html>

<head>

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

</head>

<body>

<p>Font-family yang digunakan adalah sans-serif</p>

</body>

</html>

Lalu simpat di dalam folder HTML dan berinama style.html.
Nanti setelah itu buka file style.html, dan hasilnya pasti akan tampak seperti ini:

Ini adalah paragraf dengan warna biru

Selain peletakan dokumen css yang harus dalam 1 folder dengan HTML, anda juga bisa membuat folder baru yang isinya hanya file css. Misal di dalam folder HTML, anda membuat folder lagi dengan nama folder css, lalu cut file style.css tadi ke folder css itu dan nanti penulisan link style.htmlnya harus dirubah menjadi seperti ini:

<html>

<head>

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

</head>

<body>

<p>Font-family yang digunakan adalah sans-serif</p>

</body>

</html>