CASCADING STYLE SHEET (CSS)

Transkripsi

1 5 CASCADING STYLE SHEET (CSS) 5.1 Introduksi CSS CSS (Cascading Style Sheet) digunakan untuk mengatur aspek visual dari sebuah dokumen web sama seperti halnya pada aplikasi publishing kebanyakan seperti word processor (misalnya Microsoft Word) dalam penggunaan style. Pada awalnya HTML hanya mengatur bagaimana kita menyusun konten dalam dokumen web tanpa terlalu memusingkan tampilan visualnya. Perkembangan internet kemudian menunjukkan bahwa aspek visual dan keterbacaan (readable) dari sebuah halaman web perlu juga untuk diperhatikan. Pada tahun 1996, Konsorsium W3C merekomendasikan penggunaan CSS dalam dokumen web. Disusul kemudian pada pertengahan tahun 1998, W3C menyempurnakan CSS awal dengan membuat standar CSS2 yang menjadi standart hingga saat ini. Walaupun kita dapat mengontrol tampilan dokumen web dengan menggunakan HTML saja -tanpa CSS-, tetapi kita tidak akan memperoleh fleksibilitas dan file yang dibuat akan menjadi lebih besar daripada seharusnya. Teknologi CSS dimaksudkan juga untuk mempermudah perancangan dokumen web yang indah dan fleksibel. Fleksibilitas adalah hal yang tidak akan diperoleh jika menggunakan HTML saja. Keuntungan lain yang diperoleh dari penggunaan CSS adalah satu file CSS (*.css) dapat digunakan untuk banyak halaman. Sebagai contoh, misalnya Kita memiliki website yang terdiri dari 1000 file HTML dengan tampilan layout yang identik. Tanpa menggunakan CSS, ketika kita ingin mengubah satu bagian berarti 81

2 Kita harus mengedit 1000 file tersebut. Dengan menggunakan CSS, Kita hanya perlu mengedit satu atau beberapa file CSS saja. Style Style adalah semua elemen visual dalam dokumen web kita. Misalnya, jenis font, ukuran huruf, spasi, warna, gambar latar belakang (background image), posisi, dimensi, dan lain-lain. Untuk menggunakan/mengatur style, kita menggunakan inline Cascading Stylesheet, embedded atau external CSS. Contoh penggunaan inline CSS untuk mengatur style suatu paragraf: <p style= font-weight:bold; >Paragraf ini dibuat bold</p> Cascading Cascading, secara harfiah, berarti bertumpuk/berlapis/bertingkat. Cascading Style Sheet berarti stylesheet yang bertumpuk di mana style yang didefinisikan terakhir akan menggantikan (overwrite) style sebelumnya. 5.2 Kapabilitas CSS CSS digunakan untuk mengatur format tampilan dari halaman web kita dimana format tersebut tidak dapat ditangani hanya oleh tag HTML standar. Kapabiiti dari CSS secara umum adalah untuk mengatur aspek visual dari sebuah halaman web, secara spesifik adalah untuk hal-hal berikut ini: Mengatur ukuran yang baku (exact point size) dari teks Menambahkan indentasi atau tabulasi pada teks Mengatur margin dari halaman web Menambahkan elemen format baru pada halaman web, misalnya border di sekeliling teks. 82

3 Menggunakan unit ukuran yang presisi seperti inchi dan centimeter untuk mengatur ukuran teks maupun gambar yang presisi. Membuat style baru yang kreatif pada halaman web kita Merubah tampilan standar dari sebuah tag Mengatur secara presisi bagaimana sebuah background image ditampilan, apakah perlu berulang (repeated) atau tanpa berulang (no-repeated) Menambahkan spasi antar huruf, apasi antar kata maupun spasi antar baris, Membuat layout halaman web yang standar sehingga dapat ditampilkan sama pada semua jenis browser, dan bahkan pada browser media tertentu seperti misalnya pada PDA Dan lain-lain 5.3 Penggunaan CSS Ada tiga macam cara menggunakan CSS unutk dokumen web kita, yaitu membuat file CSS eksternal atau menuliskan CSS dalam file HTML (embedded atau inline). File CSS eksternal berekstensi.css yang Kita aplikasikan pada file HTML dengan menggunakan tag <link> Sedangkan internal CSS dapat Kita tuliskan di bagian HEAD maupun di tag HTML. Inline Style Cara pertama adalah menggunakan inline style, dimana pemformatan style dilakukan langsung pada tag elemen yang style-nya akan kita modifikasi. Misalnya untuk memformat huruf tebal dari sebuah paragraf menggunakan inline style adalah seperti sintaks berikut: <p style="font-weight:bold">paragraf ini dibuat bold</p> 83

4 Dengan cara ini kita harus mengatur style pada setiap tag yang akan kita modifikasi. Tentu saja cara ini kurang efektif jika kita akan mengatur banyak tag yang sama maupun tag yang berbeda. Embedded Style Cara kedua kita bisa menggunakan embedded style, dimana pemformatan style dibuat terpisah dari tag elemen-nya dan ditulis pada bagian head dokumen html kita. Misalnya untuk memformat huruf tebal dari sebuah paragraf menggunakan embedded style adalah seperti sintaks berikut: <head> <style>p{font-weight:bold;} </style> </head> Modifikasi style ditulis pada bagian head dan dibuat dalam tag <style> </style>. Dengan cara ini kita bisa mengatur sejumlah style langsung dalam tag <style> tersebut. Cara ini lebih efisien dan fleksibel untuk sebuah halaman web. Akan tetapi cara ini menjadi tidak efektif jika kita akan membuat sejumlah dokumen web yang menggunakan style yang sama, dimana kita harus menulis embedded style tersebut untuk setiap halaman html kita. Eksternal Style Sheet Cara ketiga dan yang paling efisien untuk digunakan adalah dengan cara eksternal style sheet. Kita membuat file terpisah yang berisi format style yang kita modifikasi, dan cukup memanggil (membuat link) ke file eksternal yang kita buat tersebut. File eksternal CSS dibuat dengan ekstensi *.css. Seperti contoh sebelumnya, untuk memformat huruf tebal dari sebuah paragraf dengan menggunakan eksternal stylesheet, pertama-tama kita buat dulu file terpisah dengan nama style.css (nama file terserah kita). File: Style.css p{font-weight:bold;} 84

5 kemudian dalam halaman web pada bagian head, kita membuat link ke file style.css bisa dengan dua metode, metode pertama: <head>... <link rel="stylesheet"type="text/css href="style.css" />... </head> atau, metode kedua <head>... "style.css";</style>... </head> Cara ketiga ini merupakan implementasi yang paling efisien dan fleksibel dalam menggunakan CSS sebagai komponen penting dalam disain web. Jika kita bekerja dengan jumlah halaman web yang banyak, maka proses modifikasi dari style cukup dilakukan pada satu atau beberapa file saja. Catatan: Walaupun kedua cara diatas terlihat memberikan hasil yang sama, tetapi sebenarnya ada perbedaan hasil dari penggunaan 2 metode eksternal file tersebut. Pada metode link, maka jika kita menggunakan 2 file css dimana ada elemen yang sama yang kita buat style-nya, maka halaman web hanya akan menggunakan format style dari file terakhir yang dipanggil. Yang artinya bahwa file kedua akan meng-overide style elemen yang sama dari file pertama. Sedangkan jika menggunakan metode import, maka pada kasus diatas, halaman web akan menggunakan style kombinasi (gabungan) dari style elemen yang sama tersebut dari kedua file import. Kecuali pada properti yang sama, maka akan digunakan value dari file import yang terakhir di-load. 85

6 Komentar Kita bisa menambahkan komentar pada style yang kita buat, khususnya pada model embedded maupun eksternal file. Penambahan komentar bertujuan untuk membantu kita memahami style yang kita buat dan tidak akan dieksekusi oleh browser. Ini sama dengan penggunaan komentar pada source code program. Komentar ditulis diantara simbol /* */ seperti contoh berikut: /* Body Styles */ body { font-size: 67.5%; /* Mengatur font size */ } Blok Style Kompatibel Jika kita mengkhawatirkan kompatibiltas dari blok style yang kita buat, maka blok tersebut dapat dibatasi dalam blok <!-- --> sehingga pada browser yang tidak kompatibel isi dari blok tersebut tidak akan dieksekusi. Perhatikan contoh berikut: <style type= text/css > <! b { font-weight: normal; } // > </style> Jika browser mengerti style tersebut maka karakter blok pembatas itu akan diabaikan, tetapi jika browser tidak memahami style tersebut maka blok dalam tanda <! dan > hanya akan dianggap sebagai komentar yang tidak perlu dieksekusi. Bentuk seperti ini dapat kita tambahkan pada bagian manapun dari sebuah halaman web. Block Level Element Block Level Element adalah elemen HTML yang mengambil ruang sebesar lebar halaman sehingga elemen yang mengikutinya otomatis bergeser ke bawah (baris baru). Jika memformat elemen ini maka 86

7 efek akan terjadi pada ruang dengan lebar yang sama dengan lebar halaman atau area-nya. Contoh block level element antara lain: p, ul, ol, dl, h1 Inline Element Inline elemen, berbeda dengan block level element, tidak menghabiskan seluruh lebar halaman, tetapi hanya mengambil ruang sekedar yang dibutuhkan oleh isi elemen tersebut. Contoh inline element antara lain: span, acronym Box Model Box model adalah istilah yang digunakan untuk menggambarkan elemen html sebagai sebuah kotak (box) yang propertinya dapat diatur dengan CSS. Properti visual sebuah box yang dapat diatur dengan CSS adalah: width : lebar box height : tinggi box padding : jarak antara border dan isi margin : jarak antara box dengan elemen lain border : garis tepi Visualisasi dari model box ditunjukkan dalam Gambar 5.1, dimana margin mengatur jarak dari tepi halaman atau dari komponen lain, border adalah garis tepi, padding adalah jarak teks atau konten dari border dan content area adalah isi dari elemen tersebut yaitu teks atau image. Model box ini dapat diterapkan baik untuk block level element maupun inline element. 87

8 Gambar 5.1 Properti visual model box CSS Display Properti Dengan menggunakan properti display : display : inline; Block Level Element dapat ditampilkan seperti Inline Element, demikian juga sebaliknya, dengan menggunakan: display:block; sebuah inline element dapat ditampilkan seperti block level element. Sebuah elemen dapat juga kita non-aktifkan dengan memberi value: none. display:none; Satuan Ukuran Salah satu keuntungan utama penggunaan CSS adalah kita bisa mengatur ukuran yang presisi dari sebuah elemen. Ukuran tersebut bisa bersifat relatif atau absolut. Misalnya kita ingin membuat ukuran font yang presisi dalam satuan mm atau pixel. CSS mengijinkan 88

9 penggunaan satuan ukuran yang lebih variatif dan presisi. Pada CSS2 satuan ukuran ini dikenal dengan istilah length values. Tabel 5.1 menjelaskan macam length values yang ada dan bisa digunakan dalam CSS. Tabel 5.1 Spesifikasi Satuan Ukuran dalam CSS Satuan Definisi Keterangan px pixel Merupakan satuan dasar dari tampilan pada layar monitor. Picture elemen (pixel) adalah titik (dot) terkecil dari resolusi monitor komputer. [relatif] ex em Satuan relatif terhadap ukuran tinggi karakter x dari jenis font yang digunakan saat itu. Misalnya 1.5ex artinya = 1.5 kali lebih panjang/ tinggi dari karakter x. [relatif] Satuan relatif terhadap ukuran lebar karakter m dari jenis font yang digunakan saat itu. Misalnya 0.8em artinya = 0.8 kali lebih kecil dari lebar karakter m. [relatif] in inchi Satuan ukuran inchi yang presisi yang kita gunakan sehari-hari. Problem perbedaan tampilan akan tampak jika kita melihat tampilan di layar monitor dan LCD projector. [absolut] cm mm centimeter Problem yang sama seperti inchi [absolut] milimeter Problem yang sama seperti inchi [absolut] pt point Satuan standar untuk ukuran huruf. 1 point = 1/72 inchi. pc pica Satuan tradisional untuk tipografi, awalnya dari satuan di mesin ketik manual. 1 pica = 12 point = 1/6 inchi. 89

10 5.4 Sintaks Style Diktat Kuliah Internet & Web Disain Herman Tolle - UB Selector, properti dan value CSS menggunakan selector untuk memilih tag/bagian HTML yang akan diubah. Kita menggunakan selector seperti berikut ini: body p h1 Hampir semua tag html bisa digunakan sebagai selector. Yang harus diingat adalah tag html di luar <body>, selain <html>, tidak dapat dijadikan selector. Sintaks dasarnya adalah : selector{ property_1:value_1; property_2:value_2; property_n:value_n; } Properti adalah atribut yang dimiliki oleh sebuah selector, dan value adalah nilai atau isi dari properti tersebut. Misalnya selector tag H1 dengan dua properti dan value-nya: h1{ color:green; background-color:orange; } Pengaturan style dengan cara embedded maupun eksternal dapat sekaligus untuk mengatur banyak style dan banyak tag sekaligus, seperti contoh berikut: body{ color:#ffffff; background:black; font-family:verdana, Arial, Sans; font-size:12px; } p{ line-height:20px; } h1{ 90

11 color:brown; } Multiple Selector (Group) Modifikasi style dapat digunakan secara bersama oleh beberapa selector sekaligus, misalnya : h1, h2, h3 { font-family: Verdana;} p, td, body { line-height: 20px; margin-right:20px; margin-left: 10px; } Contextual Selector Contextual selector digunakan pada situasi khusus atau ketika ada kombinasi khusus dari tag HTML pada sebuah halaman web, misalnya ketika sebuah tag berada di dalam (nested) tag yang lainnya. Misalnya, kita menggunakan contextual style untuk membuat tampilan yang berbeda dari nested list berikut: ol li { font-size: 14px; font-family:tahoma; fontweight:bold } ol ol li {font size: 11px; color:green; font-family: Trebuchet Ms; line-height: 150%} Contoh penggunaan dalam dokumen html: <ol> <li> Periode Pertama: Packet-switching ( ) <ol><li>konsep packet switching (1961) </li> <li>arpanet (1967) </li> <li>node pertama ARPAnet (1969)<br> </ol></li> <li>periode Kedua: Internetworking ( )</li> <ol> <li>alohanet di Hawaii (1970) </li> <li>tesis PhD Metcalfe s tentang Ethernet (1973)</li> <li>cerf and Kahn mengembangkan inisial TCP/IP(1974) </li> <li>decnet, SNA, XNA (Akhir 70-an)</li> </ol> 91

12 Tampilan dari penggunaan contextual style, terlihat dalam Gambar 5.2, tampak bahwa tag ol li yang pertama untuk mengatur list yang utama, kemudian tag ol ol li adalah contextual style untuk sub list dari list utama. Gambar 5. Tampilan Contoh Penggunaan Contextual Selector Universal, Child, dan Adjacent Selectors Standar CSS2 mendefinisikan pola baru untuk selector selain penggunaan koma dan spasi, seperti ditunjukkan pada contoh berikut: * {color: purple; font: Tahoma} ol > li {font-size: 200%; font-style: italic} h1 + h2 {margin-top: +4mm} Pada baris pertama, menggunakan universal selector berupa tanda bintang (asterik) yang artinya digunakan untuk semua elemen HTML. Misalnya pada contoh itu semua elemen akan menggunakan font Tahoma dan berwarna purple. Pada baris kedua menyatakan selector dengan relasi child/parent, yang artinya adalah untuk setiap item li dari sebuah list ordered. Bentuk terakhir adalah contoh penggunaan 92

13 adjacent selector atau selector yang berdekatan. Pada contoh tersebut, selector yang dipilih akan menambahkan spasi vertikal diantara dua selector tersebut (diantara h1 dan h2). Pseudo-classes Selector Jika kita ingin mengatur style dari sebuah elemen berdasarkan suatu kondisi atau state tertentu, misalnya state dari sebuah form atau link. Kita dapat menggunakan pseudo-class selector seperti contoh berikut ini: /* link yang belum diklik berwarna biru */ a:link {color:blue;} /* link yang sudah diklik berwarna hijau */ a:visited {color:green;} /* link berwarna merah pada saat hover atau aktif */ a:hover, a:active {color:red;} /* baris tabel berwarna merah saat di-hover */ tr:hover {background-color: red;} /* jika input di fokus maka akan berwarna kuning */ input:focus {background-color:yellow;} :link dan :visited adalah pseudo-class link dan hanya dapat digunakan pada elemen anchor (link). :hover, :active, dan :focus adalah pseudoclass dinamik dan secara teori dapat digunakan pada elemen apa pun. Pada contoh link diatas, teks link akan berwarna biru, saat mouse lewat maka akan berubah warna menjadi merah, dan kalau sudah pernah diklik maka akan berwarna hijau. CLASS, ID dan User Defined Style Modifikasi style dapat digunakan secara bersama oleh beberapa tag dengan menggunakan CLASS maupun ID. Perhatikan contoh berikut dimana kita membuat class green untuk tag <h1> dan juga membuat id #green <head> <style> 93

14 H1.GREEN { COLOR: GREEN;} #hijau { COLOR : #33FF33; FONT-WEIGHT: BOLD } </style> </head> <body> <h1>normal HEADER</h1> <h1 CLASS= GREEN >JUDUL HIJAU TUA</h1> <h1 ID= hijau >HIJAU MUDA DAN CETAK TEBAL</h1> <h1 CLASS= green >HIJAU TUA LAGI</h1> </body> Dengan cara ini, kita juga bisa melakukan override style per halaman atau keseluruhan website. Misalnya jika kita ingin membuat sebuah halaman yang berbeda dengan halaman lainnya dari website kita, kita dapat menambahkan class pada halaman tersebut untuk mengoverride style yang digunakan. Selain modifikasi dari elemen HTML standar yang ada, kita bisa juga mendefinisikan sendiri format style tertentu dan memberi nama khusus untuk style tersebut. Seperti contoh berikut kita membuat style yang diberi nama intro dan tglinput. Pembuatan user defined style menggunakan karakter # pada awal nama style. #intro {font-weight: bold;}.tglinput {color: green;} <p id="intro">some Text</p> <p class="tglinput">24/3/2006</p> DIV dan SPAN Kita dapat juga menggunakan tag kontainer <SPAN> dan <DIV> untuk membuat style model inline. Tag ini berfungsi untuk mengoverride style yang sudah ada sebelumnya. Selain itu tag DIV akan berperan jika kita ingin membuat layout halaman web standar dengan menggunakan CSS. Contoh berikut merupakan kombinasi dari user defined style dan penerapannya menggunakan elemen DIV: #maincontent h1 {font-size: 1.8em;} #secondarycontent h1 {font-size: 1.2em;} Dan contoh penerapan dalam halaman web: 94

15 <div id="maincontent"> <h1>welcome to my site</h1>... </div> <div id="secondarycontent"> <h1>latest news</h1>... </div> 5.5 Format Teks dengan CSS Sekarang kita mulai menerapkan penggunaan CSS untuk memformat tampilan visual dari halaman web kita, kita mulai dari format teks dengan CSS. Huruf Tebal (Bold) Bentuk huruf tebal diatur pada properti font-weight. Value yang bisa kita isi untuk properti tersebut adalah: lighter normal bold bolder Selain itu kita juga bisa memberi nilai angka dalama kelipatan 100 dengan range , dimana 100 adalah paling light (tipis) sampai 900 yang paling tebal. Normal teks adalah 500 dan normal bold adalah 700. Huruf Miring (Italic) Pengaturan huruf miring atau italic lebih mudah dibanding bold. Kita menggunakan properti font-style dan memilih salah satu diantara 3 pilihan value untuk mengatur tampilan font, yaitu : normal italics 95

16 oblique Oblique adalah bentuk yang mirip dengan italic tetapi lebih slanted. Pada halaman web perbedaannya mungkin tidak terlihat jelas. Jenis Huruf Jenis font (typeface) yang akan kita gunakan diatur dengan properti font-family. Keluarga font standar yang bisa digunakan adalah: serif sans-serif monospace cursive fantasy Properti font-family juga memungkinkan kita untuk menggunakan jenis font lain dengan menuliskan nama font tersebut. Sejumlah font yang sering digunakan dan kemungkinan tersedia pada komputer client diantaranya adalah: Arial, Tahoma dan Verdana. Catatan: Ingat bahwa tampilan di browser adalah mengambil font yang ada di komputer client sehingga sebaiknya memilih font yang standar yang dijamin pasti ada pada komputer client. Jika font tidak ditemukan maka browser menampilkan dengan font default yang diset untuk browser tersebut. Mengatur Ukuran Font Ukuran dari font yang ditampilkan dapat kita atur dengan properti font-size. Properti ini dapat menggunakan bermacam berbagai satuan ukuran (seperti pada Tabel 5.1) atau menggunakan ukuran spesifik berikut: xx-small x-small small 96

17 medium large x-large xx-large atau juga dua ukuran relatif: smaller larger Selain itu kita juga bisa menggunakan satuan ukuran dalam persen (%). Misalnya font-size: 110% artinya lebih besar 10% dari ukuran font yang seharusnya. Kombinasi ukuran font yang baik ditentukan juga oleh aspek estetika dalam sebuah halaman web. Penggunaan satuan pixel (px) relatif memberikan keluwesan dalam membuat tampilan yang bagus. Kombinasi tertentu akan kita coba nanti pada pembahasan tentang penerapan CSS untuk memperindah tampilan web. Warna Teks Warna dari teks pada halaman web dapat kita atur dengan properti color. Value dari atribut color dapat menggunakan berbagai format. Spesifikasi dari format pengaturan warna di CSS dijelaskan dalam Tabel 5.2 Tabel 5.2 Opsi Spesifikasi Warna dalam CSS Spesifikasi Contoh Keterangan #RRGGBB #00FF00 Notasi yang paling sering digunakan. Kombinasi heksadesimal dari warna dalam format RGB 6 digit. #RGB #0F0 Penyederhanaan notasi, dari bentuk diatas dengan hanya menggunakan 3 digit. #0F0 adalah sama dengan #00FF00. 97

18 rgb(rr,gg,bb) rgb(128,0,128) Menentukan warna dari masing-masing komponen Red, Green dan Blue, dalam besaran (8 bit) Nama warna blue Menggunakan nama konstanta warna yang telah distandarkan dalam CSS Jarak Antar Huruf, Antar Kata dan Antar Baris Jarak antar huruf (karakter) diatur dengan properti letter-spacing. Value biasanya dalam satuan pixel (px), tetapi kita bisa menggunkan juga satuan ukuran lain yang ada dalam CSS. Untuk pengaturan jarak, value-nya bisa bernilai negatif atau positif. Jika positif berarti jaraknya menjauh, jika negatif berarti jaraknya mendekat. <h1 style= letter-spacing: -2px; >Judul Lebih Mepet </h1> Sedangkan jarak antar kata diatur dengan properti word-spacing. Format value sama seperti untuk jarak antar huruf..wide { word-spacing: 15px; font-weight: bold; }.narrow { word-spacing: -3px; font-weight: bold; } Sementara jarak antar baris diatur dengan properti line-height. Value dari properti ini bisa tidak menggunakan satuan unit, seperti misalnya kita mengatur spasi antar baris dari sebuah dokumen dengan nilai spasi 1, 1.5 atau 2..doublespaced { line-height: 1.5; } Teks Alignment Horisontal dan Vertikal Untuk mengatur alignment teks atau paragraf dalam HTML kita bisa mengatur langsung dengan tag <p>. Dengan CSS kita menggunakan properti style text-align yang dapat diisi dengan nilai: left right 98

19 center justify Sedangkan untuk mengatur alignment secara vertikal menggunakan properti vertical-align dengan pilihan value dijelaskan dalam Tabel 5.3 Tabel 5.3 Value untuk Vertical Alignment Value top middle bottom text-top text-bottom super sub Keterangan Mengatur bahwa top (bagian atas) dari elemen tersebut align dengan top dari elemen tertinggi dalam baris tersebut Mengatur bahwa middle (bagian tengah) dari elemen tersebut berada tepat ditengah baris Mengatur bahwa bottom (bagian bawah) dari elemen tersebut align dengan bottom dari elemen ter-rendah dalam baris tersebut Mengatur bahwa top (bagian atas) dari elemen tersebut align dengan top dari elemen teks tertinggi dalam baris tersebut Mengatur bahwa bottom (bagian bawah) dari elemen tersebut align dengan bottom dari elemen teks paling rendah dalam baris tersebut Membuat superscript Membuat subscript Teks Dekorasi Dengan CSS kita bisa membuat dekorasi teks tidak hanya membuat underline (garis bawah) saja, tetapi ada 4 value yaitu: underline overline line-through 99

20 blink Kita juga bisa menggunakan kombinasi dari value tersebut, seperti misalnya: h1 { text-decoration: overline underline; } 5.5 Mengatur Model Box dan Kontainer Mengatur Margin Margin dari halaman web diatur pada properti margin. Pengaturan margin dapat dilakukan pada keseluruhan halaman web atau pada komponen kontainer tertentu seperti paragraf maupun lainnya. Berikut contoh pengaturan margin yang dikutip dari catatan dialog dari sebuah novel. <body style="margin: 1cm;"> <p style="margin: 1cm;"> "I am about to be married." </p><p style="margin: 1cm;"> <b>"so I have heard."</b> </p> <p style="margin-right: 3cm;"> "To Clotilde Lothman von Saxe-Meningen, second daughter of the King of Scandinavia. You may know the strict principles of her family. She is herself the very soul of delicacy. A shadow of a doubt as to my conduct would bring the matter to an end." </p><p> "And Irene Adler?" </p><p style="margin-left: 25%"> "Threatens to send them the photograph. And she will do it. I know that she will do it. You do not know her, but she has a soul of steel. She has the face of the most beautiful of women, and the mind of the most resolute of men. Rather than I should marry another woman, there are no lengths to which she would not go none." </p> </body> Memberikan hasil tampilan berikut: 100

21 Value dari properti margin bisa diatur untuk semua sisi sekaligus atau diatur spesifik untuk masing-masing sisi margin. Selain itu value margin dapat dalam besaran negatif. <STYLE TYPE= text/css > BODY { margin: 1cm; } P { margin-left: 1cm; } H1 { margin-left: -5mm; } H2 { margin-left: -5mm; } </STYLE> Kita dapat mengatur margin dari halaman web dengan properti margin dari elemen body. Kita bisa mengatur apakah menggunakan margin kiri dan atas 0, atau mengatur margin pada posisi tertentu, seperti contoh berikut: 101

22 body { margin-left: 20px; margin-top: 0; } Perintah di atas dituiskan dengan tujuan agar tampilan halaman Web di layar monitor memiliki batas halaman kiri 20 pixel dan 0 pixel dari atas browser window. Pengaturan juga dapat dilakukan pada marginbottom dan margin-right. Mengatur Font Utama Elemen body merupakan dasar dari halaman web kita, dimana kita bisa mengatur format dasar dari halaman web kita. Misalnya untuk menentukan jenis font utama, ukuran font, warna font, jarak antar baris (line-height), dan sebagainya. body { font-family: verdana, tahoma; font-size: 11px; color : #000000; line-height : 150%; } Contoh: <h2>welcome to My Website</h2> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut commodo risus id velit. Nullam lacinia imperdiet turpis. Maecenas massa enim, condimentum non, lobortis eu, fermentum in, sapien. Sed pellentesque ante ut lectus. Nulla quis neque at massa venenatis fermentum. Aliquam erat volutpat. Phasellus vel purus. Donec auctor suscipit diam. Praesent est mi, accumsan vitae, vestibulum vitae, facilisis ut, pede. Morbi et ipsum. Aliquam venenatis dui a massa. Ut sagittis gravida dui. Morbi eu arcu eget ligula auctor viverra. Pellentesque tellus sapien, euismod a, egestas id, molestie vitae, nulla. Vivamus purus justo, vehicula quis, viverra sed, molestie eu, pede. Vestibulum viverra euismod nunc. Sed nibh.</p> Tampilan pada browser: 102

23 Materi ini belum lengkap.. 103

24 Halaman ini sengaja dikosongkan 104