Penulisan Sebaris
Penulisan CSS dengan cara sebaris adalah cara yang paling mudah dilakukan. Biasanya penulisan sebaris dilakukan apabila hanya ingin melakukan kustomisasi pada satu elemen unik saja, karena dinilai lebih efektif daripada penulisan internal maupun eksternal. Berikut adalah cara menuliskan CSS sebaris:<div style="width: 300px; height: 200px; background: #ccc;"></div>Kode di atas akan menghasilkan persegi panjang dengan latar abu-abu, lebar 300px, dan tinggi 200px.
Penulisan Internal
Penulisan CSS selanjutnya adalah dengan cara internal. Penulisan secara internal ini lebih efektif apabila jumlah elemen yang dikustomisasi semakin banyak, namun masih ingin menjadikan antara berkas HTML dan CSS masih dalam satu berkas .html. Cara menulisnya adalah dengan menambahkan elemen <style> pada elemen <head>. Berikut adalah contoh penulisan CSS internal.<html>
<head>
<style>
body {
background: #eee;
margin: 0px;
padding: 0px;
}
#kotak {
background: #f00;
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div id="kotak"></div>
</body>
</html>Penulisan Eksternal
Pada penulisan eksternal, CSS diletakkan di berkas yang terpisah dengan HTML. Berkas CSS dikenal dengan .css. Kelebihan dari penggunaan penulisan CSS eksternal ini, kita bisa melakukan kendali style dengan mudah tanpa harus melakukan penggantian satu per satu di elemen yang terpasang di HTML. Untuk kasus yang sama, penulisan internal sebelumnya akan ditulis dengan penulisan eksternal.Berkas HTML - index.html
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<div id="kotak"></div>
</body>
</html>Berkas CSS - style.css
body {
background: #eee;
margin: 0px;
padding: 0px;
}
#kotak {
background: #f00;
width: 500px;
height: 300px;
}Semua gaya penulisan bisa kamu coba untuk menemukan kelebihan dan kekurangannya. Setiap gaya penulisan punya tempat sendiri sesuai dengan kasus yang kamu hadapi.
Selanjutnya: Membangun Website dengan CSS (Bagian 3)
EmoticonEmoticon