Pernahkah anda berpikir tentang Apa itu CSS...?? bagi anda yang suka sama
koding-koding alias pemrograman, pasti pernah berpikir demikian. Tenang....
kali ini saya akan membahas tentang CSS.
CSS
adalah singkatan dari Cascading Style
Sheets, yang berfungsi untuk mengontrol tampilan dari sebuah halaman
website agar menjadi
lebiah menarik.
Ada
3 cara untuk memasukkan CSS ke dalam dokumen HTML yaitu :
1.
Dengan menambahkan langsung di tag dokumen html, sebagai contoh:
<p style="color:blue">Membuat
tulisan warna biru</p>
<p
style="font-family:arial;font-size:150%;color:green">Membuat jenis
font, ukuran dan warna</p>
<p
style="color:yellow;background-color:red;width:60px;text-align:
center">Test</p>
<p
style="font-style:italic;">Membuat tulisan miring</p>
Maka
hasil dari style diatas adalah sebagai berikut :
Membuat tulisan warna biru
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>
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>
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. Anda dapat melakukan
perubahan-perubahan (diedit)
untuk mendapatkan hasil yang bagus dan refresh browser
untuk melihat hasilnya.
"Jangan lupa ya...taruh komentarnya di kolom
komentar"
"Semoga Sukses"
"Suksma"
BACA JUGA :
keren broo
BalasHapusvist too rizal-punya21.blogspot.com