cascading style sheet (css)

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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
•
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> atau @import. 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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
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>@import "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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
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
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]
em
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
centimeter
Problem yang sama seperti inchi [absolut]
mm
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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
5.4 Sintaks Style
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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
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 (1961-1972)
<ol><li>Konsep packet switching (1961) </li>
<li>ARPANet (1967) </li>
<li>Node pertama ARPAnet (1969)<br>
</ol></li>
<li>Periode Kedua: Internetworking (1972-1980)</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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
<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 100–900, 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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
• 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
Keluarga font standar yang bisa digunakan adalah:
font-family.
• 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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
• 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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
rgb(rr,gg,bb)
rgb(128,0,128)
Menentukan warna dari masing-masing
komponen Red, Green dan Blue, dalam
besaran 0-255 (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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
• 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
Keterangan
top
Mengatur bahwa top (bagian atas) dari elemen
tersebut align dengan top dari elemen tertinggi dalam
baris tersebut
middle
Mengatur bahwa middle (bagian tengah) dari elemen
tersebut berada tepat ditengah baris
bottom
Mengatur bahwa bottom (bagian bawah) dari elemen
tersebut align dengan bottom dari elemen ter-rendah
dalam baris tersebut
text-top
Mengatur bahwa top (bagian atas) dari elemen
tersebut align dengan top dari elemen teks tertinggi
dalam baris tersebut
text-bottom
Mengatur bahwa bottom (bagian bawah) dari elemen
tersebut align dengan bottom dari elemen teks paling
rendah dalam baris tersebut
super
Membuat superscript
sub
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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
• 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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
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
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
Materi ini belum lengkap..
103
Diktat Kuliah Internet & Web Disain – Herman Tolle - UB
Halaman ini sengaja dikosongkan
104