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 <style type="text/css" media="screen"> pada bagian header tag HTML kita. Setelah selesai menambahkan tag maka selanjutnya tag tersebut kita tutup lagi dengan </style>
sehingga kode HTML menjadi sebagai berikut
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<head>
<title>Belajar CSS</title>
<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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Pertamaku</title>
<style type="text/css">
</style>
</head>
<body>
<ul class="navbar">
<li><a href="index.html">Home</a>
</li><li><a href="about.html">About</a>
</li><li><a href="gallery.html">Gallery</a>
</li><li><a href="links.html">Links</a>
</li></ul>
<h1>CSS Pertamaku</h1>
<p>Selamat datang di Web CSS ku</p>
<p>Halo ini website CSS ku, mungkin tidak ada gambar
disini tapi setidaknya ini punya gaya</p>
<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 gaya</p>
<address>Made 12 Juni 2009<br> 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 <!-- disini kode CSS --> 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 : <ul class="navbar">, class merupakan atribut tag html yang bisa kita didefinisikan nama-namanya untuk dihubungkan dengan mark up CSS, selain class ada juga atribut yang bernama id tapi tentang class dan id ini
sebaiknya kita bahas lebih lanjut lagi di bagian artikel CSS saya yang
kedua, supaya kali ini kita lebih fokus ke dasar CSS nya duou. Ok
Selanjutnya tambahkan saja kode berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em
}
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid #FF6600
}
ul.navbar a {
text-decoration: none
}
ul.navbar a:hover {
color: #FF0000
}
|
Selanjutnya mark up juga tag h1 (heading ), p (paragraph), addres (alamat), a (text yang mengandung link ), a:hover (text yang mengandung link dan sedang ditunjuk mouse), a:visited (text yang mengandung link dan linknya telah dikunjungi ). tambahkan kode dibawah :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
h1 {
font-family: Helvetica, Geneva, Arial,
Sans-Regular, sans-serif;
}
a:link {
color: #00CC66
}
a:visited {
color: purple;
}
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted;
}
|
Dengan demikian markup CSS dengan cara inline style sheet untuk semua
Tag HTML telah selesai, Hasil akhir tag adalah 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Pertamaku</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman", Times, serif;
color: white;
background-color: #555555
}
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em;
}
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid #FF6600;
}
ul.navbar a {
text-decoration: none;
}
h1 {
font-family: Helvetica, Geneva, Arial,
Sans-Regular, sans-serif
}
a:link {
color: #00CC66
}
a:visited {
color: purple
}
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted
}
</style>
</head>
<body>
<ul class="navbar">
<li><a href="index.html">Home</a>
</li><li><a href="about.html">About</a>
</li><li><a href="gallery.html">Gallery</a>
</li><li><a href="links.html">Links</a>
</li></ul>
<h1>CSS Pertamaku</h1>
<p>Selamat datang di Web CSS ku</p>
<p>Halo ini website CSS ku, mungkin tidak ada gambar
disini tapi setidaknya ini punya gaya</p>
<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 gaya</p>
<address>Made 12 Juni 2009<br> by myself.</address>
</body>
</html>
|
2. External Style Sheet
Menuliskan Mark up CSS untuk external Style Sheet sama saja dengan
cara diatas, bedanya penulisan Markup tidak ditempatkan didalam HTML
melainkan dibuat file sendiri dengan ekstensi .css, Silahkan buat file
text baru kemudian save as style.css dan simpan di direktori yang sama.
Langkah selanjutnya buat markup sebagai berikut pada file style.css yang baru kita buat
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
|
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman", Times, serif;
color: white;
background-color: #555555 }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid #FF6600 }
ul.navbar a {
text-decoration: none }
h1 {
font-family: Helvetica, Geneva, Arial,
Sans-Regular, sans-serif }
a:link {
color: #00CC66 }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
|
Untuk menghubungkan file HTML dengan CSS maka pada tag header HTML diganti menjadi sebagai berikut :
1
2
3
4
5
6
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Pertamaku</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
</head>
|
penerapan external maupun internal CSS yang saya jelaskan diatas akan menghasilkan dokumen web dengan gaya yang sama
Sampai Jumpa Lagi di Mark Up CSS bagian Selanjutnya
Selamat mencoba
sumber : http://www.w3function.com/blog/index.php?p=det&idn=31
