Apa itu CSS?
Materi kita pada kali ini adalah tentang CSS.
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.(Wikipedia)
Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouseover, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format. CSS dikembangkan untuk melengkapi kemampuan HTML yang mengalami keterbatasan dalam hal penataan layout. Dengan mengkombinasikan kode HTML dan CSS, sebuah tampilan halaman web dapat dibuat artistik, penuh warna, dan tetap ringan. Pewarnaan dan posisi tampilan diatur melalui kode- kode dan bukan dengan menyisipkan file-file gambar atau animasi ke halaman web karena memberatkan pengunjung.
Ada 3 cara penulisan dalam CSS, yaitu :
- External style
- Internal Style, dan
- Inline Style
Pada cara pertama, External style, dokumen CSS disimpan pada file terpisah dengan file/dokumen HTML atau PHP nya. untuk menghubungkan kedua file digunakan perintah <link rel="stylesheet" type="text/css" href=“namafile.css" /> yang diletakkan diantara <hed> ...</head>. Perhatikan contoh berikut :
Nama file : coba.css
<html>
<html>
<title>latihan-css</title>
<style type="text/css">
#coba
{ padding: 10px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding:40px;
width:800px;
height:930px;
border:double;
border-style:outset;
border-color:#EA7500;
border-width:6px;
background-color:#FEE8BA;
}
</style>
</head>
<div id="coba">
</head>
<body>
</body>
</html>
Kemudian, buat sebuah file HTML ataupun PHP yang akan dihubungkan dengan file coba.css.
Perhatikan contoh berikut. Nama file: pertama.html
<html>
<head><link rel="stylesheet" type="text/css" href=“coba.css" /></head>
<body>
<center> Ini latihan css pertamaku</center>
</body>
</html>
Now, klik 2x pada nama file pertama.html yg baru saja anda buat dan lihat hasilnya. selamat mencoba
<center
:.