Sabtu, 18 Juni 2011

Pengertian CSS dan Cara Penerapan CSS pada HTML

Pada artikel saya kali ini saya akan menjelaskan sedikit tentang pertanyaan rekan pixar ataupun yang lainnya tentang CSS. Apa yang dimaksud dengan CSS?! CSS adalah singkatan dari Cascading Style Sheet, digunakan untuk mengatur style atau tampilan dari dokumen HTML. Menurut wikipedia, CSS adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu website, baik tata letak, jenis huruf, warna, dan semua yang berhubungan dengan tampilan atau gaya suatu web.
Mengapa harus memakai CSS?!
Penggunaan CSS merupakan standar untuk web-web modern (Web 2.0). Sebagian pembaca mungkin sudah tau bahwa implementasi CSS, Table Less dan Semantik tapi tidak Divitis (maniak div) merupakan standarisasi web yang baik. Saya sendiri sebetulnya tidak peduli apakah CSS adalah Standar Web ataupun Bukan, menurut saya kita memang harus melakukan implementasi CSS untuk setiap perancangan website kita karena dengan CSS kita tidak akan melakukan hal-hal yang terus diulangi dalam menerapkan suatu gaya pada tag HTML yang kita buat, cukup satu kode untuk semua mark up yang sama.
Lalu bagaimana teknik implementasi CSS pada tag HTML yang kita buat?!
Ada dua cara yang bisa diterapkan untuk menggunakan CSS pada web. Cara yang pertama adalah dengan membuat CSS langsung didalam satu file HTML kita (internal / inline style sheet). Cara yang kedua adalah dengan cara memanggil CSS tersebut dari file CSS tersendiri (external style sheet). selanjutnya mari kita langsung praktek silahkan buka dreamweaver anda atau text editor, dsb :

1. Internal Style Sheet

Cara membuat internal Style Sheet adalah dengan menambahkan tag sehingga kode HTML menjadi sebagai berikut
?













<html>
<head>
<title>Belajar CSStitle>
<style type="text/css">
<style>
<head>
<body>
</body>
</html>

Ok, sekarang anda paham kan dimana kita harus menerapkan CSS dengan cara internal Style Sheet.. Tapi saya tau anda tidak puas kalau saya hanya menerangkan dimana saya harus meletakan CSS nya. kurang seru tanpa praktek membuat web CSS, betul tidak?! Ha... karena itu mari kita mulai membuat website dengan teknik CSS. berikut gambar proyek web table less dengan penerapan CSS kita kali ini


Bagaimana cara membuatnya ?!
Pertama-tama kita buat tag html sebagai berikut :
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
<head>
<title>CSS Pertamakutitle>
<style type="text/css">
  
style>
head>
<body>
  
<ul class="navbar">
    <li><a href="index.html">Homea>
    li><li><a href="about.html">Abouta>
    li><li><a href="gallery.html">Gallerya>
    li><li><a href="links.html">Linksa>
li>ul>
   
<h1>CSS Pertamakuh1>
<p>Selamat datang di Web CSS kup>
<p>Halo ini website CSS ku, mungkin tidak ada gambar
  disini tapi setidaknya ini punya gayap>
<p>Harusnya ada lebih gaya markup disini tapi saya tidak
  tahu bagaimana membuatnya,
  apakah ada yang bisa memberitahu?!p>
   
<p>hubungi saya kalo ada yang bisa karena
saya sedang mati gayap>
<address>Made 12 Juni 2009 by myself.address>
body>
html>
Tag HTML tersebut akan menghasilkan document website yang dapat dilihat pada gambar sebagai berikut

Uek, jelek bukan hasilnya, maka dari itu sekarang mari kita tambahkan gaya untuk tag HTML tersebut dan menambahkan mark up CSS pada tag HTML, ganti tulisan dengan markup sebagai berikut
?
1
2
3
4
5
6
body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: white;
    background-color: #555555
}
Kegunaan dari tag diatas adalah untuk memberi jarak lapisan (padding), warna dan jenis font yang kita gunakan serta warna latar dari web ( body HTML ). Untuk Warna anda bisa dengan langsung menambahkan jenis warna seperti black, white, purple, yellow, red, dsb, atau jika warnanya unik anda bisa menambahkan kode warna seperti #8c1f1f ( untuk merah tua ). Kode warna ini bisa anda dapatkan dari photoshop. Ok sebelum melanjutkan bila belum mengetahui kegunaan masing-masing properti CSS seperti padding, color, background dsb, silahkan baca postingan saya mengenai dasar CSS di link ini Pengertian dan Tutorial Dasar CSS untuk Pemula dan link ini Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model : Border, Padding, Margin, Outline
Sekarang kita mark up CSS untuk tag HTML ul. bila anda perhatikan tag UL mengandung class :

Reaksi:

0 komentar:

Posting Komentar

WARNING !
Komentar anda tidak boleh mengandung unsur:
1.Penghinaan, Rasis dan Pelecehan
2.Spamming (Spam Comments)
3.Link Iklan, ads etc
Terima Kasih.


Jika ada request ato laporan tentang :
1.Request Software atau Tutorial
2.Bad Link & Re-active link (akibat broken link)
Silakan comment di bawah atau kirim pesan ke saya via facebook >> Akunku : Adhieresthenes Hier Banu Arfakhshad