Dokumen ini membahas dasar teori Cascading Style Sheet (CSS) yang digunakan untuk mengatur tampilan halaman web, termasuk tiga cara penerapannya: external, internal, dan inline style sheet. CSS memungkinkan pembuatan format yang berbeda untuk halaman yang sama dan diakui sebagai teknologi internet oleh W3C sejak 1996. Selain itu, juga terdapat tugas praktis untuk menerapkan CSS dalam format dan konten web.

1. Pemrograman Berbasis Web
Page 1 of 10
Pemrograman Berbasis Web
“Tugas CSS”
Di Susun Oleh :
Abdul Wafi
1210651163
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2014

2. Pemrograman Berbasis Web
Page 2 of 10
I. Dasar Teori
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk
mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan
seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat
mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya
untuk dapat digunakan bersama-sama dalam beberapa file. Pada umumnya CSS dipakai untuk
memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.CSS dapat
mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran border, warna border, warna
hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah,
dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan
dokument. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama
dengan format yang berbeda.
Ada tiga jenis cara dalam penggunaan CSS ini, yaitu:
1. External Style Sheet
2. Internal Style Sheet
3. Inline Style Sheet
Dalam artikel kali ini akan dibahas satu-persatu.
External Style Sheet
Adalah CSS yang dibuat dalam file terpisah dengan ekstensi file .css. Untuk memanggilnya
menggunakan script html yang disisipkan antara tag head sebagai berikut:
<link rel="stylesheet" type="text/css" href="ditektori/style.css" />
Pada bagian href tersebut tinggal diisi mengarah ke direktori dimana Anda menempatkan file
cssnya. Penggunaan sistem embeding css ini sangat disarankan karena memang banyak kelebihan
yaitu mudah untuk melakukan pengeditan, mengatur semantik dan praktis terkumpul dari satu file.
Internal Style Sheet
Adalah cara embeding css dengan menulis langsung di dalam file html yang ingin kita atus
tampilannya. Penulisan ini disisipkan diantara tag head juga dengan diapit oleh tag style. Berikut
ini contohnya:
<style type="text/css">
body{
background:#cccccc;

3. Pemrograman Berbasis Web
Page 3 of 10
font-family:Arial;
}
</style>
Inline Style Sheet
Adalah penulisan script css langsung pada tag html dengan menambahkan style di dalamnya.
Contoh:
<p style="font-size:20px;">Tulisan yang di atur </p>
Dua cara terakhir ini tidak disarankan digunakan karena rumit dan memperbesar file setiap html
anda sekaligus harus menulis di beberapa tempat sekaligus, kecuali memang sangat darurat.
Darurat disini berarti memang tampilan segera dibutuhkan oleh pengguna saat itu sedangkan anda
sedang membuka fie itu dan tidak sempat membuka file css karena keterbatasan koneksi misalnya.
Namun penggunaan external css akan memudahkan Anda di waktu kedepan dalam hal update dan
editing.
Sejarah CSS
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara
berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style. CSS
sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web
Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan
Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati
dengan standar CSS.

4. Pemrograman Berbasis Web
Page 4 of 10
II. Tugas
Silahkan dibuka folder css
1. Ubahlah teks dalam list (kandungan susu) sehingga property font (warna, jenis font,
ukurannya sama dengan paragraf pertama)
2. Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor, warna
teks dan background-nya berubah.
3. Isilah bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten
(misalnya daftar artikel, dsb). Dan percantiklah dengan kreasi CSS anda (tidak ada CSS
berarti juga TIDAK ADA NILAI).
4. Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman
5. Dibuat laporan ya, upload di slideshare.net dan URLnya disubmit di elearning.
Tampilan Sebelum Di Edit

5. Pemrograman Berbasis Web
Page 5 of 10
Sorce Code :

6. Pemrograman Berbasis Web
Page 6 of 10

7. Pemrograman Berbasis Web
Page 7 of 10
Tampilan Setelah Di Edit
Source Code :

8. Pemrograman Berbasis Web
Page 8 of 10

9. Pemrograman Berbasis Web
Page 9 of 10

10. Pemrograman Berbasis Web
Page 10 of 10