Di dalam dunia desain web,pada layout, format huruf, dan lainnya yang ada dalam sebuah web menjadi bagian yang amat penting bahkan bisa jadi yang paling lama dibanding dengan bagain desain web lainnya. Karena jika kita membuat layout yang salah, maka web kita juga akan salah diterjemahkan oleh browser. Hal itu juga bisa dikarenakan setiap browser memilliki dukungan CSS yang berbeda dan tentunya standar dari browsernya sendiri. Browser yang paling rewel soal layout css dalah Internet Explorer karena kurang dukungannya terhadap CSS.
Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada dikumen HTML yang telah jadi.
Dalam melayout sebuah web, ada dua metode yang sering dipakai untuk membuat sebuah layout halaman web yaitu:
1. Metode Table
2. Metode Div
Manfaat dari CSS:
1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
4. Dapat berkolaborasi dengan JavaScript.
5. Digunakan dalam hampir semua web browser.
Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:
Header –> berisi tema web/ judul
Menu –> menu link web
Content –> isi dari web
Footer –> identitas/ copyright
Atribut ID
Ada dua cara penempatan elemen dalam web dengan CSS yaitu:
1. Position (Posisi)
Mengunakan properti position terdapat 4 cara:
a.Static –> posisi normal (default).
b.Relative –> posisi elemen tergantung dari elemen yang lain.
c.Absolute –> posisi elemen berpatokan pada jendela browser.
d.Fixed –> posisi elemen tetap walaupun digeser.
2. Float (Nempel)
Menggunakan properti float atau clear:
a. Float:left –> elemen akan menempel pada sebelah kiri elemen induk.
b. Float:right –> elemen akan menempel pada sebelah kanan elemen induk.
c. Clear:left –> elemen akan menempel pada sebelah kiri dan berada di bawah.
d. Clear:right –> elemen akan menempel pada sebelah kanan dan berada dibawah
e. Clear:both –> elemen akan berada pada posisi bawah elemen diatasnya.
Margin : jarak/batas elemen dengan elemen lain
Border : border/gari tepi elemen
Padding : jarak elemen dengan isi elemen (elemen anak)
Contoh penulisan CSS :
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:
1. External Style Sheet (file CSS berbeda dari file HTML),
- Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
- Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).
Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css
Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag yang diletakkan diantara tag . Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi gunakan saja file style.css dan coba.html anda hanya perlu mengubah isinya. Untuk file HTML anda gunakan coba.html dan ubah isinya pada bagian saja bagian yang didalam tidak usah diapa-apakan.
Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya saja. Bagaimana anda sudah paham kegunaan CSS.
CSS memiliki ratusan properties dan values, tentu saja saya tidak akan menerangkan semuanya, saya hanya akan menerangkan yang penting-penting saja.
Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis huruf yang digunakan. Anda dapat menggunakan property font-family, yang mirip dengan tag .
Tidak ada komentar:
Posting Komentar