1.1
Pengertian
Cascading
Style Sheet (CSS)
merupakan salah satu bahasa pemrograman web untuk mengendalikan
beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
Sama halnya styles dalam aplikasi
pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style,
misalnya heading, subbab, bodytext, footer, images,
dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa
berkas (file). Pada umumnya
CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada
teks, warna tabel,
ukuran border, warna border, warna hyperlink,
warna mouse
over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas,
bawah, dan parameter lainnya. CSS adalah
bahasa style sheet
yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan
halaman yang sama dengan format yang berbeda.
1.2 SEJARAH
Nama CSS didapat dari fakta bahwa setiap deklarasi style
yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk
hubungan ayah-anak (parent-child) pada setiap style.CSS sendiri
merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS
distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru
mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
1.3 Cara Untuk Menambahkan Style Pada Web :
Style Sheet dapat digunakan
dengan 3 cara, sesuai dengan kebutuhan anda:
1.
Dengan membuat link ke file
Style Sheet dari file HTML. Metode seperti ini memungkinkan anda mengubah style
sejumlah halaman web dengan hanya mengedit satu file Style Sheet.
2.
Dengan menyisipkan Style
Sheet pada file HTML. Metode seperti ini memungkinkan anda mengubah style suatu
halaman web dengan hanya mengedit beberapa baris Style Sheet.
3.
Dengan menyisipkan secara inline pada tag
dalam file HTML. Hal ini memberi cara tercepat untuk mengubah suatu tag,
sejumlah tag, atau satu blok informasi pada halaman web.
Anda dapat menggunakan satu, dua, atau ketiga cara tersebut pada
halaman web.
1.4 Sintax Dasar
Baik Style Sheet yang dilink maupun yang disisipkan memiliki satu
atau lebih definisi style. (Sintax inline kadang berbeda). Suatu definisi style
terdiri dari suatu tag HTML (tag apapun), diikuti oleh sejumlah properti untuk
tag tersebut yang terletak diantara tanda kurung kurawal. Tiap properti
diidentifikasi oleh nama properti, diikuti oleh titik dua dan nilai properti.
Properti ganda dipisahkan oleh titik koma. Sebagi contoh, definisi style
berikut memberi tag <H1> ukuran font yang spesifik (15 point), dan
ketebalan huruf (boldface):
H1 {font-size: 15pt;
font-weight: bold}
Anda kemudian dapat membuat definisi style untuk sejumlah tag HTML
dan menempatkannya pada file terpisah atau sisipkan langsung pada halaman web.
1.5 Membuat Link ke Style Sheet
Untuk membuat link ke Style Sheet eksternal, anda dapat dengan
mudah membuat sebuah file berisi definisi style kemudian simpan (save) dengan
ekstensi .CSS, kemudian buat link ke file tersebut dari halaman web. Dengan
cara ini, anda dapat memanfaatkan Style Sheet yang sama untuk beberapa halaman
dalam site anda.
Sebagai contoh, bila Style Sheet anda dinamai style-saya.css dan terletak di alamat
http://alamat-internet/style-saya.css, diantara tag <HEAD> anda harus
menambahkan:
<HEAD>
<TITLE>Judul artikel</TITLE>
<LINK REL=STYLESHEET
HREF="http://alamat-internet/style-saya.css"
TYPE="text/css">
</HEAD>
1.6 Menyisipkan blok STYLE
Untuk menyisipkan (embed) Style Sheet, tambahkan blok
<STYLE> </STYLE> di awal dokumen, di antara tag-tag <HTML> dan
<BODY>. Hal ini memungkinkan anda unutk mengubah penampilan satu halaman web. Tag <STYLE>
memilki satu parameter yaitu TYPE, yang menspesifikasi type media internet
sebagai “text/css” (memungkinkan browser yang tidak mendukung type ini untuk
mengabaikan Style Sheet). Tag <STYLE> diikuti oleh sejumlah definisi
style dan berakhir dengan tag </STYLE>.
<HTML>
<STYLE
TYPE="text/css">
<!--
BODY
{font: 10pt "Arial"}
H1 {font:
15pt/17pt "Arial";
font-weight:
bold;
color:
maroon}
H2 {font:
13pt/15pt "Arial";
font-weight:
bold;
color:
blue}
P {font:
10pt/12pt "Arial";
color:
black}
-->
</STYLE>
<BODY>
...
</BODY>
</HTML>
This line will be indented
on the left and right.
This line will receive no indentation.
1.7 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"><!-- disini kode CSS --></style></head><body><!-- disini content HTML --></body></html> |
Sekarang setelah sudah memahami
dimana kita harus menerapkan CSS dengan cara internal Style Sheet. Contoh proyek
web table less dengan penerapan CSS kita kali ini
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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD
HTML 4.01//EN"><html><head><title>CSS Pertamaku</title><style type="text/css"> <!-- disini kode CSS --></style></head><body><!-- Navigasi Menu --><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> <!-- Conteny Utama --><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> |
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
|
<!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><!-- Navigasi Menu --><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><!-- Conteny Utama --><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> |
1.8 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 
Tidak ada komentar:
Posting Komentar