Apabila sobat telah memahami HTML, saya akan menjelaskan apa yang di maksud dengan CSS, CSS adalah kepanjangan dari cascading styling sheet,keunggulan dari CSS adalah kita tidak perlu mengatur tampilan pada website satu persatu sebab dengan CSS kita hanya perlu mendeklarasikan scriptnya di awal maka pada tiap posting atau artikel akan secara langsung berubah sesuai dengan yang kita inginkan atau kita deklarasikan .
Supaya anda tidak penasaran maka saya akan memberika contohnya, sebagai contoh ada tiga cara yang bisa digunakan untuk mengaplikasikan CSS pada file-file web atau HTML, yaitu:
Inline
Metode ini dilakukan dengan menuliskan kode-kode CSS satu per satu untuk setiap elemen HTML. Saya tidak menganjurkan metode ini sebab dampaknya adalah ukuran file web akan terlampau besar. Berikut ini contoh penggunaanya:
<p style="color:#black; text-aling:center;"> apakah anda dapat melihat perbedaannya? Warna tulisannya merah khan? Trus tulisannya di tengah, cakep nggak ?</p>
Penggunaan metode style dengan cara ini diawali dengan menuliskan tag HTML diikuti dengan "style", tanda sama dengan "=" dan dua tanda kutip yang mengapit property-property dan nilai-nilai.
Internal
Metode internal ini diaplikasikan dengan cara menyisipkan script CSS pada bagian <head> dan </head>. Script CSS tersebut diawali dengan penulisan <style type="text/css"> dan diakhiri dengan </style>
Contoh scriptnya seperti berikut ini:
<html>
<head>
<title>penerapan CSS dengan metode Internal</title>
<style type=”text/css”>
p{
color:#cc3300;
text-align:left;}
</style>
</head>
body>
…..
</body>
</html>
Eksternal
Metode eksternal inilah yang paling sering dilakukan serta yang sangat saya anjurkan . script CSS disisipkan secara terpisah dengan ekstensi ".css" (tanpa tanda kutip). metode ini dilakukan dengan pertama-tama membuat sebuah file CSS tersediri. Dalam file CSS tersebut kita mendefinisikan dan mendeklarasikan semua selector, property, dan value yang akan diberlakukan untuk web kita, misalnya:
/*CSS Document*/
p {
background: green;
text-align: center;
color: red;
font-family: "sans serif";}
#left-column{
float: left;
width:300px;}
#right-column{
float: left;
width:200px;}
File CSS tersebut kemudian dipanggil dengan menggunakan kode HTML seperti berikut:
<html>
<head>
<title>CSS External</title>
<link rel="stylesheet" type="text/css" href="alamat file css" />
</head>
<body>
<p>
Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph.
</p>
<div id="left-column">
...kode-kode HTML
...kode-kode HTML
...kode-kode HTML
</div>
<div id="right-column">
...kode-kode HTML
...kode-kode HTML
...kode-kode HTML
</div>
</body>
</html>
Nama file merujuk pada nama dan direktori tempat menyimpan file CSS yang telah Anda buat. Kode di atas disimpan pada bagian <head> dan </head>.
Metode pertama dan kedua, selayaknya digunakan apabila kita ingin memberikan desain yang sangat spesial dan spesifik untuk sebuah halaman dan elemen HTML tertentu. Sedangkan cara ketiga digunakan untuk mendefinisikan style untuk seluruh halaman web.
No comments:
Post a Comment