Modul Praktikum CSS – Cara Cerdas Belajar CSS

PRAKTIKUM
NAMA
KELAS
TANGGAL PRAKTIKUM

:
:
:
:

PRAKTIKUM CSS 1
___________________________________
___________________________________
___________________________________

A. TUJUAN

1. Siswa dapat mengenal, memahami fungsi dan manfaat CSS dalam halaman web.
2. Siswa dapat membuat format template sederhana pada halaman web.

B. PENDAHULUAN

CSS adalah kependekkan dari Cascading Style Sheet. Dengan menggunakan CSS kita dapat menciptakan
sebuah format template pada setiap halaman web Anda dengan sangat mudah dan dinamis. Di dalam
halaman web terdapat terdapat beberapa elemen HTML yang kesemuanya itu dapat dikendalikan dengan
menggunakan sebuah bahasa script CSS, dalam pengaturannya biasanya style disimpan di dalam sebuah file
yang bernama style sheet.css. Style sheet ini dapat juga berupa file maupun embeded bersama tag HTML
itu sendiri.
Dengan menggunakan CSS kita dapat menghemat pekerjaan pengaturan web, karena HTML hanya
mengijinkan untuk pengaturan halaman per-elemen saja. Jadi jika kita membuat sebuah web yang besar
kita akan dipersulit dengan pengaturan halaman baik itu warna background, jenis text, maupun ukuran
text.
Dengan adanya kesulitan di atas, maka CSS telah memberi solusi. Jika mengggunakan CSS, cukup sekali
saja dalam menentukan sebuah bentuk Lay Out halaman web kita yang kemudian semua halaman akan
dihubungkan dengan file CSS yang telah kita buat. Selain itu kita juga diberikan kemudahan dalam
mengelola web. Jadi kapan pun kita dapat mengganti tampilan halaman dengan hanya merubah file
dokumen Style sheet yang telah kita buat.

a.

Di dalam HTML dikenal tiga macam teknik dalam penulisan dokumen Style sheet, yaitu:

External Style Sheet
External Style Sheet atau juga kita dapat menyebutnya dengan istilah Linking Style Sheet. Kita sebut
External karena pada teknik ini kita menuliskan semua efek style di dalam sebuah dokumen tersendiri
yang kita panggil dengan menggunakan Link. Teknik pemanggilannya kita deklarasikan di dalam tag
head.


b.

Internal style sheet (inside the tag)
Internal Style Sheet atau sering juga disebut Embeding Style Sheet adalah sebuah metode penulisan
dokumen Style CSS pada satu halaman HTML, dokumen ini diletakkan bercampur dengan tag HTML
yang dibaca diantara tag .

…definisi style…


c.

Inline style (inside an HTML element)

Inline Style adalah sebuah metode penulisan CSS langsung pada komponen tag HTML. Akan tetapi cara
ini kurang begitu digunakan karena proses penulisannya yang langsung dituliskan di dalam elemen
HTML sehingga mempersulit apabila kita memiliki dokumen HTML yang begitu banyak. Jadi dengan
metode ini kita harus meletakkan efek-efek yang kita inginkan di dalam setiap tag HTML yang kita
inginkan. Teknik penulisannya adalah sebagai berikut:


teks



Praktikum Dasar Web

C. PRAKTIKUM
Ketentuan Praktikum:
1. Ketik dokumen halaman web pada Notepad
2. Capture Screen hasil tampilan pada browser.
3. Buat analisa dan kesimpulan dari praktikum yang Anda kerjakan.

1. Berikut ini terdapat dua buah dokumen yang memiliki tujuan sama, yaitu menangani ukuran huruf

di dalam halaman web. Pada dokumen A tidak memasukkan elemen CSS, sedang pada dokumen B
menggunakan style CSS.

A.

B.



Tanpa menggunakan CSS


SMK Negeri 2 Surabaya
Sebelumnya SMK Negeri 2 Surabaya dikenal dengan nama STM Negeri 1 Surabaya.




Menggunakan CSS

h1
{
font-family: verdana;
color: red
}



SMK Negeri 2 Surabaya
Sebelumnya SMK Negeri 2 Surabaya dikenal dengan nama STM Negeri 2 Surabaya.



2. External Style Sheet
ex1.css
body {background-color: yellow}
h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}

This header is 36 pt
This header is blue
This paragraph has a left margin of 50 pixels



Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya

2

Praktikum Dasar Web
3. Internal Style Sheet

A.

h1 {
text-decoration: overline;
text-align: center;
color: red
}
h2 {

}
h3 {
}
hr {
}

text-decoration: line-through;
text-align: left;
color: green

text-decoration: underline;

text-align: right

color:pink




This is header 1

This is header 2

This is header 3




B.

Belajar CSS

P{
color:red;
}
em {
color:green;
}
b {
color:blue;
}




Ini adalah paragraf pertama. Ini adalah teks dicetak miring dan hijau. Ini adalah paragraf pertama.
Ini adalah paragraf pertama. Ini adalah paragraf pertama. Ini adalah paragraf pertama.
Ini adalah paragraf pertama. Ini adalah teks dicetak tebal dan biru. Ini adalah paragraf pertama.

Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya

3

Praktikum Dasar Web
4. Inline Style


Belajar CSS


Paragraf Pertama

Ini adalah paragraf pertama. Ini adalah paragraf pertama. Ini adalah paragraf pertama.
Ini adalah paragraf pertama. Ini adalah paragraf pertama. Ini adalah paragraf pertama.
Ini adalah paragraf pertama. Ini adalah paragraf pertama. Ini adalah paragraf pertama.

Paragraf Kedua

Ini adalah paragraf kedua. Ini adalah paragraf kedua. Ini adalah paragraf kedua.
Ini adalah paragraf kedua. Ini adalah paragraf kedua. Ini adalah paragraf kedua.
Ini adalah paragraf kedua. Ini adalah paragraf kedua. Ini adalah paragraf kedua.




D. TUGAS PRAKTIKUM

1. Buat tampilan halaman web berikut ini dengan menggunakan CSS, dalam format:
a. Inline Style
b. Internal Style Sheet
c. External Style Sheet

h1

Verdana
10pt

E. KESIMPULAN PRAKTIKUM
Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya

4