Modul Css Fix

CASCADING STYLE SHEET
( Modul CSS dalam Kuliah Desain Grafis )
Oleh
NI WAYAN WISSWANI, ST, MT
POLITEKNIK NEGERI BALI
JURUSAN TEKNIK ELEKTRO
PROGRAM STUDI SISTEM INFORMASI
2015
KATA PENGANTAR
Puji syukur Penulis panjatkan kehadirat Tuhan Yang Maha Kuasa, karena atas segala rahmat
dan karunia-Nya modul praktikum topik CSS dalam Mata Kuliah Desain Grafis dapat
diselesaikan dengan baik.
Pembuatan modul praktikini ditujukan untuk kepentingan intern Politeknik Negeri Bali
dengan tujuan memudahkan proses belajar mengajar.
Penulis sepenuhnya menyadari bahwa modul praktik ini masih perlu dikembangkan dan
disempurnakan. Penulis sangat terbuka untuk menerima kritik dan saran yang sifatnya
konstruktif untuk perbaikan dan kesempurnaan modul praktik ini.
Melalui kesempatan ini, Penulis ingin menyampaikan ucapan terima kasih yang
setulusnya kepada seluruh pihak yang memberikan dukungan sehingga modul praktik ini
terselesaikan dengan baik.
Akhir kata, semoga dengan segala keterbatasan tersebut, modul praktikini mampu
memberikan bermanfaat bagi kepentingan dunia ilmu pengetahuan.
Penulis
Kata Pengantar ii
Daftar Isi : iii
BAB I Pengenalan CSS 1
A Kompetensi 1
B Uraian Materi 1
1.1 Pengenalan CSS 1
ii
1.2 Sejarah CSS 1
1.3 Struktur Dasar Css Dalam Html 2
C Latihan Soal 6
BAB II Layout Dan Display Dalam Css 7
A Kompetensi 7
B Uraian Materi 7
2.1 Layout 7
2.2 Display dalam CSS 10
C Latihan Soal 14
BAB III Pemformatan Font Dan Teks 15
A Kompetensi 15
B Uraian Materi 15
3.1 Font 15
3.2 Teks 20
C Latihan Soal 36
BAB IV Warna dan Latar Belakang 37
A Kompetensi 37
B Uraian Materi 37
4.1 Teknik Pengaturan Nilai Warna 37
4.2 Setting Warna 40
C Latihan Soal 50
BAB V Hyperlink dalam CSS 51
A Kompetensi 51
B Uraian Materi 51
5.1 Property Hyperlink 51
5.2 Contoh Penggunaan Link dalam CSS 51
C Latihan Soal 57
iii
BAB I
PENGENALAN CSS
A. Kompetensi
Pembaca diharapkan memahami struktur dasar CSS
B. Uraian Materi
1.1 Pengenalan CSS
Cascading Style Sheet atau yang biasa sebut CSS merupakan aturan scripting untuk
pemformatan sebuah website dimana sripting style CSS dilakukan dengan bahasa Hypertext
Markup Language (HTML), XHMTL maupun XML. CSS menyediakan berbagai template
berupa style untuk membuat dan mempermudah penulisan dari halaman-halaman yang
dirancang sehingga tampilan website akan menjadi lebih menarik. Dengan CSS, setting
tampilan keseluruhan web dapat dilakukan dengan mudah hanya dengan pemanggilan
template dan apabila akan dilakukan perubaan pada elemen tertentu cukup dilakukan
dengan menggantikan atribut-atribut atau perintah dalam style CSS yang dibuat dengan
atribut yang diiinginkan sehingga tidak perlu dilakukan perubahan pada script seperti pada
HTML klasik.
1.2 Sejarah CSS
CSS (Cascading Style Sheet) pertama kali direkomendasikan oleh W3C (World Wide Web
Consortium) tahun 1996 untuk mengatur elemen umum yang digunakan dalam web
browser Internet Explorer dan Netscape Navigator yang ada saat itu. Dilihat dari
pengembangannya hingga saat ini CSS memiliki 3 versi yakni:
1.2.1 CSS 1 (CSS Level 1)
CSS 1 berfokus pada standar pemformatan dokumen atau halaman HTML web. Hal ini
dilakukan untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer
yang sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan web. CSS 1
ditetapkan sebagai bahasa pemrograman standard dalam pemuatan web pada tanggal 17
Agustus 1996 oleh World Wide Web Consortium (W3C).
1.2.2 CSS 2 ( CSS Level 2)

Di tahun 1998, W3C menyempurnakan CSS level 1 dengan menciptakan standard CSS 2
dengan memasukkan dan memperluas semua atribut CSS 1 untuk memenuhi kebutuhan
terhadap format dokumen yang ditampilkan wesite agar bisa ditampilkan di printer.
1.2.3 CSS 3 (CSS Level 3)
1
CSS 3 adalah versi terbaru yang memiliki kemampuan untuk menampilkan animasi warna
dan animasi 3D.CSS 3 juga memiliki beberapa fitur baru seperti Multiple background,
border-radius, drop-shadow, border-image, CSS-Math dan CSS Object Model.
1.3 Struktur Dasar CSS Dalam HTML
CSS dalam HTML dapat ditempatkan dengan berbagai cara diantaranya :
1.3.1 Inline style
Pada gaya ini CSS diletakkan dalam sebuah tag HTML yang berlaku dalam dokumen yang
diapitnya. Inline Style digunakan untuk pemformatan dalam sebuah elemen HTML dan tidak
berlaku pada seluruh elemen dalam dokumen web. Contohnya adalah sebagai berikut :
<html>
</head>
<div style="background-color:#006600; text-align:center;">Inline CSS</div>
</body>
</html>
Bila perintah ini dijalankan maka hasil yang akan tampil pada browser adalah seperti gambar
1.1 berikut
Gambar 1.1 Penggunaan Inline Style
Perintah diatas akan mengatur tampilan text pada halaman web memiliki background
berwarna hijau dengan tulisan yang diletakkan ditengah halaman.
1.3.2 Internal Style
CSS dengan gaya ini diletakkan diantara tag <head> dan </head>. Internal Style digunakan
pada suatu tempat maupun untuk keseluruhan situs. Contoh dari penerapan internal style
dapat dilihat pada contoh berikut ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
2
<title>Belajar CSS</title>
<style type="text/css">

</style>
</head>
<body>
<div class="blog">Penerapan Internal Style</div>
</body>
</html>
Class .blog yang dibuat pada script diatas dimaksudkan untuk mengatur format warna, huruf
dan perataan kalimat halaman web. Dan ketika coding ini dijalankan, maka hasil yang akan
diperoleh adalah seperti gambar 1.2 berikut ini :
Gambar 1.2 Penerapan Internal Style dilihat pada Browser
1.3.3 External Style
Style CSS dengan model ini akan dipanggil pada file yang bertipe CSS dengan menggunakan
perintah Link rel berfungsi untuk menghubungkan sebuah style CSS eksternal dengan
nama yang telah ditentukan. Adapun bentuk dari External Style Sheet adalah <link
rel=stylesheet type=text/css href=css_files.css>. Untuk menerapkan style CSS dengan
cara External file maka kita membutuhkan 2 file. Sebagai contoh buatlah program HTML
dibawah ini
<!Simpan dengan Nama External.html-->

<html>
<head>
<title>Eksternal</title>
</head>
<body>
<h1>Politeknik Negeri Bali</h1>
<p> Jurusan yang ada pada Politeknik Negeri Bali</p>
3
<ul>
<li>Akuntansi</li>
<li>Pariwisata</li>
<li>Administrasi Tata Niaga</li>
<li>Teknik Elektro</li>
<li>Teknik Sipil</li>
<li>Teknik Mesin</li>
</ul>
</body>
</html>
Dokument HTML diatas berfungsi untuk mengatur heading dan pembuatan unordered list
item yang digunakan untuk membuat daftar item dengan tanda bullet (tidak bernomor).
Penerapan dari Exsternal Style dari contoh diatas akan terlihat seperti dalam gambar 1.3
berikut:
Gambar 1.3 PenerapanExternal Style pada Browser
Selanjutnya buatlah file dalam contoh.css dibawah ini agar dapat dilihat penerapan link
antar file dalam css:


h1{
color: green;
background: silver;
font-family : arial;
}
Kemudian lakukan perubahan pada file External.html pada contoh sebelumnya agar menjadi
seperti berikut:
4
<html>
<head>
<title>external style</title>
<link rel="stylesheet" type="text/css" href="contoh.css" />
</head>
<body>
<h1>Politeknik Negeri Bali</h1>
<p> Jurusan yang ada pada Politeknik Negeri Bali</p>
<ul>
<li>Akuntansi</li>
<li>Pariwisata</li>
<li>Administrasi Tata Niaga</li>
<li>Teknik Elektro</li>
<li>Teknik Sipil</li>
<li>Teknik Mesin</li>
</ul>
</body>
</html>
Setelah script diatas dijalankan maka akan diperoleh hasil modifikasi yang ditampilkan pada
browser serperti pada gamabr 1.4 berikut ini
Gambar 1.4 Penerapan External style
Berdasarkan hasil yang terlihat hasil file external.css akan mengalami perubahan sesuai
dengan format yang diberikan pada contoh.css. File eksternal yang sebelumnya digunakan
untuk mengatur tanda bullet pada daftar item akan mengalami perubahan sesuai format
pada file contoh.css akibat pemanggilan <link rel="stylesheet" type="text/css"
href="contoh.css" />
5
C. Latihan Soal
1. Lakukanlah modifikasi pada class blog pada contoh topik internal style menjadi times
new roman dengan ukuran 12 dan huruf berwarna kuning
2. Buatlah penerapan external style sehingga terdapat daftar item seperti contoh pada
sub topik 1.3 dengan jenis bullet yang berbeda.
BAB II
LAYOUT DAN DISPLAY DALAM CSS
A. Kompetensi
Pembaca dapat mengatur layout dan display sebuah halaman web dengan CSS
B. Uraian Materi
2.1 Layout
Pengaturan layout sebuah dokumen web dilakukan pada tiga area diantaranya padding,
border dan margin dari suatu halaman web.
2.1.1 Margin
Margin digunakan untuk mengatur pemberian jarak atar objek dengan objek yang lain yang
berada diluar objek. Pengaturan margin dilakukan untuk seluruh tepian halaman baik atas
(top), bawah (bottom) , kanan(right), dan kiri(left). Pengaturan ini dapat dilakukan dengan 2
cara diantaranya :
a. Meletakkan pada tag body

Berikut ini adalah contoh pengaturan margin untuk mengatur halaman web agar garis tepi
atas berukuran sepanjang 40 pixel, lebar garis tepi bawah sepenjang 40 pixel,garis tepi
kanan sepanjang 30 pixel,dan garis tepi kiri sepanjang 30 px.

<head>
6
<title>mengatur margin</title>
body{
margin-top:40px;
margin-bottom:40px;
margin-right:30px;
margin-left:30px;
}
</style>
</head>
<body>
Bagaimana cara mengatur margin?<br>
yaitu dengan menggunakan properti margin tentunya...
</body>
</html>
b. Menggunakan shorthand property
Cara ini dilakukan dengan menuliskan hanya value dari ukuran yang diinginkan pada margin
halaman, namun penulisannya harus disesuaikan dengan urutan format property
top,right,bottom,dan left. Hal ini dapat dilakukan dengan mengubah bagian margin yang
terletak pada tag body menjadi body {margin : ukuran yang diinginkan}. Sebagai contoh
untuk mengatur agar seluruh halaman web berukuran 40 px maka diterapkan perintah
body{margin:40px 40px 30px 3 px} atau body{margin: 40px}.
2.1.2 Border
Mengatur lebar border sebuah halaman web dapat dilakukan dengan menggunakan
property border-top-width,border-left-width, dan border-right-width dan
menentukan nilainya(value). Cara lain yang dapat dilakukan adalah denganmengatur suatu
border dengan shortcut property border-widthseperti pada contoh berikut:

<head>
<title>mengatur margin</title>
body{ border-top-width:40px;
border-right-width:40px;
border-bottom-width:40px;
border-left-width:40px}
</style>
</head>
<body>
Bagaimana mengatur border?<br>
yaitu dengan menggunakan properti border tentunya...
</body>
</html>
Melalui coding diatas dokumen web yang dibuat akan menggunakan lebar border atas
sebesar 40 pixel,lebar border kanan sebesar 40 pixel, lebar border bawah sebesar 40 pixel
7
dan lebar border kiri sebesar 40 pixel. Saat dijalankan script tersebut pada browser akan
terlihat seperti berikut :
Gambar 2.1 Hasil pengaturan border
2.1.3 Padding
Padding digunakan untuk memberikan jarak antara suatu objek dengan objek-objek yang
berbeda dalam sebuah halaman web.Padding juga dapat digunakan untuk menentukan
jarak komponen body ke border atau jarak bagian dalam.Dalam penggunaannya padding
menyerupai margin, hanya saja pada padding tidak dapat menggunakan value bernilai
negative. Pengaturan padding dapat dilakukan dengan cara
Menggunakan satu deklarasi

Property padding bisa diatur dalam satu deklarasi, value yang bisa diatur didalamnya adalah
auto, present, dan length. Ketentuan pemberian value dalam property ini diantaranya:
a. One value akan diterapkan kepada 4 sisi
b. Two values akan diterapkan pertama untuk top and bottom dan kedua untuk sisi left
and right
c. Three values akan diterapkan pertamatop, kedua sisi right and left dan ketiga
untukbottom
d. Four values akan diterapkan pertamatop, keduaright, ketigabottom dan keempat pada
left
Pengaturan menggunakan format

Pengaturan padding dengan format, dapat dilakukan seperti contoh berikut ini :

<head>
<title>mengatur padding</title>
8
body{
padding-top:30px;
padding-bottom:30px;
padding-right:40px;
padding-left:40px}
</style>
</head>
<body>
Belajar mengatur padding?<br />
Dengan menggunakan property padding
</body>
</html>
Penggunaan padding top pada contoh diatas digunakan untuk mengatur padding atas sebesar
30 px, Padding-right digunakan untuk mengatur padding atas sebesar 40 px, padding-bottom
digunakan untuk mengatur padding bawah dengan ukuran 30 px, dan padding-left digunakan untuk
mengatur padding sisi kiri dari suatu elemen HTML sebesar 40 px.
2.2 Display dalam CSS
Pengaturan display pada halaman web agar sesuai dengan keinginan dapat diatur
menggunakan CSS dengan menggunakan selector yang ditulis seperti berikut ini
Selector{display:tipe-display;}. Terdapat beberapa jenis tipe yang dapat diterapkan
diantaranya
1. Tipe inline
Dengan tipe ini elemen yang ditampilkan secara inline akan mengikuti alur dari sebuah garis
/ line seperti elemen Strong,elemen anchor,dan elemen emphasis. Hal ini dapat dilihat pada
contoh dibawah ini :

<head>
<title>Penerapan Display Inline'</title>
li {
display: inline;
}
</style>
</head>
<body>
<ul>
<li>WEB</li>
<li>CSS</li>
<li>PHP</li>
<li>HTML</li>
</ul>
</body>
</html>
9
Document CSS diatas akan menghasilkan display textyang tampak diatur mengikuti alur dari
sebuah garis / line.Penggunalan diplay : inline menyebabkan tulisan WEB CSS PHP HTML
tampak segaris walaupun sudah diberi property <li> yang seharusnya digunakan untuk
menampilkan daftar list item. Berikut adalah tampilan yang akan terihat pada browser bila
contoh diatas dijalankan.
Gambar2.2 penerapan Display Inline
2. Tipe Block
Komponen display ini digunakan untuk menempatkan line break sebelum dan sesudah
elemen yang diberikan dalam sebuah property.Dengan display block, tulisan
akanditampilkan secara perbaris. Hal ini dapat dilihat pada penerapan display block pada
contoh sintaks berikut ini :

<head>
<title>Penerapan Display Block</title>
span{display:block}
</style>
</head>
<body>
<span>Ini adalah salah atu contoh Display CSS yaitu</span>
<span>Block</span>
</body>
</html>
Saat program diatas dijalankan maka browser akan menampilkan hasil seperti gambar
berikut ini :
10
Gambar 2.3 Penerapan Display Block
3. Tipe None
Tipe ini digunakan untuk menghilangkan selector, dengan kata lain dapat digunakan untuk
meniadakan elemen tertentu atau tidak ditampilkannya nilai dari property pada sebuah
elemen. Berikut ini adalah contoh penerapannya :

<head>
<title>Penerapan Display None</title>
h2{
display: none;
}
</style>
</head>
<body>
<h2> Belajar CSS dengan Display None</h2>
</body>
</html>
Class h2 diberikan property display dengan value none. Hal ini akan menyebabkan tulisan
Belajar CSS dengan Display None tidak akan ditampilkan oleh browser seperti yang tampil
pada browser seperti contoh berikut ini
11
Gambar2.4 Penerapan Display None
4. Tipe Display lain
Selain tipe display pokok yang telah dibahas diatas, terdapat tipe display lainnya seperti
menggunakan property display untuk menampilkan elemen li(list), UL(Unordered List)
maupun elemen OL(Ordered List) sehingga menampilkan data berupa daftar.Berikut contoh
Penerapan dari Display List-Item:

<head>
<title>Penerapan Display List_item</title>
.daftar{
display:list-item;
}
</style>
</head>
<body>
<div class="daftar">Akuntansi </div>
<div class="daftar">Pariwisata</div>
<div class="daftar">Administrasi Niaga</div>
<div class="daftar">Teknik Elektro</div>
<div class="daftar">Teknik Mesin</div>
<div class="daftar">Teknik Sipil</div>
</body>
</html>
Perintah yang ditulis pada class daftar menggunakan tipe display list item. Hal ini
menyebabkan tulisan yang diberikan class ini akan tampil sebagai daftar list walaupun tidak
menggunakan perintah <li>, sehingga user akan melihat tampilan pada browser seperti
berikut ini :
12
Gambar2.5 Penggunaan Display list-item
C. Soal Latihan
1. Buatlah sintaks css untuk mengatur margin dengan shorthand property

2. Buatlah halaman web yang paddingnya diatur dalam satu deklarasi
3. Buatlah sebuah halaman web yang didalamnya menerapkan 3 buah teknik
display saat di jalankan pada browser
BAB III
PEMFORMATAN FONT DAN TEKS
13
A. Kompetensi
Pembaca diharapkan dapat mengimplementasikan cara pemformatan font dan teks
B. Uraian Materi
3.1 Font
Property font akan digunakan untuk mengatur karakter dari huruf yang akan ditampilkan
pada halaman web. Berikut ini adalah beberapa format yang dapat diterapkan pada
property Font.
1. Font-Size
Property ini digunakan untuk memberi ukuran pada text seperti yang ditampilkan dari tabel
berikut ini :
Keterangan Property Font

Normal font-size:normal
xx-small font-size:xx-small
x-small font-size:x-small
Small font-size:small
Smaller font-size:smaller
Medium font-size:medium
Large font-size:large
x-large font-size:x-large
xx-large font-size:xx-large
Larger font-size:larger
Percent(%) font-size:50%
Panjang(px,pt) font-size:20px ; font-size:35pt
Berikut ini adalah contoh penggunaan property Font-size:
<span style="font-size:30px">ukuran font 30px</span>

<span style="font-size:20pt">ukuran font 20pt</span>
<span style="font-size:normal">ukuran font normal</span>
<span style="font-size:xx-small">ukuran font xx-small</span>
<span style="font-size:x-small">ukuran font x-small</span>
<span style=font-size:small>ukuran font small</span>
<span style="font-size:smaller">ukuran font smaller</span>
<span style="font-size:xx-large">ukuran font xx-large</span>
<span style="font-size:x-large">ukuran font x-large</span>
<span style="font-size:large">ukuran font large</span>
<span style="font-size:larger">ukuran font larger</span>
<span style="font-size:medium">ukuran font medium</span>
<span style="font-size:200%">ukuran font 200%</span>
Hasil tampilan contoh penggunaan font-size pada browser adalah seperti tampilan gambar
berikut:
14
Gambar 3.1 Penerapan font-size
2. Font-Family
Font family adalah penggunaan property untuk mengatur jenis font yang akan ditampilkan
pada halaman web. Berikut contoh penggunaan Font-family pada CSS
<span style="arial">menggunakanfont family, arial</span>

<span style="font-family:serif">menggunakanfont family, serif </span>
<span style="font-family:Times">menggunakanfont family, Times new roman</span>
<span style="font-family:arial black">menggunakanfont family, arial black </span>
<span style="font-family:giorgia">menggunakanfont family, giorgia</span>
<span style="font-family:verdana">menggunakanfont family, verdana</span>
<span style="font-family:kartika">menggunakanfont family, kartika</span>
Hasil tampilan penggunaan Font-Family adalah sebagai berikut
15
Gambar 3.2 Penerapan Font-family
Berikut contoh penggunaan font-family dengan value Generic font:
<span style="font-size:50px;font-variant:normal;font-weight:normal;font-family:kartika">ini
tampilannya</span>
<span style="font-size:40px;font-variant:italic;font-weight:bolder;font-family:times">initampilannya</span>
<span style="font-size:30px;font-variant:normal;font-weight:normal;font-family:arial">initampilannya</span>
<span style="font-size:20px;font-variant:italic;font-weight:bold;">initampilannya</span>
Hasil tampilan penggunaan font Family pada browser dengan value Generic font:
Gambar 3.3 penerapan Font-Family dengan value generic font
3. Font-style
16
Font-style adalah property untuk megatur gaya penulihan huruf. Penulisan property ini
memiliki tiga value diantaranya :
Nilai Contoh Penggunaan

Normal Font-style:normal
Italic Font-style:Italic
Oblique Font-style:oblique
Contoh penggunan font-style dalam CSS:
<span style="font-style:normal">font style normal</span>

<span style="font-style:italic">font style italic</span>
<span style="font-style:oblique">font style oblique</span>
Hasil tampilan implementasi font-style pada browser adalah sebagai berikut :
Gambar 3.4 Penerapan Font-style
4. Ketebalan Huruf
Pengaturan ketebalan huruf dilakukan dengan menggunakan property font-weight. Adapun

nilai dari property font-weight ini adalah

Normal Font-weight:normal
Bold Font-weight:bold
Bolder Font-weight:bolder
Lighter Font-weight:lighter
100-900 Font-weight:400
Berikut ini adalah contoh penerapan Font-weight :
<span style="font-weight:normal">font weight normal</span>

<span style="font-weight:bold">font weight bold</span>
<span style="font-weight:bolder">font weight bolder</span>
<span style="font-weight:lighter">font weight lighter</span>
17
<span style="font-weight:800">font weight 800</span>
Hasil tampilan penggunaan font-weight pada browser terlihat seperti gambar berikut:
Gambar 3.5 Penggunaan font-weight
5. Jenis Huruf
Pengaturan jenis huruf dilakukan untuk menentukan huruf akan dibuat tampil normal atau
diubah menjadi huruf capital. Untuk mengaturnya dilakukan dengan property font-variant.
Property ini memiliki dua value/nilai antara lain

Normal Font-variant: normal
Small-caps Font-variant:small-caps
Contoh penggunaan font- variant dalam CSS:
<span style="font-variant:normal">font variant normal</span>

<span style="font-variant:small-caps">font variant semua huruf capital</span>
Hasil tampilan font-variant dalam browser adalah sebagai berikut :
18
Gambar 3.6 Penerapan Font-Variant
3.2 Teks
CSS text merupakan formatting CSS yang digunakan untuk mengatur tampilan dari teks pada
elemen HTML. Dalam tabel berikut ini terdapat beberapa property yang dapat disetting
pada CSS text antara lain :
Property Keterangan
Color Mengatur warna dari teks
direction Menentukan arah teks / arah tulisan
letter-spacing memperlebar atau mempersempit spasi diantara
karakter padaa text
line-height Mengatur line height
text-align Mengatur aligment horizontal daripada text
text-decoration Mengatur dekorasi dari text
text-indent Mengatur indentasi pada baris pertama dalam blok text
text-shadow Mengatur efek shadow pada text
text-transform Mengatur huruf capital text
unicode-bidi Digunakanbersama-samadengan direction property
untuk mengatur apakahteks harusdigantiuntuk
mendukung beberapa bahasadalam dokumen yang sama
vertical-align Mengatur aligment vertical pada elemen
white-space mengaturpenggunaan white-space dalam element
word-spacing Mengatur spasi antar text
Berikut ini adalah pembahasan beberapa property diatas diantaranya :
1. Line-height
19
Line-height adalah property pada CSS yang digunakan untuk mengatur tinggi antar baris
paragraf maupun font.

Normal Line-height:normal
Number Line-height:2.5
Lenght Line-height:30px
Lenght Line-height:75%
Contoh penggunaan Line-height sebagai berikut:
<html>
<head>
<title>line-height</title>
</head>
<body>
<div style="clear:both;background-color:yellow;width:500px;line-height:20px;">
ini line height:20px
ini line height:20px <br>
</div>
<br>
<br>
<div style="clear:both;background-color:lime;width:500px;line-height:40px;">
ini line height:40px <br>
</div>
<br>
<br>
<div style="clear:both;background-color:red;width:500px;line-height:100%;">
INI ADALAH line height 100%
INI ADALAH line height 100% <br>
</div>
<br>
<br>
<div style="clear:both;background-color:lime;width:500px;line-height:150%;">
ini line height:150% ini line height:150% ini line height:150%
ini line height:150% ini line height:150% ini line height:150% ini line height:150%
</div>
<br>
<br>
<div style="clear:both;background-color:lime;width:500px;line-height:normal;">
ini line height:normal ini line height:normal ini line height:normal ini line height:normal
20
</div>
</body>
</html>
Hasil tampilan penerapan line-height dari program diatas menghasilkan tampilan pada
browser seperti berikut ini:
Gambar 3.7 Penerapan line-height
2. Text-Decoration
Text-Decoration digunakan untuk menentukan nilai dekorasi dari suatu font text. Yang
dilakukan dengan cara penulisan p {text-decoration: overline}
Nilai Contoh Penggunaan Fungsi
21
None Text-decoration:none untuk membuat tulisan tanpa
dekorasi
Underline Text-decoration:underline membuat tulisan dengan
dekorasi garis bawah
Overline Text-decoration:overline membuat tulisan dengan
dekorasi garis diatasnya
Line-through Text-decoration:line-through membuat tulisan dengan
dekorasi garis ditengahnya
Blink Text-decoration:blink membuat tulisan berkedip
Contoh Penerapan text-decoration pada CSS adalah sebagai berikut:
<html>
<head>
h1 {text-decoration: blink}
h2 {text-decoration: underline }
h3 {text-decoration:line-through }
h4 {text-decoration:overline }
a {text-decoration: none}
</style>
</head>
<body>
<h1>Header 01</h1>
<h2>Header 02</h2>
<h3>Header 03</h3>
<h4>Header 04</h4>
<p><a href="http://4gratisfree.blogspot.com/">Link</a></p>
</body>
</html>
Hasil tampilan penerapan text-decoration padascript diatas menghasilkan tampilan pada

browser sebagai berikut :
22
Gambar 3.8 Penerapan text-decoration
3. Text Transform
Format ini digunakan untuk menentukan perubahan bentuk huruf yang telah diatur
sebelumnya seperti misalnya huruf besar diawal kata, semua text huruf kapital, semua text
menggunakan hufuf kecil

None Text-transform:None
Capitalize Text-transform:capitalize
Uppercase Text-transform:uppercase
Lowercase Text-transform:lowercase
Contoh penerapan text-transform dalam CSS adalah
<html>
<head>
<title>text-transform css</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
body{background-color:yellow;}
#misaltext-transform1{
text-transform:capitalize;
}
text-transform:uppercase;
}
text-transform:lowercase;
}
23
text-transform:none;
}
.anggapsebagaikotak{
clear:both;
background-color:white;
width:400px;
margin:20px;
padding:10px;
}
</style>
</head>
<body>
<div class="anggapsebagaikotak" id="misaltext-transform1">
ini text ini text ini text ini text
</div>
</div>
INI ADALAH TEXT TRANSFORM LOWERCASE
</div>
</div>
</body>
</html>
Hasil tampilan pada browser saat tampilan text-transform dijalankan adalah sebagai berikut
ini:
24
Gambar 3.9 Penggunaan text-transform (none)
4. Text-align
Text-align adalah salah satu property pada CSS yang fungsinya untuk membuat perataan
pada text. Adapun beberapa property text align adalah seperti berikut ini
Nilai Contoh penggunaan Fungsi

Left Text-align:left membuat perataan kiri.
Right Text-align:right membuat perataan kanan.
Center Text-align:center membuat perataan tengah
Justify Text-align:justify membuat perataan kanan
dan kiri
Berikut ini adalah contoh text-align script CSS
25
<html>
<head>
<title>text-align css</title>
body{background-color:pink;}
#misaltext-align1{
text-align:right;
}
#misaltext-align2{
text-align:left;
}
#misaltext-align3{
text-align:center;
}
#misaltext-align4{
text-align:justify;
}
clear:both;
width:400px;
margin:20px;
padding:10px;
}
</style>
</head>
<body>
<div class="anggapsebagaikotak" id="misaltext-align1">
ini text ini text ini text ini text<br/>
</div>
</div>
</div>
26
</div>
</body>
</html>
Hasil tampilan impementasi text-align pada browser adalah seperti berikut ini :
Gambar 3.10 Penerapan text-align
5. Text-Indent
27
Property pada CSS ini digunakan untuk membuat jarak/lekuk di awal paragraph atau biasa
disebut alenia. Terdapat 2 buah tipe penentuan text indent diantaranya

Length Text-indent: 20px
Percentage(%) Text-indent:20%
Contoh penerapan pengaturan text indent dapat dilihat pada script program berikut ini :
<html>
<head>
<title>text-indent css</title>
#misaltext-indent1{
text-indent:20px;
}
#misaltext-indent2{
text-indent:40px;
}
#misaltext-indent3{
text-indent: 60px;
}
#misaltext-indent4{
text-indent:30%;
}
clear:both;
width:400px;
margin:20px;
padding:10px;
}
</style>
</head>
<body>
<div class="anggapsebagaikotak" id="misaltext-indent1">
</div>
</div>
28
</div>
</div>
</body>
</html>
Hasil tampilan pada browser bila script diatas dijalankan adalah sebagai berikut
29
Gambar 3.11 Penerapan text-indent
6. White-Space
White-space adalah salah satu property pada CSS yang fungsinya digunakan untuk mengatur
keseluruhan space(spasi) dalam paragraf. Terdapat beberapa value white-spacediantaranya
normal, pre, nowrap, pre-wrap, pre-line, dan inherit(mewarisi)
Berikut ini adalah contoh penggunaan white-space dalam internal style
<html>
<head>
<title>white-space css</title>
30
#misalwhite-space1{
white-space:normal;
}
#misalwhite-space2{
white-space:pre;
}
#misalwhite-space3{
white-space:nowrap;
}
#misalwhite-space4{
white-space:pre-wrap;
}
#misalwhite-space5{
white-space:pre-line;
}
#misalwhite-space6{
white-space:inherit;
}
clear:both;
width:400px;
margin:20px;
padding:10px;
}
</style>
</head>
<body>
<div class="anggapsebagaikotak" id="misalwhite-space1">
normal
</div>
pre
</div>
nowrap
31
</div>
pre-wrap
</div>
pre-line
</div>
inherit
</div>
</body>
</html>
Hasil tampilan penggunaan white-space yang akan tampak pada browser adalah seperti
tampilan gambar 3.12 berikut ini :
32
Gambar 3.12Penerapan white-space
C. Soal Latihan
1. Lengkapilah script pada contoh yang dibahas pada pengaturan font.

2. Desainlah sebuah halaman web dengan mengimplementasikan pemformatan
huruf dan paragraph yang ada.
BAB IV
WARNA DAN LATAR BELAKANG
33
A. Kompetensi
Pembaca mamu melakukan pengaturan warna text, background color text maupun
halaman web
B. Uraian Materi
4.1 Teknik Pengaturan Nilai Warna
Terdapat 3 teknik untuk menentukan pengaturan warna dalam CSS yaitu dengan
menentukan nama dari warna, memasukkan kode heksadesimal dari warna dan
menentukan presentase komposisi warna RGB.
1. Common Name
Warna dapat ditentukan dengan menggunakan nilai dari common name sebuah warna yang
ditulis dengan contoh seperti pada script program berikut ini :

<head>
<title>Setting warna dengan css</title>
body {margin:100px}
#id1 {font-variant:small-caps; color:red;}
#id2 { font-style:italic; color:yellow;}
#id3 {font-variant:small-caps;color:blue;}
</style>
</head>
<body>
<div id="id1"> Bagaimana mensetting warna dengan CSS ???</div>
<div id="id2"> Mensetting warna layout dengan CSS dapat dilakukan dengan : </div>
<div id="id3"> Menentukan warna dengan nilai common name </div>
</body>
</html>
Coding diatas digunakan untuk menentukan warna dari huruf. Hal dilakukan adalah dengan
menuliskan nama warna yang akan ditampilkan pada browser, seperti warna red, yellow
dan blue. Saat listing program ini dijalankan maka browser akan menampilkan gambar
sebagai berikut :
34
Gambar 4.1 Penerapan warna common name
2. Nilai Warna Hexadecimal
Pewarnaan heksadesimal dalam pemrograman web terdiri dari dari enam buah karakter
heksadesimal yang tiap dua-dua karakter masing-masing menyatakan entitas dari Red
(merah), Green (hijau) dan Blue (biru).Nilai-nilai yang dapat diisikan untuk tiap-tiap entitas
RGB ini adalah dari 00 sampai FF. Atau dalam angka desimal 0 sampai 255.Berikut ini adalah
contoh implementasi pengaturan warna dengan hexadecimal.

<head>
body {margin:10px}
#id {font-variant:small-caps; color:#0000FF; background-color:#FF0000}
#id2 {color:#00FF00;font-style:italic}
#id3 {font-variant:small-caps;color:#FF0000; font-weight:bold; background-color:#FFFF00}
</style>
</head>
<body>
<div id="id"> Bagaimana mensettinf warna dengan CSS ???</div>
<div id="id3">1. Menentukan warna dengan nilai common name </div>
<div id="id3">2. Menentukan warna dengan nilai hexadesimal </div>
</body>
</html>
Sintaks diatas akan mengatur warna tulisan menjadi merah, biru, dan hijau serta warna
background dari teks yang ada, hal tersebut dapat dilihat pada tampilan pada web browser
seperti gambar berikut ini :
35
Gambar 4.2 Penerapan Warna hexadecimal
2. Nilai Warna RGB
Teknik warna RGB singkatan dari Red - Green - Blue adalah model warna pencahayaan
(additive color mode) .Dalam CSS pewarnaan RGB digunakan untuk menentukan warna
dengan memasukan nilai dari warna merah, hijau dan biru (red, green, blue) yang berkisar
dari 0 sampai 255. Penerapan pewarnaan teknik ini dapat dilihat dari contoh sebagai berikut

<head>
body {margin:10px}
#id {font-variant:small-caps; color:rgb(255,255,200); background-color:rgb(50,150,200)}
#id2 {color:rgb(50,50,50);font-style:italic}
#id3 {font-variant:small-caps;color:(255,255,50); font-weight:bold; background-color:rgb(255,50,50)}
</style>
</head>
<body>
<div id="id"> Bagaimana mensetting warna dengan CSS ???</div>
<div id="id3">1. Menentukan warna dengan nilai common name </div>
</body>
</html>
<head>
<title>Untitled Document</title>
</head>
<body>
36
</body>
</html>
Saat script tersebut diatas dijalankan maka akan diperoleh hasil seperti berikut ini
Gambar 4.3 Penggunaan Warna RGB
4.2 Setting Warna
Pada dasarnya terdapat tiga opsi untuk menentukan warna dengan menggunakan CSS, yaitu
:
4.2.1 Setting warna latar belakang untuk isi
Pengaturan latar belakang isi diatur dengan property color yang diberikan sekaligus pada
pemanggilan property text. Berikut ini adalah contoh penentuan warna latar belakang untuk
isi dapat dilihat pada contoh berkut ini :

<head>
<title>Mengatur Warna</title>
<style>
#id{background-color:red}
#id2{font-family:Verdana; color:green}
</style>
</head>
<body>
<div id="id">Ini adalah Warna Pada Latar belakang</div>
<div id="id2">Ini adalah warna pada tulisan (Text)</div>
</body>
</html>
Script diatas akan menghasilkan hasil pada web browser seperti pada gambar berikut ini :
37
Gambar 4.4 Pengaturan warna latar belakang text
4.2.2 Warna Latar Belakang Halaman
Pengaturan warna latar belakang halaman akan diatur dengan menggunakan property
background-color. Penggunaannya dapat dilihat pada contoh program berikut ini :

<head>
<title>Mengatur warna Latar</title>
<style>
body { color:#FFFF00; background-color:lime}
#utama { font-weight:bold; color:#FFFFFF; font-variant:small-caps; background-color:#0000FF}
</style>
</head>
<body>
Mensetting warna layout dengan CSS menggunakan :
<div id="utama"> 1. Menggunakan Warna Latar</div>
</body>
</html>
Hasil dari script diatas yang akan tampil di browser seperti gambar berikut ini :
38
Gambar 4.5 Pengaturanwarna latar
4.2.3 Warna Latar Belakang Degradasi
Untuk mempercantik tampilan dari latar belakang pada halaman web dapat dibuat menarik
dengan mengatur tampilan dari latar dengan menggunakan degradasi warna. Ini adalah
contoh sintaks mengatur degrasi warna background :

<head>
<title>Degradasi Warna</title>
body{ font-family:Verdana; font-size:24px; color: black;}
#tes{height: 700px;
width: 700px;
border: 1px solid #000000;
background: red;
background: -moz-linear-gradient( center top, blue 20%, Yellow 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, red), color-stop(1, yellow) );
}
</style>
</head>
<body>
<div id="tes"><center>Ini Adalah Contoh Degradasi Warna</center></div>
</body>
</html>
Gambar berikut ini adalah hasil dari sintaks setelah di jalankan pada browser
39
Gambar 4.6 Pengaturan degradasi warna
4.2.4. Warna Latar belakang dengan gambar
Pengaturan latar belakang sebuah halaman web menggunakan gambar dapat dilakukan
dengan property background-image dan menentukan arah url nya menuju sebuah file pada
tempat tertentu. Berikut ini adalah contoh script untuk mengatur warna latar belakang
halaman dengan gambar

<head>
<title>Membuat background</title>
<style>
body { color:blue; background-image:url(gambar1.jpg);}
#utama { font-weight:bold; color:#FFFFFF; font-variant:small-caps; background-color:#0000FF}
</style>
</head>
<body>
Mensetting warna layout dengan CSS menggunakan :
<div id="utama"> 1. Menggunakan Warna Latar</div>
<div id="utama"> 2. Menggunakan Gambar dengan CSS</div>
</body>
</html>
Hasil tampilan penggunaan gambar latar apabila script diatas dijalankan adalah seperti
gamabr berikut ini
40
Gambar 4.7 Penggunaan gambar latar
4.2.5 Penggunaan Latar Belakang Berulang
Latar belakang berulang adalah penggunaan gambar berukuran kecil yang akan ditampilkan
sesuai dengan ukuran gambar yang sebenarnya namun ditampilkan berulang kali sehingga
tampak memenuhi halaman. Pengaturan latar belakang berulang ini dilakukan dengan
Background-repeat. Adapun nilai dari property ini adalah :
Property Nilai Keterangan

Background-repeat repeat Berulang sampai halaman web tertutup
repeat-x Berulang secara horisontal
repeat-y Berulang secara vertikal
no-repeat Background tidak diulang sama sekali
Berikut ini adalah contoh script untuk property background-repeat
a. Background-repeat:repeat

<head>
<title>Membuat gambar latar repeat</title>
<style>
41
body { color:blue; font-size:24px; font-weight:bold; background-image:url(heart.png); background-
repeat:repeat;}
#utama { font-weight:bold; color:#000000; font-variant:small-caps; background-color:#FF0000}
</style>
</head>
<body>
<div id="utama">Ini Adalah Tampilan dari Background-repeat:repeat</div>
</body>
</html>
b. Background-repeat:repeat-x

<head>
<title>Membuat gambar latar repeat-x</title>
<style>
repeat:repeat-x;}
#utama { font-weight:bold; color:#000000; font-variant:small-caps; background-color:#FFFF00}
</style>
</head>
<body>
<div id="utama">Ini Adalah Tampilan dari Background-repeat:repeat-x</div>
</body>
</html>
c. Background-repeat:repeat-y

<head>
<title>Membuat gambar latar repeat-y</title>
<style>
repeat:repeat-y;}
#utama { font-weight:bold; color:#FFFFFF; font-variant:small-caps; background-color:#000099}
</style>
</head>
<body>
<div id="utama">Ini Adalah Tampilan dari Background-repeat:repeat-y</div>
</body>
</html>
d. Background-repeat:no-repeat

<head>
42
<title>Membuat gambar latar no-repeat</title>
<style>
body { color:blue; font-size:24px; font-weight:bold; background-image:url(heart.png); background-repeat:no-
repeat;}
#utama { font-weight:bold; color:white; font-variant:small-caps; background-color:black}
</style>
</head>
<body>
<div id="utama">Ini Adalah Tampilan dari Background-repeat:no-repeat</div>
</body>
</html>
4.2.6 Pengaturan Posisi Gambar Latar
Dalam CSS pengaturan posisi gambar dan latar dapat diatur secara tepat dengan
menggunakan property backgroound-position dengan berbagai nilai yang mengikutinya.
Perhatikan tabel di bawah ini :
Property Nilai Keterangan

Background-position <persentase> menentukan posisi dalam ukuran persen
(%).
<ukuran panjang> Posisi dengan ukuran panjang pixel
Top Posisi atas dari halaman web
Center Posisi tengah dari halaman web
Bottom Posisi bawah dari halaman web
Left Posisi kiri dari halaman web
Right Posisi kanan dari halaman web
Berikut ini adalah contoh implementasi sintaks pengaturan background position
a. <persentase>

<head>
<title>mengatur posisi background dengan persentase</title>
<style>
body { color:blue; font-size:24px; font-weight:bold; background-image:url(firefox.png); background-repeat:no-
repeat; background-position: 100% 100%; height: 450px; width: 600px;
}
#utama { font-weight:bold; color:#000000; font-variant:small-caps;}
</style>
</head>
<body>
<div id="utama">Tampilan dari Background menggunakan persentase (%)</div>
</body>
</html>
43
b. <ukuran panjang>

<head>
<title>mengatur posisi background dengan ukuran panjang</title>
<style>
body { color:blue; font-size:24px; font-weight:bold; background-image:url(firefox.png); background-repeat:no-
repeat;
background-position: 0px 30px;
height: 450px;
width: 650px;
}
#utama { font-weight:bold; color:#FF0000; font-variant:small-caps;}
</style>
</head>
<body>
<div id="utama">Tampilan dari Background menggunakan Ukuran Panjang (px)</div>
</body>
</html>
c. Top

<head>
<title>mengatur posisi background menggunakan top</title>
<style>
body { font-weight:bold; background-image:url(firefox.png); background-repeat:no-repeat; background-
position:top;
height: 450px;
width: 650px;
}
#utama { font-weight:bold; font-size:24px; color:#0000FF; font-variant:small-caps;}
</style>
</head>
<body>
<div id="utama">Tampilan dari Background </div>
<div id="utama">Menggunakan Top</div>
</body>
</html>
d. Center

<head>
<title>mengatur posisi background menggunakan Center</title>
<style>
44
body { font-weight:bold; background-image:url(firefox.png); background-repeat:no-repeat;
background-position:center;
height: 450px;
width: 650px;
}
#utama { font-weight:bold; font-size:24px; color:#FFCC33; font-variant:small-caps;}
</style>
</head>
<body>
<div id="utama"><center>Tampilan dari Background </center></div>
<div id="utama"><center>Menggunakan Center</center></div>
</body>
</html>
e. Bottom

<head>
<title>mengatur posisi background menggunakan bottom</title>
<style>
background-position:bottom;
height: 450px;
width: 650px;
}
#utama { font-weight:bold; font-size:24px; color:#999999; font-variant:small-caps;}
</style>
</head>
<body>
<div id="utama"><center>Tampilan dari Background </center></div>
<div id="utama"><center>Menggunakan Bottom</center></div>
</body>
</html>
f. Left

<head>
<title>mengatur posisi background menggunakan Left</title>
<style>
background-position:left;
height: 450px;
width: 650px;
}
#utama { font-weight:bold; font-size:24px; color:#FFFFFF; font-variant:small-caps; background-color:#000000}
</style>
</head>
<body>
45
<div id="utama"><p align="right">Tampilan dari Background </p></div>
<div id="utama"><p align="right">Menggunakan Left </p></div>
</body>
</html>
g. Right

<head>
<title>mengatur posisi background menggunakan Right</title>
<style>
background-position:right;
height: 450px;
width: 650px;
}
#utama { font-weight:bold; font-size:24px; color:#0000FF; font-variant:small-caps; background-color:#FFCC66}
</style>
</head>
<body>
<div id="utama"><p align="left">Tampilan dari Background </p></div>
<div id="utama"><p align="left">Menggunakan Right </p></div>
</body>
</html>
C. Soal latihan
1. Buatlah lisiting program untuk mengatur warna text dan latar belakang dengan
menerapkan beberapa warna yang berbeda, dan kemudian temukan padanannya
dalam pewarnaan hexadesimal
2. Buatlah sebuah halaman yang menggabungkan beberapa gambar utnuk ditampilkan
pada halaman web
46
BAB V
HYPERLINK DALAM CSS
A. Kompetensi
Peserta diharapkan dapat dapat mengimplementasikan Hyperlink dalam CSS
B. Uraian Materi
Hyperlink dalam halaman web digunakan untuk menghubungkan user ke sebuah file atau
menuju dokumen lain dalam web. Dalam hyperlink terdapat beberapa properti dan untuk
menunjukan lokasi lain dari objek yang dipresentasikan. Hyperlink akan terlihat pada suatu
link yang dihubungkan dengan dokumen HTML yang dibuat.
5.1 Property Hyperlink

Berikut ini adalah beberapa property pada hyperlink yang dapat digunakan dalam CSS.
1. A:Link merupakan link yang digunakan untuk mengatur link normal yang belum
pernah dikunjungi.Contoh: dimana link yang belum pernah dikunjungi akan ditunjukkan
dengan warna kuning.
A:link{text-decoration:none;color:yellow;}
2. A:Visited merupakan kebalikan dari A:Link. yaitu Link yang sudah pernah dikunjungi
sebelumnya,Contoh suatu link ini akan ditunjukkan dengan warna biru.
A:visited{text-decoration:none;color:blue;}
47
3. A:Active merupakan Link yang sedang aktif.
A:active{text-decoration:none;color:}
4. A:Hover merupakan Link ketika krusor mouse melintas di atas link
A:hover{text-decoration:none;}
5.2 Contoh Penggunaan Link pada CSS
1. Menambahkan warna link, saat dikunjungi serta pada saat diklik

a.satu:link {color:#00FF000;}
a.satu:visited {color:#00FF00;}
a.satu:hover {color:#FF00FF;}
a.satu:active {color:#0000FF;}
</style>
<a class="satu" href="http://www.pnb.ac.id/" target="_blank">PoliteknikNegeri Bali</a>
Saat sintaks diatas dijalankan maka browser akan menampilkan link berwarna hijau, akan
tetapi jika kursor diarahkan pada link tersebut maka warna link akan berubah menjadi
pink.Hasil tampilan penggunaan warna link pada browser dengan menerapkan sintaks diatas
adalah seperti gambar 5.1 dan 5.2 berikut ini:
Gambar 5.1 Penggunaan warna link ketika dijalankan
Gambar 5.2 Penggunaan Warna link Setelah Kursor diarahkan
48
2. Penggunaan text-decoration pada link
a.dua:link {text-decoration:none;}
a.dua:visited {text-decoration:none;}
a.dua:hover {text-decoration:underline;}
a.dua:active {text-decoration:underline;}
</style>
<a class="dua" href="http://www.pnb.ac.id/" target="_blank">PoliteknikNegeri Bali</a>
Pada saat browser dijalankan sintaks diatas akan menampilkan Link tidak bergaris bawah,
akan tetapi jika kursor diarahkan pada Link tersebut maka Link akan berubah menjadi
bergaris bawah. Hasil tampilan penggunaan text-decoration link pada browser akan menjadi
seperti gambar 5.3 dan 5.4 berikut ini :
Gambar 5.3 penggunaan text-decoration pada link ketika dijalankan
Gambar 5.4 penggunaan text-decoration pada link Setelah kursor diarahkan.
3. Menentukan warna latar belakang untuk link
a.tiga:link {background-color:#B2FF99;}
49
a.tiga:visited {background-color:#FFFF85;}
a.tiga:hover {background-color:#FF704D;}
a.tiga:active {background-color:#FF704D;}
</style>
<a class="tiga" href="http://www.pnb.ac.id/" target="_blank">PoliteknikNegeri Bali</a>
SIntaks diatas akan menyebabkan ketika dijalankan pada browser Link mempunyai
background berwarna kuning,akan tetapi ketika kursor diarahkan pada Link maka warna
background pada Link akan berubah menjadi berwarna magenta. Hasil pada browser akan
tampil seperti gambar 5.5 dan 5.6 berikut ini :
Gambar 5.5 penggunaan warna latar belakang pada link ketika dijalankan
Gambar 5.6 penggunaan warna latar belakang pada link ketika kursordiarahkan
4. Memberikan efek lain pada link
a.empat:link {color:#ff0000;}
a.empat:visited {color:#0000ff;}
a.empat:hover {color:#ffcc00;}
a.lima:link {color:#ff0000;}
a.lima:visited {color:#0000ff;}
a.lima:hover {font-size:150%;}
a.enam:link {color:#ff0000;}
50
a.enam:visited {color:#0000ff;}
a.enam:hover {background:#66ff66;}
a.tujuh:link {color:#ff0000;}
a.tujuh:visited {color:#0000ff;}
a.tujuh:hover {font-family:monospace;}
a.delapan:link {color:#ff0000;text-decoration:none;}
a.delapan:visited {color:#0000ff;text-decoration:none;}
a.delapan:hover {text-decoration:underline;}
</style>
<a class="empat" href="http://www.pnb.ac.id/" target="_blank">PoliteknikNegeri Bali</a><br>
<a class="lima" href="http://www.pnb.ac.id/" target="_blank">PoliteknikNegeri Bali</a><br>
<a class="enam" href="http://www.pnb.ac.id/" target="_blank">PoliteknikNegeri Bali</a><br>
<a class="tujuh" href="http://www.pnb.ac.id/" target="_blank">PoliteknikNegeri Bali</a><br>
<a class="delapan" href="http://www.pnb.ac.id/" target="_blank">PoliteknikNegeri Bali</a><br>
Hasil tampilan efek pada browser akan ditunjukkan pada gambar 5.7 dibawah, sesuai
dengan penjelasan berikut ini :
o Pada link pertama jika kursor diarahkan pada link maka warna tulisannya akan
berubah dari biru menjadi orange.
o Pada link kedua jika kursor diarahkan pada link maka ukuran tulisannya akan
berubah lebih besar menjadi 150%.
o Pada link ketiga jika kursor diarahkan pada link maka warna background akan
berubah menjadi hijau.
o Pada link keempat jika kursor diarahkan pada link maka tipe tulisannya akan berubah
menjadi monospace.
o Pada link kelima jika kursor diarahkan pada link maka akan muncul garis bawah atau
underline yang tidak ada pada link sebelumnya.
Gambar 5.7 Penggunaan efek pada link CSS
5. Membuat kotak link berbentuk tab menu
a.sembilan:link,a.sembilan:visited
51
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a.sembilan:hover,a.sembilan:active
{
background-color:#0099FF;
}
</style>
<a class="sembilan" href="http://www.pnb.ac.id/" target="_blank">Politeknik Negeri
Bali</a>
Sintaks diatas akan member hasil pada saat browser dijalankan Link mempunyai background
berwarna Hijau, kemudian jika kursor diarahkan pada Link maka warna background pada
Link akan berubah menjadi berwarna hijau tua seperti yang ditampilkan pada gambar 5.8
dan 5.9 dibawah ini
Gambar 5.8 penggunaan kotak link berbentuk tab menu ketika browser dijalankan
52
Gambar 5.9 penggunaan kotak link berbentuk tab menu ketika kursor diarahkan.
C. Latihan Soal
1. Buatlah sebuah web yang terdiri dari 3 halaman dengan desain anda sendiri
dengan menerapkan berbagai property dalam selector yang sudah dipelajari
sebelumnya dan ketiga halaman tersebut saling terkait satu dengan yang lainnya
53

Modul Css Fix

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Css Fix

Diunggah oleh

Hak Cipta:

Format Tersedia

CASCADING STYLE SHEET

( Modul CSS dalam Kuliah Desain Grafis )

NI WAYAN WISSWANI, ST, MT

POLITEKNIK NEGERI BALI

JURUSAN TEKNIK ELEKTRO

PROGRAM STUDI SISTEM INFORMASI

Pembaca diharapkan memahami struktur dasar CSS

1.1 Pengenalan CSS

1.2 Sejarah CSS

1.2.1 CSS 1 (CSS Level 1)

1.2.2 CSS 2 ( CSS Level 2)

1.2.3 CSS 3 (CSS Level 3)

1.3 Struktur Dasar CSS Dalam HTML

CSS dalam HTML dapat ditempatkan dengan berbagai cara diantaranya :

1.3.1 Inline style

Gambar 1.1 Penggunaan Inline Style

1.3.2 Internal Style

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Gambar 1.2 Penerapan Internal Style dilihat pada Browser

1.3.3 External Style

<!Simpan dengan Nama External.html-->

Gambar 1.3 PenerapanExternal Style pada Browser

Gambar 1.4 Penerapan External style

a. Meletakkan pada tag body

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Gambar 2.1 Hasil pengaturan border

Menggunakan satu deklarasi

Pengaturan menggunakan format

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

2.2 Display dalam CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Gambar2.2 penerapan Display Inline

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

4. Tipe Display lain

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

1. Buatlah sintaks css untuk mengatur margin dengan shorthand property

Keterangan Property Font

Berikut ini adalah contoh penggunaan property Font-size:

<span style="font-size:30px">ukuran font 30px</span>

<span style="arial">menggunakanfont family, arial</span>

Hasil tampilan penggunaan Font-Family adalah sebagai berikut

Berikut contoh penggunaan font-family dengan value Generic font:

Gambar 3.3 penerapan Font-Family dengan value generic font

Nilai Contoh Penggunaan

Contoh penggunan font-style dalam CSS:

<span style="font-style:normal">font style normal</span>

Hasil tampilan implementasi font-style pada browser adalah sebagai berikut :

Gambar 3.4 Penerapan Font-style

Pengaturan ketebalan huruf dilakukan dengan menggunakan property font-weight. Adapun

Nilai Contoh Penggunaan

Berikut ini adalah contoh penerapan Font-weight :

<span style="font-weight:normal">font weight normal</span>

Gambar 3.5 Penggunaan font-weight

Nilai Contoh Penggunaan

Contoh penggunaan font- variant dalam CSS:

<span style="font-variant:normal">font variant normal</span>

Hasil tampilan font-variant dalam browser adalah sebagai berikut :

Berikut ini adalah pembahasan beberapa property diatas diantaranya :

Nilai Contoh Penggunaan

Contoh penggunaan Line-height sebagai berikut:

Gambar 3.7 Penerapan line-height