Seperti janji gue beberapa waktu lau klo gue pengen ngomong mengenai CSS (Cewe Super Sexy) he.... ga deng becanda, yang bener (Cascading Style Sheet). Ini sangat berhubungan dengan html jadi baca juga posting gue tentang Bikin Web. CSS ni jauh lebih menarik dibanding kode html karena lebih dinamis. CSS terletak diantara tag <head> & </head>. Gue kasih contoh dulu page tanpa pake CSS. Lo tulis di notepade :
<html>
<head>
</head>
<body>
Gue pengen bikin tulisan yang ini <b><font color="red" >tulisan tebal & berwarna merah</font></b> sedangkan ini adalah <i><font face="comic sans ms" color="red">tulisan miring, type font comic sans & berwarna abang</font></i> dan yang ini adalah <span style="background-color:yellow;"><font color="red" >tulisan merah dengan background kuning</font></span> tapi yang ga bikin pusing gimana ya ?
</body>
<html>
lalu save dengan nama coba.html kemudian bikin lagi dengan notepad yang baru & ketik berikut:
<html>
<head>
<STYLE TYPE="text/css">
B, I, span {color: red;}
I {font-family:comic sans ms;}
span {background-color:yellow;}
</STYLE>
</head>
<body>
Gue pengen bikin tulisan yang ini <B>tulisan tebal & berwarna merah</B> sedangkan ini adalah <I>tulisan miring, type font comic sans & berwarna merah</I> dan yang ini adalah <span>tulisan merah dengan background kuning</span> tapi yang ga bikin pusing gimana ya ?
</body>
<html>
lalu save dengan nama coba2.html lalu jalankan keduanya dengan klik 2x lewat explorer. Gimana hasilnya? sama kan? tapi lebih pusing yang mana lihat kodenya?
Dengan CSS kita bisa lebih mempersimpel kode html. Jadi tidak pusing melihat campuran kode & tulisan karena dengan CSS semuanya dikodekan terlebih dahulu & di kumpulkan menjadi satu baru kemudian bikin tulisan. Oh ya dengan CSS bisa juga bikin border baik di page maupun di setiap tulisan. contoh :
<html>
<head>
<STYLE TYPE="text/css">
B, I, span {color: red;}
I {font-family:comic sans ms;}
span {background-color:yellow;}
body {border:14px red groove;}
.frame {border:5px blue groove;}
</STYLE>
</head>
<body>
Gue pengen bikin tulisan yang ini <B>tulisan tebal & berwarna merah</B> sedangkan ini adalah <I>tulisan miring, type font comic sans & berwarna merah</I> dan yang ini adalah <span>tulisan merah dengan background kuning</span>. Nah klo yang ini <font class="frame">tulisan dengan border biru</font> tapi yang ga bikin pusing gimana ya ?
</body>
<html>
Sekarang sedikit ada gambaran ? Oh klo belum, blog ini juga penuh dengan kode CSS yang telah gue modifikasi. Pengen lihat tinggal klik kanan & View Source. Salah satu efek yang gue suka adalah saat cursor diatas link & adanya border. Lo boleh copy tu kode CSS gue di blog ini buat lo pelajari di rumah & biar lebih komplit lagi silahkan download file
Tidak ada komentar:
Posting Komentar