Apa itu CSS? dan apa kegunaanya?. Pernahkah anda melihat sebuah halaman web dengan bentuk yang rapi, warna-warna yang indah. Itulah yang disebut dengan CSS(Cascading Style Sheet). Penggunaan CSS dilakukan untuk mempercantik tampilan web. Kode CSS ditulis didalam tag <style> </style>.
Ada 3 cara untuk menciptakan CSS dapat diterapkan ke dalam HTML :
- Inline CSS
- Embedded CSS
- External CSS
Untuk dapat berguru CSS yang harus disiapkan ialah :
- Text Editor (Notepad, Adobe Dreamweaver, dll), disini penulis lebih bahagia memakai text editor Notepad++
- Browser menyerupai Mozilla Firefox, Google Chrome,Opera, dll
Inline
Inline CSS dipakai pada tag HTML-nya Sebagai contoh, ketikkan source code berikut :
Simpan file CSS diatas dengan nama terserahanda.html, kemudian jalankan di Mozilla Firefox atau Browser lainnya. Disini sebagai teladan ialah akan menciptakan tag header <h1> </h1> yang akan dibentuk menjadi warna merah. Untuk tampilannya menyerupai berikut :
Embedded CSS
CSS ini melekat diantara tag <head> .. </head>
Sebagai teladan :
Simpan file CSS diatas dengan nama terserahanda.html, kemudian jalankan di Mozilla Firefox atau Browser lainnya.
<style type="text/css">
p {
color:red;
}
</style>
Source isyarat diatas ialah tag untuk CSS yang akan menciptakan tag yang didalam paragraf <p> </p> berkembang menjadi warna merah.
Untuk tampilannya sebagai berikut :
External CSS
External CSS ialah cara dimana kita nantinya akan menciptakan file.css sendiri, lalu memanggilnya dengan link dari tag HTML. Langsung saja saya contohkan dari External CSS.Pertama buatlah satu Folder. Buatlah halaman dengan nama style.css simpan kedalam folder yang anda buat tadi, lalu ketik source code dibawah :
#kotak1 {
background-color:red;
width:200px;
height:200px;
float:left;
}
Pengertian source code diatas ialah :
#kotak1 = nama id
background-color:red; = menciptakan background menjadi warna merah
width:200px; = menciptakan panjang dengan ukuran 200px
height:200px; = menciptakan lebar kebawah dengan ukuran 200px
float:left; = posisi objek berada di kiri
Untuk dapat menampilkan kita harus memanggil file .css yang telah dibentuk tadi. Buatlah satu file dengan nama index.html. Kemudian tuliskan source code dibawah ini :
<link rel="stylesheet" href="style.css" type="text/css"> = memamnggil file style.css
Masukkan kedua file tersebut ke dalam satu folder. Jika file style.css dan index.html sudah ada di dalam satu folder langkah selanjutnya ialah jalankan file index.html di Mozilla Firefox atau Browser lainnya.
Untuk tampilannya sebagai berikut :
Artikel diatas hanyalah dasar dari menciptakan CSS yang saya ketahui. Jika ada kekurangan dari penulisan harap dimaafkan. Sumber http://creativitywhitoutlimits.blogspot.com
EmoticonEmoticon