PRAKTIKUM 5

Dasar CSS (Cascading Style Sheet)

5.1 Tujuan Istruksional Umum

1. Mahasiswa bisa memahami konsep CSS.
2. Mahasiswa bisa memahami dan membuat CSS untuk mempercantik tampilan web.

5.2 Tujuan Istruksional Khusus

1. Mahasiswa bisa memahami dasar cara penulisan CSS menggunakan inline text, embedded dan
link
2. Mahasiswa bisa memakai CSS untuk memperindah tampilan WEBSITE.

5.3 DASAR TEORI

Pada praktikum css ini harap bersabar, kerjakan satu-satu sampai selesai. Siapkan waktu,
komputer dan peralatan cetak untuk laporan. Karena materi ini sangat banyak, dan hanya sebagian
saja yang dimasukkan di praktikum ini. Sisanya silahkan belajar sendiri di internet. URL web ini bisa
jadi acuan: https://www.w3schools.com/css/default.asp
CSS berperan agar tampilan dokumen web menjadi menarik. CSS adalah singkatan dari
Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang
di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan. Jadi kalau di tulis
lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan
saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.
Ada keuntungan menggunakan CSS untuk mengatur tampilan web yaitu adanya pemisahan
antara presentation sebuah dokumen web dengan content dokumen akan memudahkan dalam
melakukan pengembangan dan pemeliharaan situs web. Tanpa adanya CSS, maka ketika melakukan
perubahan terhadap tampilan web seorang web designer harus mengubah setiap file web. Tapi di sisi
lain juga ada kekurangan, yaitu setiap User Agent atau browser memiliki default style sheet. Sehingga
diperlukan teknik-teknik khusus agar tampilan web dapat sesuai di semua web browser.

5.3.1 Satuan Dalam CSS

1. Statik
• in -- satuan inchi
• cm -- satuan centimeter
• mm -- satuan milimeter
• pt -- satuan point (1point = 1/72 inchi)
• pc -- satuan pica (1pica = 12 point)
• px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 60
 2. Relatif
• % -- satuan persen
• em -- atau ems (1em)
• ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)
• 1em = 12pt = 16px = 100%.

5.3.2 Syntax CSS

Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: selector, property,
dan value.
Format penulisan kalimat CSS:

Selector itu untuk menunjukkan bagian mana yang hendak diatur / di format. Property untuk
menunjukkan, bagian (properti) dari selector yang hendak diatur. Value adalah nilai dari
pengaturannya.
Contoh Syntax:
h1 {
color : red ;
}
Contoh di atas menunjukkan
• Selector : h1
• Property : color
• Value : red
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Atur Tag h1, beri properti
dengan value merah (red).

5.3.3 Pengelompokan Selectors

Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan
koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka
kode. CSS nya menjadi:
h1,h2,h3 { color: red }

Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 61
5.3.4 Penggunaan Banyak Properties
Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
h1,h2,h3 {
color : red;
font-family : arial;
font-size : 150%;
}

5.3.5 CSS Comment

Kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi
catatan pengingat. Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan
komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya
sebagai catatan untuk diri anda.

/* Tulis komentar anda di sini */

p{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}

5.3.6 Tiga teknik menempatkan aturan CSS ke dalam dokumen web :

• Inline style yaitu aturan CSS langsung disertai dalam elemen web
• Embedded style yaitu aturan CSS disertai dalam dokumen web
• Linked style yaitu aturan CSS terdapat di file tersendiri yang kemudian dipanggil oleh
dokumen web.

5.3.6.1 Inline CSS

Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak
memerlukan penulisan selector dalam kode CSS. Cara ini sebaiknya hanya digunakan jika anda mau
memformat suatu elemen satu kali saja.
Contoh:
<P style=”color:blue”>
Isi paragraf.
</p>
Pada contoh di atas, elemen paragraf <P> di format agar tulisannya menggunakan warna biru.
Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada
elemen paragraf yang ditentukan kode CSS nya. Penulisan CSS dengan cara ini di mulai dengan kata
style: lalu di ikuti dengan syntax property: value.

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 62
5.3.6.2 Embedded CSS
Anda bisa juga menempelkan kode CSS di antara tag <head> dan </head> atau dapat juga
diadalam body <body>dan</body>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan
diakhiri dengan tag </style>.
Contoh:
<head>
<style type="text/css" media=screen>
p {color:blue;}
</style>
</head>
Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat
menggunakan font berwarna biru.

5.3.6.3 Link ke sheet lainnya

Apabila anda menginginkan style yang sama untuk halaman HTML anda yang lain, disarankan
memperguakan sheet-sheet terpisah namun satu dan lainnya terhubung dengan cara link. Anda dapat
mengikuti cara berikut ini :
<link rel="stylesheet" href="style.css" type=”text/css”>

Kode tag untuk link ini ditempatkan di bagian "head" dokumen anda. Perintah rel perlu diatur
dengan pernyataan "stylesheet" agar supaya browser dapat menemukan perintah href sebagai
penunjukan ke alamat Web (URL) sheet anda.

5.3.7 Class dan ID Selektor

Pada contoh-contoh di pelajaran sebelumnya, anda melihat penggunaan tag HTML sebagai
selector. Misalkan anda membuat kode CSS untuk tag <h1>. Sekarang bagaimana jika anda ingin
memformat tag <h1> dengan warna / property berbeda? Misalkan, anda ingin tag <h1> di kolom kiri
berwarna biru sementara tag <h1> di kolom tengah berwarna hitam. Untuk kasus seperti ini, anda
bisa menggunakan Class selector dan ID selector.

Class Selector
Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.
Cara penulisan Class Selector:

.nama_class { property : value ; }

Atau

taghtml.nama_class { property : value ; }

Perhatikan tanda titik di setiap awal nama Class. Contoh:

.tengah {text-align:center;}

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 63
5.3.8 ID Selector
ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk
memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat
bagian menu / sidebar. Cara penulisan ID Selector:

#nama_ID { property : value ;}

Untuk menempelkan ID selector ke dalam tag HTML:

taghtml#nama_ID { property : value ;}

Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di luar
kode. HTML anda menggunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.

#top{
background-color:#ccc;
padding:1em;
}

5.3.9 WARNA
Untuk menguasai warna pada HTML, anda harus memahami konsep warna di komputer dan
rumus atau cara meniskripsikannya. Di mata kuliah pengolahan citra mestinya akan dapat. Namun
secara sederhana fahami kata-kata kunci berikut:
a. Warna di layar monitor tersusun atas 3 warna dasar RGB. Red, Green dan Blue. (Lupakan
bahasa Indonesia karena kita pakai standart kode Internasional).
b. Dalam Heksa, minimal itu bisa 0h, atau 00h, dan maksimal itu Fh, atau FFh.
c. Dalam Desimal, minimal itu bisa 0d, atau 00d, dan maksimal itu 16h, atau 256h.
d. Nilai minimal itu Hitam, nilai maksimal itu cerah.
e. Transparansi atau opacity atau alpha channel, adalah parameter tambahan untuk transparansi.

Mari kita tampilkan Beberapa warna dengan berbagai cara yang mungkin dilakukan oleh HTML:
1. Nama warna
Kita dapat menuliskan warna langsung dengan perintah warna, namun bahasa inggris dan
terbatas hanya pada nama warna yang memang ada. Silahkan cek disini
https://www.w3schools.com/tags/ref_colornames.asp
Contoh: color : blue;
2. 3 digit kode rgb
Sebuah kode bernilai dari 0 sd F. Susunan wana adalah #RGB. R=red, G=green dan B=Blue.
0=gelap, dan F = maksimal cerah
Contoh:
Biru à color : #00F;
Merah à color : #F00;
Hijau à color : #0F0;
Putih à color : #FFF;
Hitam à color : #000;

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 64
 3. 6 digit kode rgb
Enam digit sama saja konsepnya dengan tiga digit. Bedanya, jika sebuah kode bernilai dari
0 sd F, maka yang enam digit dari 00 sd FF. Susunan wana adalah #RRGGBB. R=red,
G=green dan B=Blue.
00=gelap, dan FF = maksimal cerah
Contoh:
Biru à color : #0000FF;
Merah à color : #FF0000;
Hijau à color : #00FF00;
Putih à color : #FFFFFF;
Hitam à color : #000000;

4. RGBA. (Red, Green, Blue, alpha). Khusus alpha 0(tembus) sampai 1(solid, tidak transparan)
§ rgba(0,0,0,1) à Hitam
§ rgba(255,255,255,1) à Putih
§ rgba(0,0,255,1) à Biru

5. HSL (Hue, Saturation and Lightness). Ini harus belajar citra, karena tidak ada hubungannya
langsung dengan RGB. Silahkan cek untuk memahaminya disini.
https://www.w3schools.com/colors/colors_hsl.asp

6. Begitu juga HSLA dan Opacity, Silahkan pelajari sendiri.

Silahkan cek https://www.w3schools.com/css/css3_colors.asp untuk konsep warna lebih lanjut.

5.3.10 Padding, Border dan Margin

Konsep membuat menggambar garis bingkai atau border terhadap objek teks atau gambar.

Kuncinya adalah memahami bagian top, right, bottom dan left. Serta mana yang padding dan
mana yang margin.

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 65
 Padding
Adalah jarak komponen body content ke border.

Margin
Adalah Jarak dari border ke widows.

Border
Adalah garis tepi dari komponen yang akan diberi bentuk batas.

5.4 PROSEDUR PRAKTIKUM

5.4.1 Memulai CSS
p 5-1.html à Memulai CSS paling sederhana Hasil:

p 5-2.html à Menampilkan gabungan css pada heading.

Buatlah Coding HTM+CSS untuk menampilkan sbb:

Nb:
nama gunakan <h1>, nim gunakan <h2> dan kelas gunakan <h3>.

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 66
5.4.2 Pengelompokan selector
p 5-3.html à Pengelompokan selector pada css. Hasil:

5.4.3 Comment pada CSS

p 5-4.html à Memulai CSS

Hasil:
1. Capture hasilnya. Mestinya sama dengan percobaan sebelumnya.
2. Hilangkan tanda /* dan */ pada program diatas. Jalankan dan capture hasilnya.
Kenapa demikian?

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 67
5.4.4 TIGA TEKNIK MENEMPATAKAN ATURAN CSS
p 5-5.html à Teknik inline Hasil:

p 5-6.html à Teknik Embedded CSS

Hasil:
Jalankan dan Capture hasil embedded css anda.

p 5-7.html à Link ke Sheet lainnya.

Berikutnya ketikkan file berikut dan simpan dengan nama p5-7.css (Beda di exktensinya)

Hasil:
Capture dan jalankan hasil link ke file css anda. Hasilnya mestinya masih berwarna seperti
praktek sebelumnya.

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 68
5.4.5 class dan id Selektor

p 5-8.html à Class Selector Hasil:

p 5-9.html à ID Selector Hasil:

Menurut anda, apakah perbedaan pengaruh perintah CSS menggunakan TAG, CLASS dan ID
Selector?

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 69
5.4.6 Gabungan Penggunaan Tag CSS
p 5-10.html à gabungan penggunaan css

Hasil:

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 70
5.4.7 BORDER
Ada beberapa parameter dari border.

§ Border à parameter berikutnya bisa gabungan.

§ border-left, border-right, border-top, border-bottom à border satu sisi saja
§ border-width à mengatur parameter lebar border
§ border-style à mengatur bentuk border
§ border-radius à sudut lengkung
§ border-color à warna border

p 5-11.html à Memakai Border

Hasil:

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 71
5.4.8 PADDING
p 5-12.html à Contoh Padding

Hasil:

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 72
 p 5-13.html à Memodifikasi padding
Sama seperti p5-12.html, gantilah padding menjadi padding: 40px;
Hasil:
Jalankan dan capture hasilnya.
Apa perbedaan dengan p5-12.html Tuliskan pendapat anda?

p 5-14.html à Memodifikasi padding

Sama seperti p5-12.html, gantilah padding menjadi padding: 10px 50px;
Hasil:
Jalankan dan capture hasilnya.
Apa perbedaan dengan p5-12.html Tuliskan pendapat anda?

p 5-15.html à Memodifikasi padding

Sama seperti p5-12.html, gantilah padding menjadi padding:10px 20px 30px 10px;
Hasil:
Jalankan dan capture hasilnya.
Apa perbedaan dengan p5-12.html Tuliskan pendapat anda?

5.4.9 MARGIN
p 5-16.html à Contoh Padding

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 73
 Hasil: à

5.4.10 Warna
p 5-17.html à Warna dasar 3 Byte
Pada perintah (isikan), isikan sesuai dengan warna yang tampak pada layar

Hasil:
Jalankan dan capture hasilnya.

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 74
p 5-18.html à Warna Dasar degradasi

Hasil:
Jalankan dan capture hasilnya.
Ada berapa kemungkinan Degradasi warna Hitam jika menggunakan 3 Byte?

p 5-19.html à Warna Dasar 6 byte

Pada perintah (isikan), isikan sesuai dengan warna yang tampak pada layar

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 75
 Hasil:
Jalankan dan capture hasilnya.

1. Pada perintah degradasi merah, apakah anda melihar perbedaan warna pada 4
baris pertama? Kenapa?
2. Ada berapa kemungkinan degradasi warna merah dari terang hingga menjadi
gelap jika menggunakan 6 byte kombinasi warna?

5.4.11 Border Lanjutan

p 5-20.html à Warna Dasar 6 byte
Pada perintah (isikan), isikan sesuai dengan perintah border-style yang tampak pada layar

Hasil:
Jalankan dan capture hasilnya.

p 5-21.html à Border Lanjutan

Sama seperti p5-20.html, gantilah solid menjadi dashed
Hasil: Jalankan dan capture hasilnya.

p 5-22.html à Border Lanjutan

Sama seperti p5-20.html, gantilah solid menjadi dotted
Hasil: Jalankan dan capture hasilnya.

p 5-23.html à Border Lanjutan

Sama seperti p5-20.html, gantilah solid menjadi double
Hasil: Jalankan dan capture hasilnya.

p 5-24.html à Border Lanjutan

Sama seperti p5-20.html, gantilah solid menjadi groove
Hasil: Jalankan dan capture hasilnya.

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 76
 p 5-25.html à Border Lanjutan
Sama seperti p5-20.html, gantilah solid menjadi ridge
Hasil: Jalankan dan capture hasilnya.

p 5-26.html à Border Lanjutan

Sama seperti p5-20.html, gantilah solid menjadi inset
Hasil: Jalankan dan capture hasilnya.

p 5-27.html à Border Lanjutan

Sama seperti p5-20.html, gantilah solid menjadi outset
Hasil: Jalankan dan capture hasilnya.

5.4.12 Bayang-bayang (Shadow)

Ada dua shadow atau bayangan yang dapat diterapkan, text-shadow dan box-shadow
Parameternya : horizontal, vertical, blur, warna

p 5-28.html à Text Shadow

Hasil: à

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 77
p 5-29.html à Box Shadow

Hasil:

p 5-30.html à Border Lanjutan

gantilah parameter box-shadow: menjadi 10px 10px #FF8;
Hasil: Jalankan dan capture hasilnya.

p 5-31.html à Border Lanjutan

gantilah parameter box-shadow: menjadi 10px 10px 20px #222;
Hasil: Jalankan dan capture hasilnya.

p 5-32.html à Border Lanjutan

gantilah box-shadow: menjadi 0px 0px 20px #FF3;
Hasil: Jalankan dan capture hasilnya.

p 5-33.html à BoxShadow dan radius

Butlah codingnya, pastikan ujungnya tumpul

Hasil: Jalankan dan capture hasilnya.

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 78
5.4.13 Font Lanjutan
p 5-34.html à Font Family

Hasil:

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 79
 p 5-35.html à Font Family
Lanjutkan Coding di atas p5-34.html dengan menambah variasi font sesuai list ini. Dan
tetap dalam satu halaman web.
Monospace Fonts

• "Courier New", Courier, monospace

• "Lucida Console", Monaco, monospace
Serif Fonts

• Georgia, serif
• "Palatino Linotype", "Book Antiqua", Palatino, serif
• "Times New Roman", Times, serif
Sans-Serif Fonts

• Arial, Helvetica, sans-serif

• "Arial Black", Gadget, sans-serif
• "Comic Sans MS", cursive, sans-serif
• Impact, Charcoal, sans-serif
• "Lucida Sans Unicode", "Lucida Grande", sans-serif
• Tahoma, Geneva, sans-serif
• "Trebuchet MS", Helvetica, sans-serif
• Verdana, Geneva, sans-serif

5.5 TUGAS
1. Menurut anda, kapankah kita harus menggunakan CSS menggunakan
a. TAG Selector?
b. CLASS Selector?
c. ID Selector?

2. Menurut anda, kapankah kita harus menggunakan CSS dengan

a. inline?
b. embedded?
c. Link ke file css lain?

3. Dengan berbekal kemampuan HTML dan CSS yang sudah diberikan, desainlah sebuah
halaman WEB ABOUT ME, yang sederhana namun cantik dengan menampilkan informasi
anda sendiri. Desain bebas. Minimal info yang ditampilkan:
• Nama
• Nim
• Kelas
• Hoby
• Foto
Cetak Coding dan tampilannya

Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 80