Modul 3 - Cascading Style Sheet (CSS)

Modul Praktikum Pemrograman Web 2019/2020
Modul 3 : Cascading Style Sheet (CSS)
KOMPETENSI :
Setelah menyelesaikan praktikum pada Modul 3, Praktikan diharapkan mampu memahami dan
mengimplementasikan penggunaan CSS untuk desain Web.
TUJUAN INSTRUKSIONAL KHUSUS :
1. Praktikan dapat memahami tentang CSS
2. Praktikan dapat mengimplementasikan penggunaan CSS kedalam aplikasi web
TUGAS PENDAHULUAN
1. Jelaskan apa yang dimaksud dengan JavaScript beserta fungsinya!
2. Tuliskan dan jelaskan 3 cara pendeklarasian JavaScript beserta pemanggilannya!
3. Tuliskan tag yang digunakan untuk JavaScript beserta attribut-attributnya!
4. Jelaskan Variable dan Type Casting pada JavaScript!
5. Tuliskan dan Jelaskan macam-macam event pada JavaScript (minimal 10)!
6. Jelaskan apa yang dimaksud dengan DOM pada JavaScript!
TEORI DASAR:
1. Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS) adalah suatu bahasa yang bekerja sama dengan dokumen HTML untuk
mendefinisikan cara bagaimana suatu halaman web ditampilkan atau dipresentasikan. Presentasi ini
meliputi style atau gaya pada teks, link maupun tata letak (layout) halaman. Script CSS disimpan dengan
format ekstensi .css
1) Struktur CSS
Dalam penulisan CSS terdapat struktur yang menyusun CSS. Berikut struktur CSS :
Gambar 3.1 Struktur CSS

a. Selector merupakan Tag HTML, CSS atau ID yang akan diberi atau dikenai gaya.
- Selector Tag berisi tag-tag HTML yang akan dimanipulasi oleh CSS, dimana
penggunaan- penggunaan tag yang dikenai CSS akan ikut berubah sesuai dengan deklarasi
CSSnya.
- Selector Id berisi identifier unik yang akan dimanipulasi oleh CSS, umumnya id atau
identifier hanya dapat digunakan oleh satu elemen saja. Selector id ditandai dengan simbol
pagar (#) yang diikuti dengan nama id atau identifier.
- Selector Class berisi identifier kelas yang akan dimanipulasi oleh CSS berdasarkan
kelasnya yang memiliki karakteristik yang sama dan digunakan berulang-ulang.
Penggunaan selector class pada struktur CSS ditandai dengan simbol titik (.) yang diikuti
dengan nama kelas.
b. Declaration atau Deklarasi properti dan value yang akan ditentukan oleh tag bersangkutan.
c. Property merupakan jenis style atau gaya yang akan dikenakan pada Selector.
d. Value merupakan nilai dari property yang membentuk style.
Berikut contoh deklarasi CSS pada tag body.
Syntax Struktur Keterangan
body { Selector body Bagian ini merupakan
background : black; selector yang akan dikenai
color : white; style
} Property background Bagian ini merupakan
color declaration. Dimana color
Value black dan background merupakan
white properti dari tag body yang
akan diset masing-masing
nilainya dengan white dan
Laboratorium Rekayasa Perangkat Lunak | 14
black. Setiap akhir deklarasi

harus diakhiri dengan tanda
titik koma atau semicolon
(;).
2) Penggabungan Kode CSS dengan Dokumen HTML
Terdapat 3 proses penggabungan kode CSS dengan dokumen HTML sebagai berikut.
Style Keterangan Contoh
Internal Menuliskan Kode CSS pada bagian <head>
Style Header (head) dokumen HTML ditandai <style>
dengan penggunaan tag style yang body {
didalamnya terdapat deklarasi-deklarasi background:black;
css. }
</style>
</head>
External Menuliskan Kode CSS pada File <head>
Style Terpisah dengan Ekstensi CSS dan <link href=”style.css”
dipanggil melalu tag <link> dari rel=”stylesheet”/>
dokumen HTML. </head>
Inline Style Menuliskan Kode CSS langsung pada tag <p style=”font-
yang akan diubah atau diatur stylenya face:arial; color:red;”>
menggunakan attribut style. Warna Merah Arial</p>
Berikut adalah contoh penggunaan CSS dengan HTML lebih lanjut.
Internal Style
Kode CSS yang dituliskan dengan cara seperti ini hanya akan berlaku untuk satu
dokumen bersangkutan saja. Artinya jika style yang sama akan digunakan di halaman
lain, maka kode CSS perlu disalin pada dokumen yang dituju.
<html>
<head>
<title>Inline CSS</title>
<style>
body {
background : black;
color : white;
}
h2 {
color : yellow;
border-bottom: 1px solid white;
}
</style>
</head>
<body>
<h2>Demo Internal Style</h2>
<p>Halaman Ini Adalah Halaman Yang Sudah Di Atur Stylenya Oleh
Kode CSS </p>
</body>
</html>
External Style
Penggunaan External Style membuat dokumen tampak lebih rapih dan mudah untuk
dibaca atau dipahami. Selain itu penggunaannya lebih mudah dikembangkan atau
dimodifikasi. Dan kode CSS dapat digunakan oleh dokumen-dokumen HTML lain yang

ingin menerapkan style tersebut yang apabila terdapat perubahan pada file CSS maka
semua dokumen HTML yang menerapkannya akan ikut berubah.
File : style.css File : Modul3.html
body { <html>
background : black; <head>
color : white; <title>External Style</title>
}
h2 { <link rel=”stylesheet”
color : yellow; href=”style.css”
border-bottom: 1px solid white; type=”text/css”>
} </head>
<body>
<h2> Demo External Style
</h2>
<p> Halaman Ini Adalah
Halaman Yang Sudah Diatur
Stylenya Oleh Kode CSS. </p>
</body>
</html>
Inline Style
Penggunaan Inline Style hanya digunakan apabila hanya terdapat beberapa elemen saja
yang akan memiliki style yang berbeda. Penggunaan inline tidak disarankan untuk
pembuatan web dengan skala besar karena penggunaannya akan tampak lebih rumit.
<html>
<head>
<title> Inline Style </title>
</head>
<body>
<h2> Demo Inline Style </h2>
<p style=”color:red; text-decoration:underline;”>Contoh Paragraf
Menggunakan Inline Style</p>
</body>
</html>
3) Pseudo Class CSS
Pseudo Class pada CSS merupakan class-class yang ditandai dengan double dot (:) setelah
selector yang akan memberikan style terpisah berdasarkan state atau keadaan setelah terjadi
aksi-aksi tertentu pada selector. Berikut ini beberapa contoh Pseudo Class pada CSS.
Pseudo Class Contoh Keterangan
:active a:active Memilih link yang aktif
:focus input:focus Memilih Tag Input yang
Sedang Bersiap Menerima
Inputan
:hover a:hover Memilih Selector Ketika
Mouse Menyoroti Element
:visited a:visited Memilih link yang telah
dikunjungi
Untuk selengkapnya : https://www.w3schools.com/css/css_pseudo_classes.asp
4) Tag Div
Tag div atau division merupakan tag yang sangat umum digunakan untuk membagi sebuah
halaman web kedalam beberapa bagian dengan tujuan untuk pengelompokan layout yang lebih
mudah. Contoh penggunaan tag div seperti dibawah ini.

Penggunaan Div
<div class=”sidebar”>
<div class=”menu”>
<ul>
<option>Home</option>
<option>Profile</option>
<option>Notification</option>
</ul>
</div>
</div>
PRAKTIKUM MANDIRI
1. Peralatan
Perangkat komputer / PC / Laptop / Notebook .
Sistem operasi Windows / Linux (optional Mac OS)
Aplikasi Visual Studio Code / Atom / SublimeText / phpStorm IDE
2. Prosedur
a) Baca dan pahami semua tahapan praktikum dengan cermat.
b) Gunakan fasilitas yang disediakan dengan penuh rasa tanggung jawab.
c) Rapikan kembali setelah menggunakan komputer (mouse, keyboard, kursi, dll).
d) Perhatikan sikap anda untuk tidak mengganggu rekan praktikan lain.
e) Pastikan diri anda tidak menyentuh sumber listrik.
3. Kegiatan Praktikum
1) Buka text editor / IDE yang akan digunakan.
2) Buat file baru kemudian simpan file tersebut dengan nama “Modul3_Layout.html” dan “Style.css”.
3) Pada File “Style.css” Ketikkan Kode dibawah ini, kemudian identifikasi dan implementasikan pada
file “Modul3_Layout.html” untuk penggunaan file CSS tersebut.
4) Setelah percobaan selesai, tutup semua perangkat lunak yang telah digunakan.
5) Matikan PC dan Rapihkan meja praktikum.
.wrap{ background: color : white; width: 25%;
background: blue; #0DEAD0; } height: 100%;
width: 900px; color : white; /*akhir menu*/ }
margin: 10px auto; } .clear{ /*akhir sidebar*/
} .wrap .menu ul{ clear: both; .wrap .badan
padding: 0; } .content {
/*bagian header*/ margin: 0; .badan{ background:
.wrap .header{ background: height: 450px; #CCFFFF;
background: #0DEAD0; } float: left;
#0099ff; overflow: hidden; height: 100%;
padding: 2px 10px; } /*bagian sidebar*/ width: 75%;
color: #fff; .wrap .menu ul li{ .wrap .badan }
} float: left; .sidebar { .wrap .footer {
/*akhir header*/ list-style-type: background: width: 100%;
/*bagian menu*/ none; #0DEAD0; padding: 10px;
.wrap .menu{ padding: 10px; float: left; }

Gambar 3.2 Hasil Implementasi

EVALUASI PRAKTIKUM
1. Identifikasi dan Implementasi Layouting Web (minimum seperti gambar di bawah) pada Framework
CSS Bootstrap minimal 15 komponen dan class!

Modul 3 - Cascading Style Sheet (CSS)

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

Modul 3 - Cascading Style Sheet (CSS)

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul Praktikum Pemrograman Web 2019/2020

Modul 3 : Cascading Style Sheet (CSS)

Gambar 3.1 Struktur CSS

black. Setiap akhir deklarasi

Laboratorium Rekayasa Perangkat Lunak | 15

Laboratorium Rekayasa Perangkat Lunak | 16

Laboratorium Rekayasa Perangkat Lunak | 17

Gambar 3.2 Hasil Implementasi

Laboratorium Rekayasa Perangkat Lunak | 18

Anda mungkin juga menyukai