Praktikum CSS 2016-2017

Praktikum Desain & Pemrograman Web
Semester Ganjil Tahun Ajaran 2016-2017

Program Studi Teknik Informatika, Universitas Riau
Dosen Pengampu: Salhazan Nasution, S.Kom, MIT
Cascading Style Sheet (CSS)

Tujuan Praktikum:
1. Memahami konsep penggunaan CSS
2. Mampu memahami sifat pewarisan CSS
3. Mampu membuat class dan id serta mengimplementasikan elemen-elemen dalam style sheet
Petunjuk Praktikum:
1. Ketik script di bawah ini dan simpan masing-masing file dalam format .html dan .css
2. Jalankan script menggunakan browser Mozilla Firefox atau Google Chrome.
Langkah Praktikum:
A. Internal CSS
Simpan dalam sebuah file bernama internal_css.html
<html>
<head>
<title>CSS Sederhana Internal CSS</title>
<style type="text/css">
p {color:blue; font-family:Verdana, Arial, Helvetica, sans-serif}
h1 {color:red; font-family:Georgia, "Times New Roman", Times, serif; fontstyle:italic}
</style>
</head>
<body>
<h1> internal CSS </h1>
ini tulisan biasa
<p> Ini paragraf berwarna biru </p>
<h1> contoh CSS </h1>
</body>
</html>
B. Inline CSS
Simpan dalam sebuah file bernama inline_css.html
<html>
<head>
<title>CSS Sederhana Inline CSS</title>
Prodi Teknik Informatika, Universitas Riau - www.salhazan.com
</head>
<body style="color:blue;">
ini tulisan biasa
<p style="color:red;"> Ini paragraf berwarna merah </p>
ini tulisan biasa juga
</body>
</html>
C. Pewarisan
Simpan dalam sebuah file bernama pewarisan.html
<html>
<head>
<title>Pewarisan dalam CSS</title>
body {font-family:Arial; font-style:italic; color:blue;}
p {font-weight:bold; color:red;}
</style>
</head>
<body>
<h1> Pewarisan dalam CSS </h1>
teks ini akan miring
<p> teks ini juga akan miring karena berada di dalam tag body </p>
</body>
</html>
D. Class dan ID
Simpan dalam sebuah file bernama class_id.html
<html>
<head>
<title>Selector class dan id dalam CSS</title>
.merah {color:red; font-family:Georgia;}
.biru {color:blue; font-family:Arial;}
.blink {text-decoration:blink;}
#miring {font-style:italic;}
#tebal {font-weight:bold;}
</style>
</head>
<body>
<h1 class="merah blink" id="miring"> Tulisan ini akan merah </h1>
<p id="miring"> Ini tulisan miring </p>
<h1 class="biru"> Tulisan ini akan biru </h1>
</body>
</html>
E.
Link
Simpan dalam sebuah file bernama link.html
<html>
<head>
<title>Link dalam CSS</title>
a { /* link sebelum diakses */
color:blue;
text-decoration:none;
}
:hover { /* link saat kursor berada di atasnya */
color:red;
font-size:larger;
text-decoration:underline;
}
:active { /* link saat diklik */
color:yellow;
text-decoration:overline;
}
:visited { /* link yang telah dikunjungi */
font-style:italic;
}
</style>
</head>
<body>
<a href="class_id.html">Selector class dan id dalam HTML</a> <br /><br>
<a href="pewarisan.html">Pewarisan dalam HTML</a> <br />
<p style="font-style:italic"> dekatkan kursor Anda pada link di atas</p>
</body>
</html>
F.
Style CSS
Simpan dalam sebuah file bernama style.css
body {font-family:Verdana, Arial, Helvetica, sans-serif}
p {font-weight:bold;}
b, i, u {text-decoration:blink}
a { /* link sebelum diakses */

color:blue;
text-decoration:none;
}
:hover { /* link saat kursor berada di atasnya */
color:red;
font-size:larger;
text-decoration:underline;
}
:active { /* link saat diklik */
color:yellow;
text-decoration:overline;
}
:visited { /* link yang telah dikunjungi */
font-style:italic;
}
.merah {color:red; font-family:Georgia;}
.biru {color:blue;}
.blink {text-decoration:blink;}
#miring {font-style:italic;}
#tebal {font-weight:bold;}
G. Eksternal CSS
Simpan dalam sebuah file bernama eksternal_css.html
<html>
<head>
<title>Eksternal CSS</title>
</head>
<body>
<link rel="stylesheet" href="style.css" />
<h1 class="merah">Contoh file eksternal CSS</h1>
<p> Satu dari beberapa kehebatan teknologi css ini dan merupakan alasan
banyak orang menyukai penggunaannya adalah memperbolehkan kita untuk mendefinisikan
sebuah <span id="miring" class="biru">style-sheet global</span> yang dapat menerapkan
aturan-aturan css tersebut untuk keseluruhan dokumen-dokumen HTML pada halaman website
anda. </p>
Keuntungannya jelas sekali, jika kita ingin mengubah tampilan <b>situs</b>,
kita tinggal mengedit satu file saja dan hasilnya akan di refleksikan pada keseluruhan
dokumen HTML yang dilink ke <i>file</i> tersebut. <br /><br />
<a href="class_id.html">Selector class dan id dalam HTML</a> <br />
<a href="pewarisan.html">Pewarisan dalam HTML</a> <br />
</body>
</html>

Praktikum CSS 2016-2017

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

Praktikum CSS 2016-2017

Diunggah oleh

Hak Cipta:

Format Tersedia

Praktikum Desain & Pemrograman Web

Semester Ganjil Tahun Ajaran 2016-2017

Cascading Style Sheet (CSS)

Prodi Teknik Informatika, Universitas Riau - www.salhazan.com

a { /* link sebelum diakses */

Prodi Teknik Informatika, Universitas Riau - www.salhazan.com

Prodi Teknik Informatika, Universitas Riau - www.salhazan.com

Anda mungkin juga menyukai