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:120%;color:green">Membuat jenis font, ukuran dan warna</p>
<p style="color:yellow;background-color:red;width:300px;text-align: center">Membuat teks background berwarna</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
Membuat teks background berwarna
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>Klik link berikut untuk melihat preview
3. Kemudian yang ketiga adalah dengan membuat file CSS tersendiri yang terpisah 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"><html>
<head>
<title>Titel websiteku</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
</body>
</html>Itulah ketiga metode untuk memasukan CSS ke HTML.
Untuk format XHTM anda harus menulis CSS dengan huruf kecil, usahakan untuk membuat CSS anda seminimal mungkin dengan membuang properti yang tidak penting.
misal dari pada menulis seperti ini:
margin-top: 10px
margin-bottom:10px
margin-left:20px
margin-right:20Bisa di persingkat menjadi:
margin: 10px 20pxatau jika nilainya beda-beda bisa di tulis dengan format:
margin: top right bottom leftUntuk penulisan CSS warna
#000000, #669922, #dddddd, #ffddddBisa di persingkat menjadi:
#000, #692, #ddd, #fddAtau seperti ini sering saya lihat:
padding: 0px 0px 0px 0pxPadahal kalau nilainya adalah 0 maka tidak perlu menulis px, jadi bisa ditulis menjadi:
padding: 0 0 0 0Karena nilainya semua sama jadi cukup ditulis dengan
padding: 0Demikianlah pelajaran singkat tentang CSS, mudah-mudahan bermanfaat.
No comments:
Post a Comment