CSS (Cascading Style Sheets)
TUJUAN
Mengetahui dan memahami dasar‐dasar CSS serta peran CSS dalam sebuah perancangan
halaman website.
LANDASAN TEORI
CSS (Cascading Style Sheets) merupakan cara untuk memisahkan isi dengan layout dalam
halaman‐halaman web. CSS memperkenalkan template berupa style untuk membuat dan
mempermudah penulisan dari halaman‐halaman yang dirancang. CSS dapat menciptakan
halaman yang tampak sama dengan resolusi layar dari pengunjung yang berbeda tanpa
memerlukan suatu [Link] web akan lebih mudah melakukan setting tampilan
keseluruhan web hanya dengan menggantikan atribut‐atribut atau perintah dalam style CSS
dengan atribut yang diinginkan tanpa harus mengubah satu per satu atribut tiap elemen yang
ada dalam situs.
1. Cara Kerja CSS
CSS hanya membutuhkan style sebagai penentu dari font, warna, dan format‐format
lain untuk memformat atribut sebuah halaman web yang dibuat. Tiap style mempunyai 2
elemen dasar, yaitu “selector” dan “declarator”. Selector merupakan tag HTML atau tag yang
dinamai sendiri oleh designer, sedangkan declarator adalah atribut/perintah CSS yang
menunjukkan tipe bentuk yang diaplikasikan pada selector. Declarator berada di dalam tanda
kurung kurawal “{}”.
Terdapat 2 jenis selector, yaitu ID dan CLASS
‐ Selector ID (diawalai tanda #)digunakan untuk menentukan style bagian unik dari HTML,
artinya satu nama ID hanya bisa digunakan satu kali pada sebuah halaman web.
‐ Selector CLASS (diawali tanda . )digunakan untuk menentukan style dari sebuah group
elemen, bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah nama class
dapat dipanggil beberapa kali pada elemen‐elemen yang ada pada sebuah halaman web.
2. Memanggil CSS
Selector dan declarator yang sudah dibuat dalam CSS kemudian dipanggil ke dalam HTML agar
layout yang dibuat diterapkan pada isi dalam dokumen HTML. Selector ID dan Class memiliki
pemanggilan yang berbeda, perhatikan gambar berikut :
3. Pewarisan (Inheritance)
Inheritance dalam CSS adalah sifat penurunan efek CSS dari sebuah tag HTML kepada tag
HTML lainnya. Syarat untuk inheritance adalah: tag tersebut harus berada di dalam tag
lainnya.
Di dalam HTML, setiap tag umumnya akan berada di dalam tag lain. Untuk seluruh tag
HTML, akan berada di dalam tag <html>, dan untuk seluruh tag yang tampil di web browser
akan berada di dalam tag <body>.
Perhatikan syntaks berikut :
<div><p>Saya sedang belajar <b>inheritance</b> CSS</p></div>
Dari contoh diatas, tag <p> berada di dalam tag <div>, sehingga dapat dikatakan tag <div>
adalah induk (parent) dari tag <p>. Sedangkan tag <b> yang berada di dalam tag <p>
merupakan anak (child) dari tag <p> dan grandchild dari tag <div>. Jika ada syntaks CSS
berikut :
div {
color:green;
}
Maka efek dari kode CSS tersebut akan membuat seluruh text di dalam tag <div> akan
berwarna hijau, walapun di dalam tag <div> juga terdapat tag‐tag lainnya. Dapat dikatakan
bahwa efek CSS tersebut diturunkan (inherit) dari tag induk <div> kepada tag anak <p> dan
<b>.
4. Penempatan CSS dalam HTML
Menempatkan style CSS dalam dokumen HTML dapat dilakukan dalam beberapa cara :
1. Inline Style
Style CSS dibuat dalam sebuah tag HTML yang hanya berlaku untuk dokumen yang
diapitnya saja.
2. Internal Style
Style CSS diletakkan di dalam dokumen HTML, terletak di antara tag <head> dan
</head>. Aturan‐aturan dalam style diatur sedemikian rupa untuk digunakan pada
suatu tempat maupun untuk keseluruhan situs.
3. Eksternal Style
Style CSS dibuat terpisah/diluar dokumen HTML dengan ekstensi .css, kemudian
dipanggil oleh dokumen HTML menggunakan perintah “link rel”.
ALAT DAN BAHAN
1. PC (Personal Computer)
2. Web Browser
3. Notepad++
LANGKAH PRAKTIKUM
1. Praktikum Inline Style
‐ Buka Notepad++.
‐ Tuliskan syntaks berikut pada halaman yang kosong :
<html>
<head>
</head>
<body>
<font style='font-family:arial; font-size:20px;
background-color:skyblue'>
Inline Style dalam CSS
</font>
</body>
</html>
‐ Simpan file sebagai “inline‐[Link]”.
‐ Hasilnya :
2. Praktikum Internal Style
‐ Buka Notepad++.
‐ Tuliskan syntaks berikut pada halaman yang kosong :
<html>
<head>
<style>
h1 {
color: blue;
margin-left:
30px;} </style>
</head>
<body>
<h1>This is a heading. This style is built by CSS
Internal Style</h1>
</body>
</html>
‐ Simpan file sebagai “eksternal‐[Link]”.
‐ Hasilnya :
3. Praktikum Eksternal Style
‐ Buka Notepad++.
‐ Tuliskan syntaks berikut pada halaman yang kosong :
h1 {
color: blue;
margin-left:
30px;} #par1{
text-align:center;
color:red;}
‐ Simpan file sebagai “[Link]”.
‐ Buka kembali Notepad ++, selanjutnya tulis syntaks berikut pada halaman yang
kosong :
<html>
<head>
<link rel="stylesheet" type="text/css"
href="[Link]"> </head>
<body>
<h1>This is Heading</h1>
<p id="par1">This is
Paragraph</p> </body>
</html>
‐ Simpan file sebagai eksternal‐[Link].
‐ Buka file eksternal‐[Link] dan hasilnya :
Layout dan Display
LANDASAN TEORI
Layout
1. Border
Property border digunakan untuk membuat garis batas luar yang lebih spesifik seperti
bentuk, lebar dan warna dari border tersebut.
a. Border‐style
Digunakan untuk menentukan bentuk border. Terdapat beberapa bentuk border yang
dapat ditampilkan menggunakan CSS :
‐ Dotted, border titik‐titik
‐ Dashed, border putus‐putus
‐ Solid, garis border solid/utuh
‐ Double, garis border ganda
‐ Groove, border berlekuk SD
‐ Ridge, border bergerigi 3D
‐ Inset, border efek inset 3D
‐ Outset, border efek outset 3D
‐ None, tidak ada border
‐ Hidden, border teresembunyi
b. Border‐width
Digunakan untuk mengatur lebar border, dapat diatur dengan satuan tertentu (dalam
px, pt, cm, em, dll) atau menggunakan salah satu dari 3 (tiga) nilai yang sudah
ditentukan yaitu thin, medium, atau thick.
c. Border‐color
Digunakan untuk mengatur warna border, dapat diatur dalam beberapa cara :
‐ Nama warna misal “red”, “green”, “blue”
‐ Hexadesimal, misal “#FF0000”
‐ Nilai RGB, misal “rgb(255,0,0)”
‐ Transparan atau tidak ada warna
d. Border‐radius
Digunakan untuk membuat sudut border membulat. Nilai dari property border‐
radius adalah px (piksel).
2. Margin
Property margin digunakan untuk memberikan ruang di luar border di sekeliling atas,
kanan, bawah dan kiri isi/elemen. Property margin dapat ditulis langsung dengan cara
disingkat (Shorthand) untuk keempat sisi tersebut, atau bisa satu per satu (Individual
Sides) yang dibagi menjadi margin‐top, margin‐right, margin‐bottom, dan margin‐left.
Penulisan shorthand pada margin terkadang dapat ditulis dalam 4 nilai, 3 nilai, 2 nilai,
atau 1 nilai saja. Perhatikan tabel berikut :
Margin‐ Margin‐ Margin‐ Margin‐
Margin
top right bottom left
10px 5px 20px 15px; 10px 5px 20px 15px
10px 5px 20px 10px 5px 20px 0px
10px 5px 10px 5px 10px 5px
10px 10px 10px 10px 10px
Sedangkan nilai property margin dapat diatur berdasarkan :
‐ Auto, browser mengkalkulasikan otomatis keempat sisi margin
‐ Lenght, diatur dalam px, pt, cm, dll.
‐ %, diatur dalam % dari lebar elemen
3. Padding
Property padding digunakan untuk memberikan ruang di dalam border di sekeliling atas,
kanan, bawah dan kiri isi/elemen. Seperti halnya margin, property padding dapat ditulis
langsung dengan cara disingkat (Shorthand) untuk keempat sisi tersebut, atau bisa satu
per satu (Individual Sides) yang dibagi menjadi margin‐top, margin‐right, margin‐bottom,
dan margin‐left.
Penulisan nilai pada padding sama seperti dengan margin, dapat dituliskan langsung 4
nilai, 3 nilai, 2 nilai, atau hanya 1 nilai saja. Serta pengertian untuk masing‐masing sisi juga
sama halnya seperti margin.
4. Float dan Clear
Property float digunakan untuk mengatur element agar melayang atau tidak. Secara
default, tanpa property float jika setiap element baru dibuat maka akan diletakkan ke
bawah dari element sebelumnya. Oleh karena itu, dengan property float, 2 atau lebih
element dapat diletakkan sejajar. Nilai dari float berupa left , right, atau none (default).
Sedangkan property clear digunakan untuk mengendalikan element yang melayang oleh
float. Setelah sebuah elemen menggunakan property float, maka ruang disekitar element
tersebut dapat diisi oleh elmeent selanjutnya, jika tidak ingin demikian atau untuk
membersihkan area melayang, dapat menggunakan property clear.
Display
Display merupakan property CSS yang paling penting untuk mengendalikan layout. Property
display menentukan bagaimana element‐element dalam layout akan ditampilkan.
1. Block‐Level Elements
Merupakan elemen yang selalu dimulai pada baris baru, dan menambahkan baris baru
pada akhir elemen. Hal ini menyebabkan elemen yang bersifat block akan selalu berada
pada baris barunya sendiri ketika dituliskan. Contoh element‐element ini adalah :
‐ <div>
‐ <h1> - <h6>
‐ <p>
‐ <form>
‐ <header>
‐ <footer>
‐ <section>
2. Inline Elements
Merupakan elemen yang tidak membuat baris baru ketika dibuat. Elemen ini akan
mengikuti alur dokumen sebagaimana mestinya, dan memiliki ukuran tinggi yang
ditentukan serta ukuran lebar yang sesuai dengan isi elemen. Contoh elemen‐elemen ini
adalah :
‐ <span>
‐ <a>
‐ <img>
ALAT DAN BAHAN
1. PC (Personal Computer)
2. Web Browser
3. Notepad++
LANGKAH PRAKTIKUM
1. Praktikum Border
‐ Buka Notepad++
‐ Tuliskan syntaks berikut pada halaman yang kosong :
<html>
<head>
<style>
[Link] {border-style: dotted;}
[Link] {border-style: dashed;}
[Link] {border-style: solid;}
[Link] {border-style: double;}
[Link] {border-style: groove;}
[Link] {border-style: ridge;}
[Link] {border-style: inset;}
[Link] {border-style: outset;}
[Link] {border-style: none;}
</style>
</head>
<body>
<h2>Macam-macam style border</h2>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
</body>
</html>
‐ Simpan file sebagai “[Link]”.
‐ Hasilnya :
2. Praktikum Margin
‐ Buka Notepad++
‐ Tuliskan syntaks berikut pada halaman kosong :
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 40px 50px 60px 30px;
background-color: lightblue;
}
</style>
</head>
<body>
<div>Elemen ini memiliki margin atas 40px, kanan 50px,
bawah 60px, dan kiri 30px.</div>
</body>
</html>
‐ Simpan file sebagai “[Link]”.
‐ Hasilnya :
3. Praktikum Padding
‐ Buka Notepad++
‐ Tuliskan syntaks berikut pada halaman kososng :
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 40px;
background-color: lightblue;
}
</style>
</head>
<body>
<div>Elemen ini memiliki padding atas, kanan, bawah, dan
kiri 40px.</div>
</body>
</html>
‐ Simpan file sebagai “[Link]”.
‐ Hasilnya :
4. Praktikum Float
‐ Buka Notepad++
‐ Tuliskan syntaks berikut pada halaman kosong :
<html>
<head>
<style>
div{
border:1px solid black; margin:5px; height:50px; width:100px;
background:lightblue}
.kiri { height:50px;
width:100px;
float:left;
background: lightblue;
}
.kanan {
height:50px;
width:100px;
float:right;
background: lightblue;
}
</style>
</head>
<body>
<div>Elemen tanpa float.</div>
<div class="kiri">Elemen dengan float kiri.</div>
<div class="kanan">Elemen dengan float kanan.</div>
</body>
‐ Simpan file sebagai “[Link]”.
‐ Hasilnya :
5. Praktikum Display
‐ Buka Notepad++
‐ Tuliskan syntaks berikut pada halaman kosong :
<html>
<head>
<style>
div{
border:1px solid;
margin:0 auto;
height:100px;
width:500px;
background:skyblue;}
span{
display:block;
background:red;}
</style>
</head>
<body>
<div>
Ini adalah elemen pertama menggunakan DIV <div>
Ini DIV di dalam DIV namun membuat elemen blok baru
<span>Ini SPAN di dalam DIV tidak membuat elemen blok
baru</span>
</div>
</div>
</body>
</html>
‐ Simpan file sebagai “[Link]”.
‐ Hasilnya :
LATIHAN
Buatlah tampilan layout menggunakan HTML dan CSS sehingga tampilannya seperti berikut :
Teks, Font, Color, Background
LANDASAN TEORI
Teks
CSS menyediakan beberapa atribut dalam mengatur tulisan atau teks, diantaranya :
1. Color, digunakan untuk mengatur warna teks. Nilai atribut dapat dituliskan berdasarkan
nama warna, hexadecimal, atau nilai RGB.
2. Text‐align, digunakan untuk mengatur perataan teks secara horizontal. Nilai atribut ini
adalah left (rata kiri), center (rata tengah), right (rata kanan) dan justify (rata kanan‐kiri).
3. Text‐decoration, digunakan untuk mengatur dan menghilangkan decorasi pada teks. Nilai
yang dapat diinputkan adalah none (menghilangkan garis bawah pada hyperlink), overline
(garis di atas teks), line‐through (garis di tengah teks), dan underline (garis bawah).
4. Text‐transform, digunakan untuk mengatur besar kecilnya teks. Nilai yang dapat
diinputkan adalah uppercase (huruf kapital), lowercase (huruf kecil), dan capitalize (huruf
besar di awal kata)
5. Text‐indent, digunakan untuk memberi jarak ruang indent pada baris pertama teks.
Biasa digunakan pada paragraf baru.
6. Letter‐spacing, digunakan untuk mengatur jarak antar karakter dalam teks.
7. Line‐height, digunakan untuk mengatur jarak antar baris teks.
8. Direction, digunakan untuk mengatur arah teks dari sebuah elemen.
9. Word‐spacing, digunakan untuk mengatur jarak antar kata dalam teks.
10. Text‐shadow, digunakan untuk memberi bayangan pada teks.
Font
Beberapa atribut yang dapat digunakan dalam pengaturan font antara lain :
1. Font‐family, digunakan untuk mengatur bentuk font dan mencari jenis font yang nampak
sama jika font yang diinginkan tidak didukung oleh browser. Nilai pada atrbut font‐family
haruslah terdiri dari beberapa nama font sebagai “fallback”, jika browser tidak
mendukung font pertama maka akan mencoba font berikutnya, dan seterusnya.
2. Font‐style, biasa digunakan untuk membuat teks miring (italic). Nilai yang dapat dipakai
adalah normal, italic, dan oblique.
3. Font‐size, digunakan untuk mengatur ukuran teks. Nilai yang diinputkan berupa angka
dengan satuan px, em, dan %.
4. Font‐weight, digunakan untuk mengatur ketebalan teks. Nilai yang dipakai berupa
normal, lighter (lebih tipis), atau bold (tebal).
5. Font‐variant, digunakan untuk mengatur apakah teks akan ditampilkan dalam ukuran
kapital‐kecil, maksudnya adalah jika nilainya adalah small‐caps maka semua huruf akan
diubah ke huruf besar, namun dengan ukuran yang lebih kecil layaknya huruf kecil.
Warna
CSS dalam pemilihan warna seringkali menggunakan 3 jenis nilai berikut :
1. Nawa Warna, yaitu dengan menyebutkan nama warna dalam bahasa inggris, misal “red”,
“blue”, “green”. Penulisan nama warna adalah tidak case‐sensitive yaitu besar kecilnya
huruf tidak berpengaruh, dimana “red” sama dengan “Red” sama dengan “RED”. HTML
dan CSS mendukung 140 nama warna standar. Beberapa coontoh diantaranya :
: red
: green
: blue
: orange
: yellow
: cyan
: black
2. RGB (Red, Green, Blue), yaitu dengan menggunakan kombinasi parameter intensitas
antara warna merah, hijau, dan biru. Masing masing warna memiliki intensitas nilai antara
0‐255. Contoh penulisan untuk nilai ini adalah RGB(red,green,blue), misal “rgb(255,0,0)”
untuk warna merah.
: rgb(255,0,0)
: rgb(0,255,0)
: rgb(0,0,255)
: rgb(255,165,0)
: rgb(255,255,0)
: rgb(0,255,255)
: rgb(0,0,0)
3. Hexadecimal, yaitu dengan menggunakan kombinasi warna red, green, blue dalam bentuk
bilangan heksadesimal antara 00 dan FF (sama halnya 0 – 255), dengan format : #RRGGBB.
Misal #FF0000 untuk warna merah.
: #FF0000
: #00FF00
: #0000FF
: #FFA500
: #FFFF00
: #00FFFF
: #000000
Background
Digunakan untuk memberikan efek untuk latar belakang sebuah elemen.
1. Background‐color, untuk memberikan warna latar belakang.
2. Background‐image, untuk memebrikan latar belakang berupa gambar.
3. Background‐repeat, untuk mengatur penggandaan gambar jika container lebih besar
dari gambar.
4. Background‐attachment, untuk mengatur letak dimana gambar akan fixed (tidak ikut
scroll halaman).
5. Background‐position, untuk menentukan letak/posisi gambar sesuai yang diinginkan.
ALAT DAN BAHAN
1. PC (Personal Computer)
2. Web Browser
3. Notepad++
LANGKAH PRAKTIKUM
1. Praktikum Teks dan Font
‐ Buka Notepad++.
‐ Tuliskan syntaks berikut ada halaman yang kosong :
<html>
<head>
<style>
body{ background-
image:url("[Link]");
background-position:right top;
background-repeat:no-repeat
}
h1{ text-shadow:5px 2px red}
p{ text-indent:30px; color:red; text-
align:justify} i{letter-spacing:-1px}
ul{line-
height:0.8;} a{
font-size:12px;
font-weight:bold;
font-family:Arial, Times New
Roman; text-decoration:none; text-
transform:lowercase
}
</style>
</head>
<body>
<h1>CSS</h1>
<p>
CSS <i>(Cascading Style Sheets) </i>merupakan cara untuk
memisahkan isi dengan layout dalam halaman-halaman web.
CSS memperkenalkan template berupa style untuk membuat
dan mempermudah penulisan dari halaman-halaman yang
dirancang. CSS dapat menciptakan halaman yang tampak
sama dengan resolusi layar dari pengunjung yang berbeda
tanpa memerlukan suatu [Link] web akan lebih
mudah melakukan setting tampilan keseluruhan web hanya
dengan menggantikan atribut-atribut atau perintah dalam
style CSS dengan atribut yang diinginkan tanpa harus
mengubah satu per satu atribut tiap elemen yang ada
dalam situs.</p>
Referensi :
<ul>
<li><a href="">[Link]</a></li>
<li><a href="">[Link]</a></li>
</ol>
</body>
</html>
‐ Simpan file sebagai “[Link]”.
‐ Hasilnya :
Buatlah sebuah elemen header sederhana seperti pada gambar di bawah dengan ketentuan
berikut :
‐ Gunakan gambar sebagai background tanpa penggandaan.
‐ Nama judul terdapat bayangan dengan warna sesuai gambar.
‐ Judul terletak di sisi kanan atas, sedangkan deskripsi di sisi kiri bawah.
‐ Jarak antar kata pada deskripsi lebih jauh.
Layer dan Hyperlink
LANDASAN TEORI
Position
Property ini dapat digunakan untuk mengatur posisi sebuah elemen. Elemen‐elemen
diposisikan menggunakan nilai top, bottom, left, dan right, namun harus mengatur nilai untuk
posisi elemen tersebut. Beberapa nilai untuk mengatur property position :
1. Static, elemen diposisikan statis atau default. Posisi static tidak dipengaruhi oleh
property top, bottom, left, dan right.
2. Relative, elemen diposisikan relatif ke posisi normal (default). Memiliki sifat yang sama
dengan position:static yang mengalir, akan tetapi perbedaannya position:relative ini bisa
mengatur posisinya dengan bantuan property top, left, right, bottom.
3. Absolute, jenis posisi yang fungsinya paling powerful. Berbeda dengan position:static dan
position:relative yang terus mengalir, position:absolute ini cenderung tidak mengisi
ruangan seperti 2 position lainnya, dan diam ditempat jika beberapa tag dengan
position:absolute ini berbarengan.
Position:absolute ini dibarengi dengan property 4 arah (top, left, right, bottom). Akan
tetapi bedanya kalau di position relative titik 0px‐nya adalah item itu sendiri, sedangkan
di position:absolute ini titik 0px‐nya adalah layer yang bersifat container yang ada di
parentnya, atau kalau tidak ada layer container sama sekali, maka pojokkan browser
sendiri lah yang menjadi titik 0px‐nya.
4. Fixed, Memposisikan elemen secara permanen di suatu titik yang tetap diam sekalipun
ngescroll halaman sampe manapun.
Z‐index
Property ini digunakan untuk mengatur tumpukan (layer) elemen, semakin besar nilai z‐ index
maka akan ditempatkan paling depan. Z‐index dapat digabungkan dengan property posisition
dengan nilai relative, absolute, dan fixed.
Hyperlink
CSS menyediakan property untuk mengatur hyperlink dengan bermacam cara diantaranya :
1. Link Style, digunakan untuk mengatur state hyperlink, terdiri dari :
‐ A:link – state normal, link belum dikunjungi.
‐ A:visited – link sudah dikunjungi user.
‐ A:hover – state saat user melewatkan pointer di atas link.
‐ A:active – state saat link diklik oleh user.
2. Text‐decoration, seringkali digunakan untuk menghilangkan garis bawah pada link.
3. Background‐color, digunakan untuk memebrikan barna latar pada link.
4. Link button, dengan mengkombinasikan beberapa property CSS, dapat membuat
tombol untuk link sesuai keinginan.
ALAT DAN BAHAN
1. PC (Personal Computer)
2. Web Browser
3. Notepad++
LANGKAH PRAKTIKUM
1. Praktikum Poition
‐ Buka Notepad++.
‐ Tuliskan syntaks berikut pada halaman yang kosong :
<html>
<head>
<style>
.static{
left:100px;
position:static;
width:300;
height:1000;
background:red
}
.relative{
left:100px;
position:relative;
width:400;
height:200;
background:blue
}
.absolute{
left:350px;
top:150px;
position:absolute;
width:300;
height:100;
background:lightgreen
}
.fixed{
left:300px;
top:50px;
position:fixed;
width:200px;
height:100px;
background:lightblue
}
</style>
</head>
<body>
<div class="static">Ini elemen Position:static.<br>Nilai
left:100px tidak berpengaruh</div>
<div class="relative">Ini elemen
Position:relative<br>Nilai left:100px berpengaruh, tetap
mengikuti alur</div>
<div class="absolute">Ini elemen
Position:absolute<br>Bisa diletakkan dimana saja</div>
<div class="fixed">Ini elemen Position:fixed<br>Posisi
tetap walau discroll</div>
</body>
</html>
‐ Simpan file sebagai “[Link]”.
‐ Hasilnya :
2. Praktikum Z‐index
‐ Buka Notepad++.
‐ Tuliskan syntaks berikut pada halaman yang kosong :
<html>
<head>
<style>
.satu{
position:absolute;
margin:0 20px;
height:200px;
width:400;
background:red; z-
index:1
}
.dua{
position:absolute;
margin:100px 0;
height:150px;
width:300;
background:lightblue;
z-index:2
}
.tiga{
position:absolute;
margin:20px 150px;
height:200px;
width:200;
background:yellow;
z-index:3
}
</style>
</head>
<body>
<div class="satu">Layer 1</div>
<div class="dua">Layer 2</div>
<div class="tiga">Layer 3</div>
</body>
</html>
‐ Simpan file sebagai “z‐[Link]”.
‐ Hasilnya :
3. Praktikum Hyperlink
‐ Buka Notepad++.
‐ Tuliskan syntaks berikut pada halaman yang kosong :
<html>
<head>
<style>
a:link, a:visited {
background-color: blue;
color: white; padding:
14px 25px; text-align:
center; text-
decoration: none;
display: inline-block;
}
a:hover, a:active { background-color: skyblue;
} </style>
</head>
<body>
<a href="[Link]
</body>
</html>
‐ Simpan file sebagai “[Link]”.
‐ Hasilnya :
LATIHAN
Buatlah sebuah tampilan navigasi (menu) yang terdiri dari tombol‐tombol yang terbuat dari
tag list di sisi kiri, dan tombol‐tombol icon social media di sisi kanan, sehingga tampak pada
gambar berikut :