CSS
- September 3, 2007
CSS for Blog (Introduction)
CSS (Cascading Style Sheets) digunakan untuk menampilkan elemen-elemen HTML seperti pengaturan background, font, margin, padding, dll. Keuntungan dari adanya CSS adalah kita tidak perlu merubah tampilan halaman web secara keseluruhan karena semuanya sudah ditangani secara terpisah oleh halaman CSS yang disebut Style Sheets.
Membuat halaman CSS :
1. Internal CSS, kita membuat CSS satu halaman dengan halaman web HTML kita
<head>
<style type=”text/css”>
hr {color: red}
p {margin-left: 20px}
body {background-image: url (” images / xxx.gif”)}
</style>
</head>
2. External CSS, kita membuat halaman CSS yang terpisah dengan halaman HTML kita, keuntungannya adalah saat melakukan perubahan style halaman kita cukup mengacu pada satu halaman CSS saja.
<head> <link rel="stylesheet" type="text/css" href="style.css” /> </head>
style.css adalah halaman sumber dari code css kita (extensi .css)
3. Inline CSS, biasanya digunakan untuk pengaturan elemen yang penggunaannya jarang atau accidental (tapi tergantung, kadang juga sangat sering digunakan)
<p style="color: red; margin-left: 20px"> Kolom ini hanya muncul sekali </p>
Aplikasi
CSS menggunakan beberapa cara pemanggilan yaitu dengan tag class atau tag id. Pada tag class, definisi css menggunakan awalan dot (.) dan pada tag id menggunakan awalan tanda (#). Juga kita bisa mendefinisikan tag elemen HTML secara langsung.
Definisi Tag HTML
h3
{
color: red;
text-align: left;
font-size: 8pt
}
Definisi Tag class
.postdate {
color:red;
font:10px Tahoma, Helvetica, Georgia, Sans-Serif;
}
Definisi Tag id
#postday {
color:yellow;
font:10px Tahoma, Helvetica, Georgia, Sans-Serif;
}
Contoh pemanggilan :
<div class=”postdate”> Ini contoh tag class <div>
<div id=”postday”> Ini contoh tag id <div>
Ok, kita lanjutkan lagi pada posting berikutnya …
woow…keren nih…
gini oom, kalo bikin halaman intro dulu sebelum masuk ke homepagenya gimana ya???
nice post jangan lupa mampir ya