1

DAFTAR ISI
DAFTAR ISI.................................................................................................................................. 2
PERTEMUAN II – CSS ............................................................................................................... 3
A. Pengertian ............................................................................................................................... 3
B. Struktur ................................................................................................................................... 3
1. Penulisan CSS ............................................................................................................................... 3
2. Selectors ........................................................................................................................................ 4
3. Comment ....................................................................................................................................... 5
C. Penempatan CSS..................................................................................................................... 5
D. Properties Dasar CSS ............................................................................................................. 6
1. Color ............................................................................................................................................. 6
2. Background ................................................................................................................................... 7
3. Border ........................................................................................................................................... 8
4. Margin ........................................................................................................................................... 9
5. Padding ....................................................................................................................................... 10
6. Height / Witdh............................................................................................................................. 10
7. Text ............................................................................................................................................. 10
8. Font ............................................................................................................................................. 11
E. Project Praktikum ................................................................................................................. 11

2
PERTEMUAN II – CSS
Pratikan akan mempelajari tentang dasar – dasar CSS. Kemudian dilanjutkan dengan membuat
halaman Web menggunakan CSS. Tujuan setelah mempelajari Bab ini adalah :

1. Mampu memahami struktur dasar CSS.

2. Mampu memahami dasar – dasar CSS.
3. Dapat menghubungkan antara HTML dengan CSS.

A. Pengertian

CSS adalah kepanjangan dari Cascading Style Sheets, yang berfungsi untuk mengontrol
tampilan dari sebuah halaman website. Dengan menggunakan CSS, cukup satu kode untuk
semua mark up yang sama pada tag HTML.

B. Struktur
1. Penulisan CSS
Penulisan dari CSS berbeda dengan HTML. Apabila HTML menggunakan tag dan
attribute, maka CSS menggunakan selector, dimana selector memiliki declarations.
Declarations memiliki properties value. Penulisan CSS ini ada yang diselipkan di dalam
dokumen HTML ada juga yang berupa file tersendiri yang dapat diakses oleh HTML. Secara
garis besar anatomi dari aturan CSS adalah sebagai berikut:

3
2. Selectors
CSS Selector digunakan untuk menemukan atau memilih nama element, id, class,
attribute dan lainnya di dalam halaman HTML.

a. Element / Tag
Memilih element atau tag sesuai dengan nama tag yang ada pada halaman HTML.

p {
color: blue;
text-align: center;
}

b. ID
Menggunkan atribut id pada tag HTML untuk pemanggilannya. Biasanya
digunakan untuk tag / element yang memiliki style sendiri. Untuk penulisannya
menggunakan tanda pagar (#) kemudian nama idnya. Penerapannya pada HTML
tag / element menggunakan attribut id=”nama_selector_id”.

#coba1 {
text-align: center;
color: blue;
}

c. Class
Memilih element dengan atribut class yang spesifik. Untuk memilih element atau
tag yang spesifik, dengan menulis nama element kemudian diikuti dengan tanda
titik(.) dan dilanjutkan dengan nama class yang dideklarasikan.
Bentuk Class Umum :
.kelas {
text-align: center;
color: blue;
}

Bentuk Class Spesifik untuk element / tag :

p.center {
text-align: center;
color: blue;
}

4
 d. Grouping
Penggabungan beberapa element / tag, yang memiliki property dan value yang sama
sehingga meringkas penulisan syntax, untuk melakukan grouping hal yang harus
diperhatikan adalah tanda “,” pada selector sebagai pemisah tag – tag / element.
Bentuk sebelum Grouping :

h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p {
text-align: center;
color: blue;
}

Bentuk sesudah Grouping :

h1, h2, p {
text-align: center;
color: blue;
}

3. Comment
Comment digunakan untuk mendeskripsikan syntax yang ada pada css, dan akan
diabaikan oleb browser. Penerapannya menggunakan /*.....*/, ini berlaku untuk satu baris
maupun lebih.
P {
color: blue;
/* This is a single-line comment */
text-align: center;
}

C. Penempatan CSS
1. External Style Sheet
Penempatan css pada satu file css, file css tersebut dibuat dengan ekstensi .css yang
kemudian dipanggil menggunakan element link pada HTML.
<head>
<link rel="stylesheet" type="text/css" href="cobastyle.css">
</head>

5
 2. Internal Style Sheet
Penempatan css berada didalam file HTML. Untuk mendeklarasikan css ini kita
menggunakan tag <style>. Biasanya digunakan jika file HTML itu memiliki style tersendiri
dan berbeda dengan style css halaman HTML yang lain.
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

3. Inline Style
Penempatan style sheet langsung pada tag – tag HTML. Untuk mendeklarasikan css ini
kita menggunakan atribut style pada tag HTML. Biasanya digunakan jika kita ingin
membuat style sendiri untuk satu tag di dalam HTML.

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

D. Properties Dasar CSS

1. Color
Terdapat 3 cara untuk pewarnaan style dalam CSS, yaitu Valid Color Name, RGB dan
Hexadecimal Value.
Contoh Valid Color Name :

Hasil :

6
 Contoh RGB :

Hasil :

Contoh Hexadecimal :

Hasil :

2. Background
Digunakan untuk mengatur style background suatu tag / element.
Terdiri dari beberapa properties diantaranya :
a. backgroud-color
b. backgroud-image
c. backgroud-repeat
d. backgroud-attachment
e. backgroud-position

7
 Syntax CSS Background :

body {
background-color: lightblue;
background-image: url("...");
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
/* ----------------------- */
background:#ffffff url("...") no-repeat right top;
}

3. Border
Border style digunakan untuk membuat tampilan border pada tag HTML.
Contoh Border Style :

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<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>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>

8
 Hasil :

4. Margin
Margin digunakan untuk mengatur jarak antara element pada HTML. Untuk valuenya dapat
menggunakan auto, px, % dan lainnya.
- Auto digunakan untuk mengatur secara otomatis.
- Px untuk mengatur ukuran sesuai dengan kemauan sendiri.
- % mengatur jarak menggunakan persern misal 30 %.

Contoh margin :

9
5. Padding
Digunakan untuk mengatur space element content dan element border pada HTML,
maksudnya adalah mengatur jarak suatu element yang terdapat didalam element kepala.
Untuk valuenya dapat menggunkan auto, px, % dan lainnya.
- Auto digunakan untuk mengatur secara otomatis.
- Px untuk mengatur ukuran sesuai dengan kemauan sendiri.
- % mengatur jarak menggunakan persern misal 30 %.

Contoh Padding :

6. Height / Witdh
Height untuk mengatur tingi suatu style, sedangkan Witdh digunakan untuk mengatur lebar
suatu style, biasa digunakan pada tag layout <div> untuk mengatur ukuran.
Contoh Height / Witdh :

7. Text
Pada CSS Text kita dapat mengatur style mulai dari warna text, aligment, case text, indent
text, jarak kata, arah text, jarak antar line, jarak antar huruf dan underline.
Contoh CSS Text :

p {
color: green;
text-align: center;
text-align: left;
text-align: right;
text-align: justify;
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
text-indent: 50px;
word-spacing: -5px;
direction: rtl;
line-height: 1.8;
letter-spacing: 3px;
text-indent: 50px;
text-decoration: underline;

10
 text-decoration: line-through;
text-decoration: overline;
text-decoration: none;
}

8. Font
Mendefinisikan font family, ketebalan, ukuran dan style dari sebuah text pada tag HTML.
Contoh CSS Font :

p {
/*font face*/
font-family: "Times New Roman", Times, serif;
/*font style*/
font-style: normal;
font-style: italic;
font-style: oblique;
/*font sizing*/
font-size: 40px;
font-size: 2.5em; /* 40px/16=2.5em */
font-size: 100%;
/*bold*/
font-weight: normal;
font-weight: bold;
}

E. Project Praktikum
1. Buat folder baru di dalam Folder Project yang telah dibuat.

11
2. Buat File baru dengan nama style.css, dan letakkan dalam folder css yang telah dibuat.

12
3. Ubah isi dari file index.html
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Pratikum Web 2019</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="header">
<h2>PERPUSTAKAAN MALANG JAWA TIMUR</h2>
</div>

<div class="nav">
<p>Jadwal Buka : Senin - Kamis (08.00 - 16.00) &Jum'at -
Sabtu (08.00 - 13.00)</p>
</div>

<div class="samping">
<ul>
<br><br><br>
<a href="index.html">HOME</a>
<br><br><br>
<a href="about.html">ABOUT</a>
<br><br><br>
<a href="login.html">LOGIN</a>
</ul>
</div>

<div class="isi">
<center>
<p>Selamat Datang di Perpustakaan Kami.</p>
<p>Buku adalah jembatan ilmu untuk anda - anda
sekalian calon inventor dunia.</p>
</center>
</div>

<div class="footer">
<h4>&copy; Lab. Pemrograman & Rekayasa Perangkat Lunak
2019</h4>
</div>

</body>
</html>

13
 Hasil :

4. Ubah isi dari file about.html

Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Pratikum Web 2019</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="header">
<h2>PERPUSTAKAAN MALANG JAWA TIMUR</h2>
</div>

<div class="nav">
<p>Jadwal Buka : Senin - Kamis (08.00 - 16.00) &Jum'at -
Sabtu (08.00 - 13.00)</p>
</div>

<div class="samping">
<ul>
<br><br><br>
<a href="index.html">HOME</a>
<br><br><br>
<a href="about.html">ABOUT</a>
<br><br><br>
<a href="login.html">LOGIN</a>
</ul>
</div>

<div class="isi">
<center>
<p>Perpustakaan ini terletak di kawasan Malang</p>

14
 <p>Berbagai macam buku dapat di temukan disini, mulai
buku tentang Sains, Teknologi, Sejarah, Dongeng dan Sebagainya.</p>
<p>Perpustakaan yang didirikan pada tahun 1995 dan
dibuat dengan tujuan untuk membantu orang - orang supaya dapat membaca
buku yang mereka inginkan tanpa dipungut biaya.</p>
</center>
</div>

<div class="footer">
<h4>&copy; Lab. Pemrograman & Rekayasa Perangkat Lunak
2019</h4>
</div>
</body>
</html>

Hasil :

5. Ubah isi dari file login.html

Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Pratikum Web 2019</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
input
{
width: 100%;
}
</style>
</head>
<body>
<div class="header">
<h2>PERPUSTAKAAN MALANG JAWA TIMUR</h2>

15
 </div>

<div class="nav">
<p>Jadwal Buka : Senin - Kamis (08.00 - 16.00) &Jum'at -
Sabtu (08.00 - 13.00)</p>
</div>

<div class="samping">
<ul>
<br><br><br>
<a href="index.html">HOME</a>
<br><br><br>
<a href="about.html">ABOUT</a>
<br><br><br>
<a href="login.html">LOGIN</a>
</ul>
</div>

<div class="isi">
<br>
<center>
<h2>ADMIN LOGIN AREA</h2>
<br><br>
<form action="#">
<table>
<tr>
<td><input type="text"
name="username" placeholder="Username" required></td>
</tr>
<tr>
<td><input type="password"
name="password" placeholder="Password" required></td>
</tr>
<tr>
<td><input type="submit"
name="login" value="LOGIN"></td>
</tr>

</table>
</form>
</center>
</div>

<div class="footer">
<h4>&copy; Lab. Pemrograman & Rekayasa Perangkat Lunak
2019</h4>
</div>

</body>
</html>

16
 Hasil :

6. Buat file baru dengan nama admin.html

Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Pratikum Web 2019</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="header">
<h2>PERPUSTAKAAN MALANG JAWA TIMUR</h2>
</div>

<div class="nav">
<p>Jadwal Buka : Senin - Kamis (08.00 - 16.00) &Jum'at -
Sabtu (08.00 - 13.00)</p>
</div>

<div class="samping">
<ul>
<br><br><br>
<a href="admin.html">HOME</a>
<br><br><br>
<a href="anggota/anggota.html">ANGGOTA</a>
<br><br><br>
<a href="buku/buku.html">BUKU</a>
<br><br><br>
<a href="transaksi/transaksi.html">TRANSAKSI</a>
<br><br><br>
<a href="../logout.php">LOGOUT</a>
</ul>
</div>

17
 <div class="isi">
<center>
<h2>Selamat Datang di Halaman Admin</h2>
</center>
</div>

<div class="footer">
<h4>&copy; Lab. Pemrograman & Rekayasa Perangkat Lunak
2019</h4>
</div>

</body>
</html>

Hasil :

7. Buat file baru dengan nama anggota.html, dan di masukkan ke dalam folder anggota.
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Pratikum Web 2019</title>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<div class="header">
<h2>PERPUSTAKAAN MALANG JAWA TIMUR</h2>
</div>

<div class="nav">
<p>Jadwal Buka : Senin - Kamis (08.00 - 16.00) &Jum'at -
Sabtu (08.00 - 13.00)</p>
</div>

<div class="samping">

18
 <ul>
<br><br><br>
<a href="../admin.html">HOME</a>
<br><br><br>
<a href="anggota-entry.html">TAMBAH</a>
</ul>
</div>

<div class="isi">
<center>
<h3>Daftar Anggota</h3>
<table border="1">
<tr>
<th width="5%">ID</th>
<th>Nama</th>
<th>Alamat</th>
<th width="10%" colspan="2">Action</th>
</tr>
<!-- Awal Record -->
<tr>
<td>1</td>
<td>Dimas Fajar Ramadhan</td>
<td>Malang</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<!-- Akhir Record -->
</table>
</center>
</div>

<div class="footer">
<h4>&copy; Lab. Pemrograman & Rekayasa Perangkat Lunak
2019</h4>
</div>

</body>
</html>

19
 Hasil :

8. Buat file baru dengan nama anggota-entry.html, dan di masukkan ke dalam folder anggota.
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Pratikum Web 2019</title>
<link rel="stylesheet" type="text/css" href="../css/style.css">
<style type="text/css">
input
{
width: 100%;
}
</style>
</head>
<body>
<div class="header">
<h2>PERPUSTAKAAN MALANG JAWA TIMUR</h2>
</div>

<div class="nav">
<p>Jadwal Buka : Senin - Kamis (08.00 - 16.00) &Jum'at -
Sabtu (08.00 - 13.00)</p>
</div>

<div class="samping">
<ul>
<br><br><br>
<a href="../admin.html">HOME</a>
<br><br><br>
<a href="anggota.html">KEMBALI</a>
</ul>
</div>

20
 <div class="isi">
<center>
<h3>Tambah Anggota</h3>
<form action="#">
<table>
<tr>
<td>ID Member</td>
<td>:</td>
<td><input type="text" name="id"></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type="text" name="nama"></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><input type="text"
name="alamat"></td>
</tr>
<tr>
<td>No. Kontak</td>
<td>:</td>
<td><input type="number"
name="kontak"></td>
</tr>
<tr>
<td></td><td></td>
<td><input type="submit" name="tambah"
value="TAMBAH"></td>
</tr>
</table>
</form>
</center>
</div>

<div class="footer">
<h4>&copy; Lab. Pemrograman & Rekayasa Perangkat Lunak
2019</h4>
</div>

</body>
</html>

21
 Hasil :

9. Buat file baru dengan nama buku.html, dan di masukkan ke dalam folder buku.
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Pratikum Web 2019</title>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<div class="header">
<h2>PERPUSTAKAAN MALANG JAWA TIMUR</h2>
</div>

<div class="nav">
<p>Jadwal Buka : Senin - Kamis (08.00 - 16.00) &Jum'at -
Sabtu (08.00 - 13.00)</p>
</div>

<div class="samping">
<ul>
<br><br><br>
<a href="../admin.html">HOME</a>
<br><br><br>
<a href="buku-entry.html">TAMBAH</a>
</ul>
</div>

<div class="isi">
<center>
<h3>Daftar Buku</h3>
<table border="1">
<tr>
<th width="5%">ID</th>
<th>JUDUL</th>

22
 <th>PENULIS</th>
<th>TAHUN</th>
<th>PENERBIT</th>
<th width="10%" colspan="2">Action</th>
</tr>
<!-- Awal Record -->
<tr>
<td>1</td>
<td>Worl End</td>
<td>Yuu Kamiya</td>
<td>2012</td>
<td>Yen Press</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<!-- Akhir Record -->
</table>
</center>
</div>

<div class="footer">
<h4>&copy; Lab. Pemrograman & Rekayasa Perangkat Lunak
2019</h4>
</div>

</body>
</html>

Hasil :

23
10. Buat file baru dengan nama buku-entry.html, dan di masukkan ke dalam folder buku.
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Pratikum Web 2019</title>
<link rel="stylesheet" type="text/css" href="../css/style.css">
<style type="text/css">
input
{
width: 100%;
}
</style>
</head>
<body>
<div class="header">
<h2>PERPUSTAKAAN MALANG JAWA TIMUR</h2>
</div>

<div class="nav">
<p>Jadwal Buka : Senin - Kamis (08.00 - 16.00) &Jum'at -
Sabtu (08.00 - 13.00)</p>
</div>

<div class="samping">
<ul>
<br><br><br>
<a href="../admin.html">HOME</a>
<br><br><br>
<a href="buku.html">KEMBALI</a>
</ul>
</div>

<div class="isi">
<center>
<h3>Tambah Buku</h3>
<form action="#">
<table>
<tr>
<td>ID Buku</td>
<td>:</td>
<td><input type="text" name="id"></td>
</tr>
<tr>
<td>Judul</td>
<td>:</td>
<td><input type="text" name="judul"></td>
</tr>
<tr>
<td>Penulis</td>
<td>:</td>
<td><input type="text"
name="penulis"></td>
</tr>
<tr>

24
 <td>Tahun Terbit</td>
<td>:</td>
<td><input type="number"
name="tahun"></td>
</tr>
<tr>
<td>Penerbit</td>
<td>:</td>
<td><input type="text"
name="penerbit"></td>
</tr>
<tr>
<td></td><td></td>
<td><input type="submit" name="tambah"
value="TAMBAH"></td>
</tr>
</table>
</form>
</center>
</div>

<div class="footer">
<h4>&copy; Lab. Pemrograman & Rekayasa Perangkat Lunak
2019</h4>
</div>

</body>
</html>

Hasil :

25
11. Buat file baru dengan nama transaksi.html, dan di masukkan ke dalam folder transaksi.
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Pratikum Web 2019</title>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<div class="header">
<h2>PERPUSTAKAAN MALANG JAWA TIMUR</h2>
</div>

<div class="nav">
<p>Jadwal Buka : Senin - Kamis (08.00 - 16.00) &Jum'at -
Sabtu (08.00 - 13.00)</p>
</div>

<div class="samping">
<ul>
<br><br><br>
<a href="../admin.html">HOME</a>
<br><br><br>
<a href="transaksi-entry.html">TAMBAH</a>
</ul>
</div>

<div class="isi">
<center>
<center>
<h3>DAFTAR PEMINJAMAN & PENGEMBALIAN</h3>
<table border="1">
<tr>
<th width="5%">NO</th>
<th>PEMINJAM</th>
<th>BUKU</th>
<th>TANGGAL PINJAM</th>
<th>TANGGAL KEMBALI</th>
<th>STATUS</th>
<th width="10%" colspan="2">Action</th>
</tr>
<!-- Awal Record -->
<tr>
<td>1</td>
<td>Dimas Fajar Ramadhan</td>
<td>Worl End</td>
<td>01/03/2019</td>
<td>08/03/2019</td>
<td>Dipinjam</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<!-- Akhir Record -->
</table>
</center>

26
 </center>
</div>

<div class="footer">
<h4>&copy; Lab. Pemrograman & Rekayasa Perangkat Lunak
2019</h4>
</div>

</body>
</html>

Hasil :

12. Buat file baru dengan nama transaksi-entry.html, dan di masukkan ke dalam folder
transaksi.
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Pratikum Web 2019</title>
<link rel="stylesheet" type="text/css" href="../css/style.css">
<style type="text/css">
input
{
width: 100%;
}
</style>
</head>
<body>
<div class="header">
<h2>PERPUSTAKAAN MALANG JAWA TIMUR</h2>
</div>

<div class="nav">

27
 <p>Jadwal Buka : Senin - Kamis (08.00 - 16.00) &Jum'at -
Sabtu (08.00 - 13.00)</p>
</div>

<div class="samping">
<ul>
<br><br><br>
<a href="../admin.html">HOME</a>
<br><br><br>
<a href="transaksi.html">KEMBALI</a>
</ul>
</div>

<div class="isi">
<center>
<h3>Tambah Transaksi Peminjaman</h3>
<form action="#">
<table>
<tr>
<td>Nama Peminjam</td>
<td>:</td>
<td><input type="text"
name="peminjam"></td>
</tr>
<tr>
<td>Buku</td>
<td>:</td>
<td><input type="text" name="buku"></td>
</tr>
<tr>
<td>Tanggal Pinjam</td>
<td>:</td>
<td><input type="text"
name="tgl_pinjam"></td>
</tr>
<tr>
<td>Tanggal Kembali</td>
<td>:</td>
<td><input type="text"
name="tgl_kembali"></td>
</tr>
<tr>
<td>Status</td>
<td>:</td>
<td><input type="text" name="status"
value="Dipinjam" readonly></td>
</tr>
<tr>
<td></td><td></td>
<td><input type="submit" name="tambah"
value="TAMBAH"></td>
</tr>
</table>
</form>
</center>
</div>

28
 <div class="footer">
<h4>&copy; Lab. Pemrograman & Rekayasa Perangkat Lunak
2019</h4>
</div>

</body>
</html>

Hasil :

29