Tutorial Pemograman Dasar CSS Untuk Website Dan Blog
Selamat pagi sobat blog uya sur. Hari ini saya akan membahas tentang CSS. Sebagian dari kalian pasti tahu dengan CSS dan sebagian lagi belum tahu. Nah bagi kamu yang belum tahu dengan CSS, admin akan jelaskan disini beserta cara menuliskannya. Sebelumnya perlu kamu ketahui, CSS sangat penting dalam pemograman aplikasi web maupun blog, tanpa CSS, website dan blog kita tidak akan mempunyai bentuk serta warna yang indah. nah Mari ikuti penjelasan di bawah ini.
Pengenalan Kode CSS
CSS (Cascading style sheet) adalah pemograman yang mengendalikan bentuk serta memberi warna pada aplikasi web dan blog kita agar terlihat indah. Sama hal nya dengan styles atau aplikasi pembuat dokumen seperti
"microsoft word" atau "microsoft frontpage". Dengan CSS, kita akan mudah mengumpulkan dan membentuk sebuah Layout Website atau Blog hanya dalam sekali tulis. Dulu sebelum ada CSS, pembentukan dan warna pada website dan blog harus di isi dalam setiap kode HTML. Setiap halaman di isi di dalam kode Html. sehingga apabila ada perubahan pada website dan blog, maka kita harus merubah setiap kode HTML yang ada di halaman. lalu bagaimana jika website dan blog mempunyai ratusan bahkan ribuan halaman .nah maka dari itu Muncullah CSS. setelah ada CSS, maka tampilan di dalam website dan blog cukup hanya ditulis sebanyak 1 kali sehingga apabila ingin merubah warna dan bentuk, cukup mengedit 1 kode CSS saja.
"microsoft word" atau "microsoft frontpage". Dengan CSS, kita akan mudah mengumpulkan dan membentuk sebuah Layout Website atau Blog hanya dalam sekali tulis. Dulu sebelum ada CSS, pembentukan dan warna pada website dan blog harus di isi dalam setiap kode HTML. Setiap halaman di isi di dalam kode Html. sehingga apabila ada perubahan pada website dan blog, maka kita harus merubah setiap kode HTML yang ada di halaman. lalu bagaimana jika website dan blog mempunyai ratusan bahkan ribuan halaman .nah maka dari itu Muncullah CSS. setelah ada CSS, maka tampilan di dalam website dan blog cukup hanya ditulis sebanyak 1 kali sehingga apabila ingin merubah warna dan bentuk, cukup mengedit 1 kode CSS saja.
Sejarah Singkat CSS
CSS lahir pada tahun 1996 dan direkomendasikan oleh www (World Wide Web Consortium) atau W3C. Setelah CSS di standar kan. Internet Explorer dan Netscape menerbitkan browser terbaru mereka yang telah sesuai atau mendekati dengan standar CSS. Itulah Css.
Bentuk penulisan Kode CSS
Di awal penulisan CSS, kode tersebut harus di beri tanda <style type=”text/css”> dan penutup </style> . ini untuk memberitahukan kepada web server bahwa ini adalah kode CSS. Kode CSS dituliskan di dalam tag head atau di ambil dari link eksternal. Di dalam tag tersebut, kode CSS dituliskan seperti di bawah ini.
Body {
Color: #000;
Background: #fafafa;
}
Penjelasan kode di atas.
Body sebenarnya adalah kode html dari tag <body> dan disebut selector di dalam CSS. sebelum ada CSS biasanya kita membentuk dan mewarnai aplikasi web kita dengan cara menuliskan style di dalam tag body. Bentuk penulisan html adalah seperti berikut.
<body color=”#fffff” background=”#fafafa”>
Css juga bisa di tuliskan di dalam tag body. Sebagai contoh lihat kode di bawah ini.
<body style=”color:#fff; background:#fafafa;”>
Tapi tentu saja apabila kita ingin merubah warna dari tulisan dan latar belakang warna pada body, maka kita harus mengubahnya pada setiap tag body. Untuk kode yang simple dan dilakukan hanya 1x,maka dibuatlah kode CSS seperti yang pertama kita lihat sebelumnya. Jadi walaupun kita mempunyai ratusan hingga ribuan file html, dengan mengubah css body di dalam kode tersebut, maka akan merubah seluruh tampilan web yang mempunyai tag body.
Color di dalam tag CSS adalah mendefenisikan warna tulisan di dalam tag body. Karena body adalah keseluruhan aplikasi web. Maka setiap tulisan yang ada di dalam tag body akan berubah menjadi warna hitam (sesuai dengan yang isi pada kode css #000). Kemudian ada background: #fafafa; kode tersebut mendefinisikan latar belakang warna pada tag body. Seperti sebuah kertas dokumen yang mempunyai warna beragam. #fafafa adalah kode warna, selain menggunakan kode warna, kita juga bisa langsung mendefenisikan warna dengan cara menuliskan nama warna tersebut. sebagai contoh lihat di bawah ini.
Body {
Color: black;
Background: white;
}
Ada beberapa dasar warna yang bisa dituliskan seperti itu. Namun tidak semua mendukung penulisan warna dengan menggunakan nama warna. Jadi hanya warna yang standar bisa di definisikan seperti itu. Tanda {} adalah sebagai tag pembuka dan penutup kode CSS kita. tanda tersebut memberitahukan kepada web server untuk mengakhiri kode tersebut. selain itu CSS juga bisa dituliskan dalam 1 baris. Sebagai contoh lihat kode di bawah ini.
<style type=”text/css”>
Body{color:black;background:white}
</style>
Tanda (;) menandakan bahwa itu adalah akhir dari kode properti kita. jika ada tanda ; dan kemudian ada properti baru. maka di ibaratkan seperti ini.
Select body dan isi properti color dengan warna black. Akhiri properti. Properti baru, isi properti background dengan warna white. Akhiri kode selector body.
Seperti yang saya katakan sebelumnya, CSS juga bisa di panggil dari file eksternal CSS. Bentuk penulisan pemanggilan file CSS adalah seperti berikut.
<link rel=”alternate” type=”text/css” href=”url.com/lokasifile.css” />
Atau
<link rel=”alternate” type=”text/css” href=”lokasifile.css” />
Tergantung dimana kamu meletakkan file CSS tersebut. untuk file yang ada di tempat lain selain URL website atau blog anda, maka penulisannya harus menggunakan URL (url.com/lokasifile.css) . tapi jika CSS kamu diletakkan di dalam direktori website atau blog milik kamu sendiri, maka kamu hanya perlu menuliskan letak lokasi file tersebut (lokasifile.css). nah itulah CSS. Demikian pembahasan kita tentang dasar pemograman CSS. Semoga kamu paham dan mengerti dengan apa yang saya jelaskan disini. Dan semoga bermanfaat untukmu.
Comments
Post a Comment
Masukkan Komentar anda disini. mohon maaf, Link Aktif yang ada di dalam komentar akan terhapus secara otomatis oleh system blog ini.
komentar akan di tampilkan setelah disetujui oleh admin. terima kasih