Semua yang Aku Bagikan: 4 Cara Load CSS ke HTML

Ternyata ada banyak cara yang bisa digunakan untuk me-load CSS ke dalam HTML. Postingan ini akan menjelaskan 4 cara yang digunakan untuk memuat CSS didalam HTML beserta kelebihan dan kelemahanya.

Secara Outline
Cara ini paling sering digunakan. Yaitu dengan memisah file HTML dan CSS nya. Cara menghubungkannya sebagai berikut:
```
<link href="../CSS/judul.css" rel="stylesheet" type="text/css"/>
```
Kelebihan :
- memudahkan memilah antara source / konten web dengan desain
- Dengan adanya file CSS memudahkan untuk me-maintainnya jika sewaktu waktu ada yang diubah, tidak perlu merubah file HTML tersebut.
Kelemahan :
- Harus me-load setiap file CSS ke HTML, jika file CSS nya banyak tentu sedikit merepotkan.
- Perubahan pada CSS dilakukan pada file yang berbeda beda
Secara Inline
Cara ini tergolong praktis karena kode CSS akan dimuat pada file yang sama dengan file HTML.
Penulisannya diletakkan di dalam tag <head> seperti berikut:
```
 
```
```
<style type="text/css">
            body{
              background: #151515;
              font-family: "Arial Black", Gadget, sans-serif;
              }
</style>
```
Kelebihan :
- Pemrogramannya menjadi lebih praktis karena hanya bekerja di satu file
- Untuk kondisi kode css yang sedikit cara ini sangat efektif
Kelemahan :
- Jika kode CSS yang dimuat sangat panjang akan sangat sulit diteliti dan membuat kode pada file menjadi kompleks
Import File

Cara ini jarang digunakan. Yaitu kombinasi cara 1 dan 2. File CSS akan dipanggil dalam tag <style> dengan perintah bgerikut :
```
<style type="text/css">
             @import "../CSS/list.css";
</style>
```
Kelebihan :
- Dapat digunakan sebagai bentuk keamanan file
Dalam Tag HTML

CSS diakses langsung di setiap eemen HTML dengan menambahkan atribut style pada header tag. Berikut contohnya :
```
<span style="color:  #F00;">Hello</span> 
```
Kelebihan :
- Dapat langsung mendefinisikan css disuatu elemen tanpa selektor
- bersifat spesifik untuk tag HTML yang tercantum
kekurangan :
- Cara ini sangat tidak dianjurkan karena membuat kode menjadi semakin rumit. Konten data akan bercampur dengan desain css.

Untuk dapat lebih memahami , silakan download source yang berisi demo dari cara-cara diatas:

Link : source code[1.46 KB]

Semua yang Aku Bagikan

Senin, 10 Oktober 2011

4 Cara Load CSS ke HTML

1 komentar: