Membuat jenis font,
ukuran dan warna
Test
Membuat tulisan miring
2. Dengan menaruhnya di dalam header
dokumen html.
Sebagai contoh kita akan membuat CSS
untuk mengontrol tampilan paragraf di dokumen html, cara penulisannya adalah
sebagai berikut:
<style>
p {
color:green;font-family:arial;font-size:120%;}
-->
</style>
Kemudian kita masukkan style
tersebut di antara tag <head> dan </head> :
<html>
<head>
<style>
<!--
p {
color:green;font-family:arial;font-size:120%;}
-->
</style>
</head>
<body>
<p>Saat ini saya sedang
belajar CSS</p>
<p>Pengaturan paragraf dengan
menggunakan CSS di dalam header dokumen html</p>
<p>Dengan contoh ini, maka
setiap paragraf atau yang berada diantara <p>dan</p>akan memiliki
format yang sama</p>
</body>
</html>
Hasil
3. Kemudian yang ketiga adalah
dengan membuat file CSS tersendiri yang tespisah dari dokumen html, secara umum
yang terakhir ini adalah yang paling sering digunakan. Untuk menghubungkan
dokumen html dengan CSS tersebut kita cukup menambahakan yang berikut ini di header
dokumen html:
<link rel="stylesheet"
href="style.css" type="text/css">
Sehingga di dokumen html akan
terlihat seperti berikut ini:
<html>
<head>
<title>Titel
websiteku</title>
<link rel="stylesheet"
href="style.css" type="text/css">
</head>
<body>
</body>
</html>
Untuk mengetahui lebih lanjut
tentang bagaimana CSS mengontrol sebuah halaman website, berikut kita akan
membuat sebuah halaman website sederhana yang menggunakan CSS.
Buka Notepad kemudian salin kode
berikut, dan simpan file tersebut dengan nama “csstest.html”
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel
websiteku</title>
<link href="style.css"
rel="stylesheet" type="text/css">
</head>
<body>
<div id="halaman"><!--
div id halaman dimulai -->
<div
id="judul"><!-- div id judul dimulai -->
<h1
class="judul">Disini judul websiteku</h1>
<h2
class="sub-judul">Disini sub-judul websiteku</h2>
</div><!-- div id judul
berakhir -->
<div
id="konten"><!-- div id konten dimulai -->
<div
class="kiri"><!-- div class kiri dimulai -->
<p>Disini navigasi bagian
kiri</p>
</div><!-- div class kiri
berakhir -->
<div
class="tengah"><!-- div class tengah dimulai -->
<p>Disini konten
websiteku</p>
</div><!-- div class tengah
berakhir -->
<div
class="kanan"><!-- div class kanan dimulai -->
<p>Disini navigasi bagian
kanan</p>
</div><!-- div class kanan
berakhir -->
</div><!-- div id konten
berakhir -->
<div
class="footer"><!-- div class footer dimulai -->
<p>Disini Footer
websiteku</p>
</div><!-- div class footer
berakhir -->
</div><!-- div id halaman
berakhir -->
</body>
</html>
Hasil
Yang berada diantara <–– dan
––> hanya sebagai keterangan agar lebih mudah dimengerti, anda bisa
menghapusnya. Sekarang buka file tersebut dengan browser, maka kita akan
melihat halaman yang polos dengan tulisan seadanya.
Sekarang salin CCS berikut kemudian
simpan ke folder yang sama dengan “csstest.html” dengan nama “style.css”
#halaman {/* "id"
dilambangkan dengan "#" */
width: 800px;
margin: 0 auto;/* agar dokumen
berada ditengah */
padding: 0 auto;
}
#judul {
width: 100%;
height: 100px;
background: #5F9EA0;
margin: 0;/* pengaturan sisi bagian
luar */
padding: 0;/* pengaturan sisi bagian
dalam */
}
#konten {
width: 100%;
margin: 0;
padding: 0;
}
.kiri {/* "class"
dilambangkan dengan "." */
width: 25%;
height: 300px;
float: left;
background: #ADD8E6;
}
.tengah{
width: 50%;
height: 300px;
float: left;
background: #FDF5E6;
}
.kanan{
width: 25%;
height: 300px;
float: right;
background: #ADD8E6;
}
.footer{
height: 40px;
background: #8FBC8F;
clear: both;
}
.judul {
color: Red;
padding: 10px 0 0 10px; /* penulisan
untuk semua sisi: atas kanan bawah kiri */
}
.sub-judul {
color: #ff0;
padding: 0 10px 10px;
}
p {
padding-left: 10px;/* penulisan
untuk satu sisi saja */
}
Yang berada diantara /* dan */ hanya
sebagai keterangan agar lebih mudah dimengerti, anda bisa menghapusnya.
Sekarang buka file “csstest.html”
dengan browser anda.
Itulah kira-kira secara dasar cara
kerja dari CSS untuk mengontrol halaman website.
Untuk melakukan eksperimen lebih
lanjut dan untuk mengetahui perintah-perintah CSS lainnya anda bisa mendownload
CSS editor TopStyle Lite. Dengan
program tersebut buka file CSS diatas kemudian lakukan perubahan-perubahan dan
refresh browser untuk melihat hasilnya. TopStyle Lite.
Tidak ada komentar:
Posting Komentar