memahami css

Memahami CSS dalam membuat halaman web | WebCSS | 01

Posted on
Memahami CSS dalam membuat halaman web merupakan hal yang paling penting bagi web designer !! sebab dan alasannya adalah CSS merupakan sekumpulan kode desain yang digunakan untuk mempercantik tampilan website. Apakah anda memperhatikan warna-warna dari halaman website ini? apakah anda memperhatikan besar dari text judul dan sub judul di postingan ini? dan apakah anda melihat tata letak dari setiap komponen yang ada di website ini? semuanya adalah urusan CSS. Untuk membahas lebih rinci tentang memahami CSS.
1. Memahami CSS berdasarkan perumpamaan
[sc name=”iklan umum terbaik 300 x 250 float left”]
Agar lebih mudah memahami CSS, saya akan membuat sebuah perumpamaan yang membuat anda lebih paham apa itu CSS?. Di dalam pembuatan halaman website umumnya anda pasti akan mendengar istilah tentang HTML, CSS, Javascript, PHP dan MySQL. dari ke-5 istilah tersebut, semuanya memiliki peran dan fungsi masing-masing. Jika seandainya ke-5 istilah tersebut diibaratkan seperti “manusia”, HTML adalah fisiknya, CSS adalah pakaiannya, Javascript dan PHP adalah respon fisik sedangkan MySQL adalah Otak yang menyimpan berbagai data. Dari perumpamaan inilah, CSS dapat disimpulkan untuk mempercantik halaman website sebagaimana pakaian mempercantik tampilan fisik manusia. Konsep dasar dari CSS sendiri adalah sebagai “Pakaian” untuk HTML. Artinya, CSS tidak ada gunanya jika tidak ada desain kode HTML , karena CSS diciptakan untuk mempercantik halaman website dengan menargetkan ke beberapa desain kode HTML. sama seperti pakaian manusia dimana setiap desainnya dirancang dengan menyesuaikan ukuran fisik dan selera masing-masing individu. Sebagaimana pakaian pada manusia yang memiliki berbagai macam type, properti dan ukuran, CSS memiliki berbagai macam type, Elemen, properti dan nilai yang membedakan antara desain kode CSS yang satu dan yang lainnya. Sebagai contohnya perhatikan kode CSS berikut :
Baca juga :   Menggunakan Xampp untuk coding | Web | 03
<!DOCTYPE html>
<html>
<head>
 <meta charset = "UTF-8">
<style>
 .tulisan-merah-standar { color: red }
 .tulisan-biru-standar { color: blue }
 .tulisan-merah-besar { color:red; font-size: 30px }
 .tulisan-merah-besar { color:blue; font-size: 30px }
</style>
</head>
<body>
 <p class="tulisan-merah-standar"> Ini adalah tulisan merah </p>
 <p class="tulisan-biru-standar"> Ini adalah tulisan biru </p>
 <p class="tulisan-merah-besar"> Ini adalah tulisan merah dengan text sebesar 30px </p>
 <p class="tulisan-biru-besar"> Ini adalah tulisan biru dengan text sebesar 30 px</p>
</body>
</html>
Jika Kode desain dari CSS + HTML di atas digenerate, maka tampilannya akan seperti gambar dibawah ini :
Dengan menggunakan CSS, Tampilan halaman website dari struktur kode HTML akan berbeda-beda sesuai dengan nilai properti yang kita buat. Untuk baris pertama saya menginginkan kalimatnya berwarna merah tetapi dengan ukuran yang standar, untuk baris kedua tidak jauh berbeda hanya warnanya saja yang berubah menjadi biru, sedangkan baris ketiga hanya ukurannya saja yang berbeda dari baris pertama dan untuk baris keempat hanya berbeda ukuran dari baris kedua. Jika di berikan perumpamaan bagaikan “manusia”, Baris satu adalah anak kecil yang memakai pakaian yang berwarna merah, sedang baris dua adalah anak kecil yang memakai pakaian biru, Untuk baris ketiga dan keempat adalah orang dewasa yang memakai pakaian merah dan biru.

Leave a Reply