Home > How to > CSS (Cascading Stylesheets)

CSS (Cascading Stylesheets)

November 10th, 2007 Leave a comment Go to comments

Uhm.. berawal dari seringnya seorang teman bertanya tanya tentang jenis makanan aneh (menurutnya) yang bernama CSS jadi punya ide buat sedikit bagi tutorial, sebnernya css itu seperti apa bentuk dan wujudnya. CSS yang kepanjangannya rada ribet kalo disebutin Cascading Stylesheets,yah gitu deh pokoknya. Sama halnya dengan saya dulu, sebelum kenal ama CSS, suka ngabisin halaman web dengan aturan yang sama dan itu berulang2 pula. Begitu kenal ama MIss CSS, hehe.. script html jadi bisa dibuat pendek. Hanya butuh bikin class n aturan aturan yang nanti dipanggil kalo mau dipake. Dicoba aja Yah..

ini, ada sebuah script pendek. simpan dan kasi nama dengan home.html

<html>
<head>
<title >Profil Bunga Chantique – Gadis SMU Lincah</title>
<link rel=”Stylesheet” type=”text/css” href=”style.css” />
</head>
<body align=”center”>
<div id=”halaman”>
<div id=”atas”>
<h1>JerukNipis!!!</h1>
</div>
<div id=”menu”>
<a href=”home.html”>Home</a>
<a href=”profil.html”>Profil</a>
<a href=”galery.html”>Galery</a>
</div>

<div id=”isi”>
<p>buah kecil, ijo, kalo kegigit pait!!!.</p>
<p>…</p>
<p>…</p>
<p>…</p>
</div>

<div id=”samping”>
<p>Maksudnya jangan sekalian makan ama kulitnya.</p>
<p>kecut, tapi segeeerr…</p>
</div>
<div id=”bawah”>
Warning!!Jangan coba coba makan jeruk nipis sekalian ma kulit2nya!!!!
</div>
</div>
</body>
</html>

Nah, kalo udah.. coba sekarang kamu copy script ini, trus dikasi nama style.css.

body {
background: #dddddd;
color: #000;
font-family: Verdana, Helvetica, sans-serif;
font-size: 11px
}
#halaman {
background: #FFFF00;
border: thick double red
margin: 10px auto;
padding: 10px;
width: 700px
align: center;
}
#menu {
background: #DDff00;
border: thin dotted #800080
margin: 10px auto;
padding: 10px;
text-align: center;
align: center;
}
#bawah {
background: #DDFF00;
border: thin dotted #800080
margin: 10px auto;
padding: 10px;
text-align: center;
align: center;
}
H1, H2, H3, H4, H5, H6 { color: blue; font-family: sans-serif }
H1 { text-align: center }

huhu… sekarang coba jalanin di browser.. xixixi, emang si warnanya agak sedikit mencolok. Tujuannya si supaya bedanya keliatan. kalo ada pertanyaan, FF0000 itu apa?? align: center itu apa?? margin itu apa? padding itu apa?? hehehe.. cari cari di tutorial aja .. tanya ma om Goo. kalo dikasi disini bisa bikin 100 seri tutorial css dan saya ga pulang2.. :P
semoga membantu. :)

Categories: How to Tags: , ,
  1. November 11th, 2007 at 10:47 | #1

    kok kayak kenal ama Bunga Chantique.. kikik :p

  2. November 13th, 2007 at 00:29 | #2

    wah jago banget css-nya…
    mau dong diajarin… :D

  3. November 13th, 2007 at 15:58 | #3

    @kosha
    aduh.. jadi malu..
    ajarin Qmail aja gimana..

  1. No trackbacks yet.

FireStats icon Powered by FireStats