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 membuat CSS bisa diterapkan ke dalam HTML :
- Inline CSS
- Embedded CSS
- External CSS
Untuk bisa belajar CSS yang harus disiapkan adalah :
- Text Editor (Notepad, Adobe Dreamweaver, dll), disini penulis lebih senang menggunakan text editor Notepad++
- Browser seperti Mozilla Firefox, Google Chrome,Opera, dll
Inline
Inline CSS digunakan 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 contoh adalah akan membuat tag header <h1> </h1> yang akan dibuat menjadi warna merah. Untuk tampilannya seperti berikut :
Embedded CSS
CSS ini menempel diantara tag <head> .. </head>
Sebagai contoh :
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 kode diatas adalah tag untuk CSS yang akan membuat tag yang didalam paragraf <p> </p> berubah menjadi warna merah.
Untuk tampilannya sebagai berikut :
External CSS
External CSS adalah cara dimana kita nantinya akan membuat file.css sendiri, kemudian 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, kemudian ketik source code dibawah :
#kotak1 {
background-color:red;
width:200px;
height:200px;
float:left;
}
Pengertian source code diatas adalah :
#kotak1 = nama id
background-color:red; = membuat background menjadi warna merah
width:200px; = membuat panjang dengan ukuran 200px
height:200px; = membuat lebar kebawah dengan ukuran 200px
float:left; = posisi objek berada di kiri
Untuk bisa menampilkan kita harus memanggil file .css yang telah dibuat 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 adalah jalankan file
index.html di Mozilla Firefox atau Browser lainnya.
Untuk tampilannya sebagai berikut :
Artikel diatas hanyalah dasar dari membuat CSS yang saya ketahui. Jika ada kekurangan dari penulisan harap dimaafkan.
