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:
2. Embeded
Stiles CSS diletakan didalam tags head, misalnya sebagai berikut:
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.
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
