17 March 2014
Pada web desain, 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.
-
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 >
-
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 ...
}
-
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>
- 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.
Sumber