Sintaks Kode 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 sini http://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:

  1. Dengan Linked CSS kamu tidak perlu lagi membuka dokument html untuk mengedit source cssnya. Karena file cssnya sudah terpisah dari file HTML
  2. File css yang sama dapat digunakan untuk beberapa dokument HTML yang berbeda. Dengan ini akan terjadi penghematan waktu.
  3. 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>

Lihat di atas pada bagian href=”css/style.css”.

Advertisements

13 comments

  1. Please let me know if you’re looking for a author for your blog.
    You have some really great articles and I believe I would be a good asset.
    If you ever want to take some of the load off, I’d love to write some
    content for your blog in exchange for a link back to mine.
    Please blast me an email if interested. Cheers!

  2. Simply wish to say your article is as amazing.
    The clarity to your publish is simply spectacular and that i can think you are an expert in this
    subject. Well along with your permission allow me to grasp your feed to stay up to date with impending post.
    Thank you a million and please carry on the gratifying work.

  3. Lately I was looking on the net in search of sites with
    any kind of information about nike football pants and stumbled upon wordpress.com.
    Thank you for posting this useful post. You may be surprised to find out
    that this is the most useful web page I found that had any useful ideas about this.
    I really wanted to write thanks – this is precisely what I wanted to see.

  4. Just recently I was searching Yahoo hoping to find websites with info about table soccer party and discovered
    . I have to say this is the most useful site I have came across with
    any real info on this. I really just want to write thanks this post was exactly what I wanted to read.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s