Agar perkenalan kita dengan CSS semakin lengkap, saya akan mengajak anda untuk lihat sekilascontoh penggunaan CSS di dalam dokumen HTML. Anda tidak perlu memahami kode CSS yang
digunakan, nantinya akan kita bahas dengan lebih detail sepanjang buku ini.
Perhatikan kode HTML berikut:
01.simple.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Belajar CSS</title>
6 </head>
7 <body>
8 <h1>Belajar CSS</h1>
9 <p>Mohon jangan diganggu, lagi serius belajar CSS.</p>
10 <h2>Belajar Web Design</h2>
11 <p>CSS adalah dunianya web design.
12 Jika anda ingin mempelajari cara mendesain web,
13 CSS mutlak harus dikuasai.</p>
14 </body>
15 </html>
Kode diatas hanyalah file HTML sederhana yang terdiri dari tag <h1>, <h2> dan 2 buah tag <p>.
Jika anda telah memahami HTML, tentunya tidak asing dengan fungsi dari tag tersebut. Berikut
tampilannya di dalam web browser Mozilla Firefox:
Gambar: Contoh halaman HTML Sederhana
Sekarang saya akan mencoba mengubah design halaman HTML diatas. Terdapat 2 alternatif,
menggunakan tag HTML atau dengan CSS. Jika menggunakan tag HTML, saya bisa memodifikasinya menjadi seperti berikut ini:
02.style_with_html.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Belajar CSS</title>
6 </head>
7 <body bgcolor="#F7F7F7">
8 <h1><font color="green">Belajar CSS</font></h1>
9 <p><font face="verdana" size="4">Mohon jangan diganggu,
10 lagi serius belajar CSS.</font></p>
11 <h2><font color="green">Belajar Web Design</font></h2>
12 <p><font face="verdana" size="4">CSS adalah dunianya web design.
13 Jika anda ingin mempelajari cara mendesain web,
14 CSS mutlak harus dikuasai.</font></p>
15 </body>
16 </html>
Gambar: Hasil Style dengan HTML
Sekarang tampilan halaman sudah berubah, namun terdapat beberapa masalah dengan kodediatas:
- HTML yang seharusnya berfungsi untuk membuat struktur, juga digunakan untuk menangani tampilan web.
- Apabila saya ingin menambahkan paragraf baru, saya harus ingat untuk selalu menulis tag <font> serta atributnya (warna dan ukuran font). Bayangkan jika di dalam halaman tersebut akan ditambah 20 paragraf baru di waktu yang berbeda-beda.
- Akan susah jika dikemudian hari saya ingin mengubah warna teks paragraf. Saya harus mengubah tag <font> satu persatu pada setiap halaman.
fleksibel :
03.style_with_css.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Belajar CSS</title>
6 <style>
7 body{
8 background-color:#F7F7F7;
9 }
10 h1,h2{
11 color:green;
12 }
13 p{
14 font-family: Verdana, Arial, Helvetica, sans-serif;
15 font-size: 18px;
16 }
17 </style>
18 </head>
19 <body>
20 <h1>Belajar CSS</h1>
21 <p>Mohon jangan diganggu, lagi serius belajar CSS.</p>
22 <h2>Belajar Web Design</h2>
23 <p>CSS adalah dunianya web design.
24 Jika anda ingin mempelajari cara mendesain web,
25 CSS mutlak harus dikuasai.</p>
26 </body>
27 </html>
Perhatikan tambahan tag <style> di bagian <head> HTML. Inilah kode CSS yang digunakan
pada halaman ini. Dengan CSS, masalah dari kode HTML sebelumnya bisa diatasi:
- Kode CSS tersebut sepenuhnya terpisah dari struktur HTML. Sehingga tidak saling
‘tercampur’.Apabila saya ingin menambahkan 1, 2 atau 1000 paragraf baru menggunakan tag <p>,
secara otomatis tag tersebut akan di design menyesuaikan dari kode CSS. Tanpa perlu
mengubah paragraf satu persatu. - Jika di kemudian hari ingin menukar warna paragraf dari hijau menjadi biru, saya tinggal
mengubah 1 baris kode CSS saja, dan seluruh teks akan ikut berubah. - Kode CSS diatas bisa ‘diangkat’ ke sebuah halaman khusus (external CSS), kemudian dilink kepada setiap halaman HTML. Dengan cara ini, seluruh design website hanya butuh
1 file CSS saja.
teks yang bisa dihasilkan dari CSS :
04.text_style_css.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Belajar CSS</title>
6 </head>
7 <body>
8 <p style="color:brown;">
9 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
10 eiusmod tempor incididunt ut labore et dolore magna aliqua.
11 </p>
12 <p style="background-color:aqua;">
13 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
14 eiusmod tempor incididunt ut labore et dolore magna aliqua.
15 </p>
16 <p style="border: 2px solid red;">
17 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
18 eiusmod tempor incididunt ut labore et dolore magna aliqua.
19 </p>
20 <p style="font-size:10px;">
21 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
22 eiusmod tempor incididunt ut labore et dolore magna aliqua.
23 </p>
24 <p style="font-style:italic;">
25 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
26 eiusmod tempor incididunt ut labore et dolore magna aliqua.
27 </p>
28 <p style="text-transform: uppercase;">
29 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
30 eiusmod tempor incididunt ut labore et dolore magna aliqua.
31 </p>
32 <p style="font-weight:bold;">
33 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
34 eiusmod tempor incididunt ut labore et dolore magna aliqua.
35 </p>
36 <p style="text-decoration: overline;">
37 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
38 eiusmod tempor incididunt ut labore et dolore magna aliqua.
39 </p>
40 <p style="text-shadow: red 0 -2px;">
41 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
42 eiusmod tempor incididunt ut labore et dolore magna aliqua.
43 </p>
44 <p style="word-spacing: 7px;">
45 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
46 eiusmod tempor incididunt ut labore et dolore magna aliqua.
47 </p>
48 <p style="transform: scaleY(2);">
49 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
50 eiusmod tempor incididunt ut labore et dolore magna aliqua.
51 </p>
52 </body>
53 </html>
Gambar: Berbagai variasi design text menggunakan CSS