Tutorial Cara Menggunakan CSS Pada Web Design yang Baik

Pada web design, CSS berfungsi untuk mengatur tampilan web yaitu meliputi layout, pengaturan posisi objek, pengaturan warna, pengaturan tinggi atau lebar sebuah objek, pengaturan penggunaan jenis huruf dan ukuran huruf, belakangan CSS juga berfungsi untuk pengaturan atau pembuatan animasi yang disebut dengan CSS3 dengan dikombinasikan penggunaannya dengan HTML dan jQuery atau Javascript.

Untuk menggunakan CSS perlu diperhatikan mengenai kompatibilitas disetiap browser, karena browser yang ada sekarang mempunyai standar berbeda, sebaiknya penulisannya disesaikan dengan standar W3C, maka hampir dapat dipastikan tampilan website akan sama pada setiap browser.

1. CSS Internal

   CSS Internal adalah CSS Style yang penulisannya disatukan dengan halaman HTML, ditempatkan diantara tag < head >...< /head > untuk penulisannya sendiri seperti di bawah ini.

   
< html >
< head >
< style type="text/css">
... CSS Style ...
< /style >
< /head >
< body >
...Konten...
< /body >
< /html >


2. CSS External

   Berbeda dengan CSS Internal pada penggunaan CSS External terbagi menjadi dua buah file yaitu file HTML dan file CSS-nya itu sendiri, yang nantinya file CSS terpisah tersebut akan di load pada halaman HTML agar setiap pengaturannya bisa terbaca pada file HTML yang akan dibuat, selanjutnya tampilan HTML akan sesusai dengan yang kita atur pada file CSS Eksternal, untuk contoh cara penggunaannya sebagai berikut:

   Index.html
   
< html  >
< head >
< link href="style.css" rel="stylesheet" type="text/css" />
< /head >
< body >
... Konten ...
< /body >
< /html >


   style.css
   
body {
... css style ...
}

   #id {
   … css style …
   }

   
.class > li{
... css style ...
}


3. Inline CSS

   Penempatannya yaitu diletakan langsung pada tag HTML yang akan diatur, misalkan CSS Style akan ditempatkan pada tag

   maka diletakan setelah “p”, berikut untuk contoh penulisannya:

   
< p style="color:#fff;margin-left:20px;">Ini adalah paragraf.< /p>


Ketiga teknik diatas mempunyai kelebihan dan kekurangan masing-masing namun lebih dianjurkan menggunakan CSS Eksternal, beberapa keuntungan penggunaan CSS Eksternal diantaranya:

• Ukuran File halaman HTML nantinya akan lebih kecil, dikarenakan file CSS yang digunakan terpisah, jadi memungkinkan proses website loading kan lebih cepat.
• Memudahkan penggunaan CSS Style, misalkan kita mempunyai banyak halaman pada pembuatan website dan menggunakan style yang sama maka kita hanya perlu membaca file CSS yang telah dibuat dengan cara memanggil pada halaman HTML.

Selamat Mencoba untuk web design Anda .