Belajar CSS ( Cascading Style Sheets )


Akhir-akhir ini banyak sekali yang membuat templete blogger dengan berbagai view dan bentuk dari yang sederhana sampai yang rumit, dari yang hanya satu kolom sampai yang ada 4 kolom. Pertama kali saya mengenal templete secara detail dari blognya kang rohman. Terima kasih kang atas tutorialnya yang lengkap meskipun saya tidak baca semua, ya... minimal ada yang bisa digunakan untuk mempercantik tampilan blog. Templete hasil karya kang rohman sudah lumayan banyak juga dan sengaja saya koleksi di collector templete untuk sewaktu-waktu bisa digunakan.

Melihat dan membongkar templete blogger yang pernah ditemui, templete blogger dibuat dalam format XML atau singkatan dari eXtensible Markup Language dan penuh dengan code CSS atau singkatan dari Cascading Style Sheets. Nah modifikasi yang sering saya lakukan pada templete hasil karya orang lain yang salah satunya hasil akrya kang rohman adalah pada kode CSS-nya karena pada dasarnya kode yang lainnya bisa diinput pada widget yang ada dan perlu belajar kode tertentu lagi seperti kode huruf berjalan dengan marque dan lain sebagainya.

Yuk kita belajar tentang CSS. Syntax atau cara penulisan kode CSS adalah sebagai berikut :

selector {
property:value;
... }

tidak ada batasan jumlah property:value yang ditempatkan pada sebuah selector. Ada tiga tipe utama dari selector yaitu : type selectors, class selectors, and ID selectors. Type selector adalah eksisting tags HTML seperti body dan H1. Class ditandai dengan titik (.) sebelum nama selector dan ID ditandai dengan tanda pagar (#) sebelum nama selector. Perbedaan dari Class dan ID bisa dilihat di bawah :

Class
.navbar {
color:#0000FF;
}

ID
#footer {
color:#FF00FF;
}

Ada 4 cara untuk menerapkan stilysheet CSS pada kode HTML yaitu :

1. Inline

Stiles dideklarasikan dalam dokumen html, misalnya sebagai berikut:

<p style="FONT-SIZE: 16px; FONT-FAMILY: verdana">This is font size 16.</p>

maka tampilanya adalah :

This is font size 16.



2. Embeded

Stiles CSS diletakan didalam tags head, misalnya sebagai berikut:

<head>
<style type="text/css">
div {
background-color:#FF0000;
}
</style>
</head>

<body>
<div>
The background color is red
</div>
</body>


3. External Link

Kode CSS disimpan di Ekstenal File dengan ekstensi .css. Dan pada tags header maka ditempatkan kode misalnya sebagai berikut:

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

yang artinya deklarasi CSS disimpan pada file "external-stylesheet.css".


4. Import

Biasanya cara ini digunakan untuk stylesheet yang berbeda pada browser yang berbeda. Contoh penulisan adalah sebagai berikut:

<STYLE TYPE="text/css">
<!--
@import url(http://www.mysite.com/style.css);
-->
</STYLE>


Nah yang sering dipakai pada templete blogger dengan format XML adalah Embeded dimana kode CSS dideklarasikan didalam tags haed. Demikian dulu artikel belajar CSS awal, nanti pas dapat yang baru diupdate kembali.


Salam
haerudin

comment 5 comments:

mas doyok on September 17, 2009 at 9:12 AM said...

wah penting info kek gini
kalo mau maen blog
jgn lupa sambil belajar ini sekalian

asep canda on September 17, 2009 at 9:18 AM said...

keren sob infonya makasih ya

ruri on September 17, 2009 at 9:38 AM said...

tutorial yang sangat bagus sekali.
saya blom ngerti apa itu CSS..
masih perlu belajar lagi..

Catur on September 17, 2009 at 9:46 AM said...

nice tutorial mas haeking

Anonymous said...

good morning kang, and good posting mantap

Post a Comment

Delete this element to display blogger navbar

 
© Blog Personal Kang Hae | Design by Blog template in collaboration with Concert Tickets, and Menopause symptoms
Powered by Blogger