Jumat, 15 Februari 2013

Cara menghubungkan CSS ke HTML


Apa itu css? susah untuk di definisikan. Ibaratnya seperti kehidupan manusia, jika manusia ingin tampil lebih cantik dan ganteng, biasanya manusia akan pergi ke salon untuk menghias diri mereka. kalo di dunia pemrograman web, CSS tersebut merupakan salon dari HTML tersebut. Jadi kalo halaman web anda tampil lebih cantik atau ganteng silahkan tambahkan dengan CSS. CSS tersebut digunakan untuk mengatur tata letak object (layout) pada sebuah halaman web. Kalau jaman dulu tidak ada yang namanya CSS, jadi untuk mengatur tata letak object, programmer menggunakan fungsi table.
Pada tulisan perdana tentang css ini, kita akan membahas bagaimana cara mengkoneksikan atau menghubungkan HTML dengan css yang sudah kita buat. Untuk mengkoneksikan HTML dengan CSS memiliki 3 (tiga) cara yaitu:
1. Inline, code/script css ada di dalam tag html. Metode ini digunakan jika anda ingin memberikan css pada setiap tag html yang anda miliki. Untuk contohnya silahkan lihat coding dibawah ini:
1
2
<p style="property1:value; property2:value;">contoh css inline pada tag paragraf</p>
<h1 style="property1:value; property2:value;">contoh css inline pada tag heading</h1>
Pada contoh diatas pada tag paragraf <p> dan heading 1 <h1> diberikan sedikit css dengan menggunakan bantuan attribut style.
2. Internal, code/scipt css ada di dalam satu file dengan file html. Metode ini digunakan jika kita menggunakan selector yang tidak terlalu banyak. Untuk pembuatannya akan kita tuliskan di bawahnya tag tutup title </title> atau dibawah tag tutup head </head>. Lalu apa itu selector? biar postingannya tidak carut marud maka tentang selector akan dibahas di postingan berikutnya. Untuk contoh penulisan codinya akan seperti dibawah ini:
Dibuat di bawah </title> atau </head>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
.selector1{
property1:value;
property2:value;
property3:value;
}
#selector2{
property1:value;
property2:value;
property3:value;
}
p{
property1:value;
property2:value;
property3:value;
}
</style>
Dibuat/dipanggil di antara <body></body>
1
2
3
<div class="selector1">Menggunakan selector1 sebagai css</div>
<div id="selector2">Menggunakan selector2 sebagai css</div>
<p>css pada tag standar html</p>
Jika sebuah selector diawali dengan tanda titik (.) maka selector tersebut bertype class, sedangkan jika sebuah selector diawali dengan tanda pagar/hash (#) maka selector tersebut bertipe id. Silahkan perhatian dengan teliti cara pemanggilan selector-nya di dalam tag body.
3. Eksternal, file CSS terpisah dengan file HTML-nya.  Maksudnya disini file css dan file html berdiri sendiri dengan masing-masing. Jadi akan memiliki dua file, yaitu file bertipe css (sample.css) dan file bertipe html (sample.html). Metode ini digunakan jika kita banyak memiliki selector, jadi supaya programmer tidak bingung dalam pemrograman, maka filenya lebih baik dipisahkan saja, jadi lebih gampang untuk membaca coding-nya. Berhubung filenya terpisah, maka file tersebut perlu kita hubungkan/koneksikan. Misalnya disini kita memliki dua file, yaitu style.css dan index.html, jadi untuk menghubungkan kedua file tersebut, maka langkah-langkahnya sebagai berikut:
Pada file index.html, tuliskan/kerjakan di bawahnya tag </title>
1
<link href="style.css" rel="stylesheet" type="text/css" />
Pada file index.html di antara body panggil selector yang anda perlukan, misalnya:
1
2
3
<div class="selector1">Memanggil selector yang pertama</div>
<div id="selector2">Memanggil selector yang kedua</div>
<p>Memanggil yang menggunakan tag standar html</p>
Sedangkan di halaman style.css, silahkan dibuat selector yang anda perlukan
1
2
3
.selector1{property1:value; property2:value; property3:value;}
#selector2{property1:value; property2:value; property3:value;}
p{property1:value; property2:value; property3:value;}
Demikianlah cara-cara yang digunakan untuk menghubungkan/mengkoneksikan antara pemrograman css dengan pemrograman html. tentunya semuanya baik untuk digunakan, sekarang tergantung kebutuhan anda, apakah akan membuat css yang banyak atau sedikit? silahkan dibijaksanai oleh diri anda sendiri. selamat mencoba!

Tidak ada komentar:

Posting Komentar