Dasar CSS
CSS singkatan dari Cascading Style Sheet, merupakan kode untuk mengatur tampilan halaman. Untuk mengatur jenis huruf, warna, ketebalan, bisa langusng menggunakan TAG HTML, namun dalam perkembangannya menjadi rumit kalau menyangkut desain yang banyak, kalau mau mengedit, maka tiap halaman harus di edit satu-satu.
Dengan CSS kita tinggal masuk ke script CSS nya lalu mengganti bagian mana yang akan diganti. Karena dalam CSS semua sudah dikelompokkan dalam ID atau Class tertentu, maka menjadi mudah manajemen halamnnnya.
CSS ada yang merupakan file terpisah, CSS external, yang kemudian di link ke halaman HTML. Satu file CSS bisa dipakai untuk banyak halaman dengan style sama. Pemisahan halaman HTML dengan CSS akan memudahkan dalam pengeditan. Namun hal ini membutuhkan hosting untuk menyimpan file. Keuntungan lainnya, dengan memisahkan file css, tak mudah ditiru orang hanya dengan melihat source codenya. Untuk untuk membuat CSS external, buatlah file dengan extensi *.css.
Misalnya: File: latihan1.css
body
{
bground-color:#red
}
kemudian buat file html, misalnya dengan nama latihan1.html
cara menyisipkan kode CSS yaitu dengan koneksi link css:
Sisipkan diantara tag <head>...</head> kode sebagai berikut:
<style type=text/css>
<link href="latihan1.css" rel="stylesheet" type="text/css">
</style>
Ada juga CSS yang menjadi bagian dari halaman, CSS internal, seperti dalam halaman Blogger saya. Kelebihannya, tak membutuhkan hosting kkhusus untuk menyimpan file css nya. Ini merupakan solusi untuk blog seperti Bloger, wordpress yang hanya menyediakan halaman jadi, tidak menyediakan hosting file.
Cara membuat CSS internal.
Letak script CSS berada pada tag <head>...</head>
Diawali dengan
<style type =”text/css”>
<--
di sini script CSS
-->
</style>>
Tag CSS: selector {properties:value;}
Contoh:
body {
bground-color:#ffffff;
}
akan menghasilkan latar belakang putih.
img
{
border:1px solid
}
akan menghasilkan, setiap tag <img> yang tidak ditentukan class nya, akan diberi border sebesar 1 px.
Kalau ditentukan kelasnya misalnya:
.display img
{
border:0;
}
gambar yang dimasukkanke class .display tidak ada garisnya.
Class selector
Dalam CSS tiap-tiap bagian bisa dibagi-bagi dalam class yang berbeda sehingga memudahkan dalam pengeditan. Misalnya kita akan membedakan jenis huruf, ukuran, warha untuk tanggal, judul tulisan, dan isi tulisan. Kita buat tiga class dengan nama “tanggal”, “judul”, “isi”
.tanggal
{
font-family:verdana, arial, Helvetica;
font-size:10 px;
color:#green;
}
penggunaanya:
<div class=”tanggal”>
12 Juni 2007
</div>
menghasilkan: 12 Juni 27, font verdana, ukuran font 10px, warna hijau.
.judul
{
font-family:verdana, arial, Helvetica;
font-size:12 px;
color:#red;
text-transform:uppercase;
}
tampilan: font verdana, ukuran font 12px, warna: merah, huruf besar semua (uppercase).
.isi
{
font-family:Georgia, “times new roman”, arial;
font-size:12 px;
color:#000000;
}
tampilan: font Georgia (cirikhas wordpress, juga template minima-nya blogger), ukuran font 12px, warna hitam.
.kolomisi
{
padding:10px 5px 10px 10px;
}
artinya:
kalau kolom <td> diberi style .kolomisi akan terformat dengan Padding atas:10px, padding kanan:5px, padding bawah: 10px, dan padding kiri: 10px.
Postingan
