Dasar dan Pengertian CSS
Penulis Blog | 17.18 | CSS | Tutorial Tips dan Trik blogCSS (Cascading Style Sheets) digunakan dalam kode HTML untuk menciptakan suatu kumpulan style yang terkadang dapat digunakan untuk memperluas kemampuan HTML. Misalnya untuk mengatur font dengan kode HTML murni pada sebuah tabel, maka akan sangat merepotkan, karena tag <BASEFONT> tak berpengaruh pada sel-sel table, sehingga semua sel harus diformat ulang untuk font tersebut. Misal, font yang diinginkan besarnya 12, dengan menggunakan tag <font>, semua sel harus diformat dengan menggunakan <font size="12">. Tentu saja hal ini tidak praktis. Apabila memakai code CSS, Anda hanya perlu mendefinisikan style tersebut sekali saja, dan style tersebut berlaku untuk keseluruhan sel table. Hal tersebut merupakan gambaran sekilas tentang CSS.
Mencoba CSS
Sebelumnya marilah kita mencoba code CSS berikut:
<HTML>
<HEAD>
<TITLE>Mencoba CSS</TITLE>
<STYLE TYPE = "text/CSS">
<!--
H1 { font-size:18pt;
font-weight:bolt;
color:blue;
background-color:yellow;}
--!>
</STYLE>
</HEAD>
<BODY>
<H1> Mencoba CSS</H1>
Bagaimana percobaannya? Berhasil apa tidak?
</BODY>
</HTML>
Maka hasilnya adalah:
Dari gambar terlihat bahwa background untuk judul (yang telah di tag dengan code <H1>) berwarna kuning, warna font biru, dan font terlihat tebal dengan ukuran font 18 pt, sedangkan bagian isinya tanpa memakai CSS dengan font default.
Sekarang marilah kita mendalami kode CSS ini.
1. Kode CSS ini diletakkan antara <HEAD> dan </HEAD>
2. Pasangan tag <STYLE> dan </STYLE> digunakan untuk mendefinisikan style sheets code CSS. Oleh karenanya, terdapat attribute TYPE dengan nilai adalah "text/CSS"
3. Pasangan tag <!-- dan --> adalah komentar dalam HTML. Pasangan tag ini diletakkan dengan tujuan untuk meletakkan komentar para pemrogram. Penulisan tag ini tidak menjadi keharusan.
4. Format code CSS tersebut adalah:
nama_tag { property_1:nilai_1;property_2:nilai_2;property_n:nilai_n; }
keterangan:
*nama_tag adalah tag untuk code CSS yang selanjutnya dapat dipanggil untuk style untuk font.
*tanda titik dua (:) diletakkan setelah property.
*tanda tanda titik koma (;) diletakkan untuk mengakhiri property atau diletekkan sebelum property berikutnya, sehingga property yang satu dengan yang lain terpisahkan oleh tanda titik koma.
Tidak ada komentar:
Posting Komentar