Berbagi Ilmu, Pengalaman, Cita-cita dan Sekedar Bercerita
Cascading Style Sheets
Terkadang kita ingin membuat sebuah content web (isi) yang dibatasi oleh sebuah kotak. Jadi ketika content/isi melebihi kotak tersebut, maka tidak akan ditampilkan (disembunyikan). Disinila fungsi dari CSS dengan script Overflow-nya. Fungsi dari overflow adalah untuk menyembunyikan, menampakkan, atau membuat scroll. Fungsi ini bisa diterapkan dalam objek teks ataupun gambar.
Lanjutkan membaca “Membuat Isi Kotak Tidak Keluar dengan CSS (Overflow)”
Bagi mereka yang sudah ahli dan sering membuat web untuk client atau konsumen adalah sebutan bagi Web Developer atau mungkin untuk web pribadinya. Nah pertanyaanya adalah apakah sudah disebut seorang “Web Developer” yang bagus dengan telah membuat beberapa website? belum tentu juga. Berikut saya berikan ciri-ciri web developer yang bagus berdasarkan pengalaman dan baca sana sini:
Ada tiga cara penulisan kode CSS dalam HTML, yaitu :
Internal CSS
Yaitu menuliskan langsung scritp CSS di file HTML-nya.
<html>
<head>
<title>Belajar CSS</title>
<style type=”text/css”>
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>Selamat Datang CSS</p>
</body>
</html>
External CSS
Yaitu memanggil file CSS dari tempat lain, dengan kata lain file CSS terpisah dengan file HTML. Untuk lebih jelasnya kita lihat contoh dibawah ini:
<html>
<head>
<title>Belajar CSS</title>
<link rel=”stylesheet” type=”text/css”
href=”test.css” />
</head>
<body>
<h3> Selamat Datang CSS </h3>
</body>
</html>
Inline CSS
Yaitu penulisan kode CSS dalam tag HTML. Lihat contoh dibawah ini:
<html>
<head>
<title>Belajar CSS</title>
</head>
<p style=”background: blue; color: white;”>Style Menggunakan CSS</p>
</body>
</html>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>- Supono | Tutor | CSS</title>
<style type=”text/css”>
#leftbox{
margin-left: 0;
position: absolute;
top: 10px;
left: 80px;
width: 160px;
border: solid 2px #0000ff;
}
#centerbox{
position: absolute;
top: 10px;
left: 260px;
width: 400px;
height: 500px;
border: solid 2px #ff0000;
}
#rightbox{
position: absolute;
top: 10px;
left: 680px;
width: 20%;
height: 500px;
border: solid 2px #00ff00;
}
</style>
</head>
<body>
<div id=”leftbox”>
Here’s some text between the two <div> boxes.
</div>
<div id=”centerbox”>
Here’s some text between the two <div> boxes.
</div>
<div id=”rightbox”>
Here’s some text between the two <div> boxes.
</div>
</body>
</html>
Penulisan CSS
Script atau kode CSS harus ditulis dalam tag <style> kode CSS </style>.
Penulisan kode CSS disisipakan dalam dokumen HTML dalam elemen tag <head> kode CSS </head>, seperti terlihat pada contoh dibawah ini:
<html>
<head>
<title>Belajar CSS</title>
<style type=”text/css”>
</style>
</head>
<body>
<p>Isi Halaman Disini</p>
</body>
</html>
Ada tiga cara penulisan kode CSS dalam HTML, yaitu :
1. Internal CSS
Yaitu menuliskan langsung scritp CSS di file HTML-nya.
Contoh :
<html>
<head>
<title>Belajar CSS</title>
<style type=”text/css”>
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>Selamat Datang CSS</p>
</body>
</html>
2. External CSS
Yaitu memanggil file CSS dari tempat/folder/lokasi lain, dengan kata lain file CSS terpisah dengan file HTML. Untuk lebih jelasnya kita lihat contoh dibawah ini:
<html>
<head>
<title>Belajar CSS</title>
<link rel=”stylesheet” type=”text/css”
href=”test.css” />
</head>
<body>
<h3> Selamat Datang CSS </h3>
</body>
</html>
2. Inline CSS
Yaitu penulisan kode CSS dalam tag HTML. Lihat contoh dibawah ini:
<html>
<head>
<title>Belajar CSS</title>
</head>
<p style=”background: blue; color: white;”>Style Menggunakan CSS</p>
</body>
</html>
Persinggahan Supono 