Modul Pemrograman Web

S1 Ilmu Komputer

Pertemuan Ke-5:
Cascading Style Sheets (Lanjutan)

Disusun Oleh:
Asisten Dosen Pemrograman Web
Jurusan Ilmu Komputer Universitas Lampung
Tim Penyusun

Pengarah
RIZKY PRABOWO, M.KOM
Penyusun
● Satria Sapta Nugraha 2017051022

● Rendy Lutfi Prabowo 2017051053

● Rifan Setiadi 2017051019

● Kurniawan Dwi Yulianto 2057051010

● Alifan Renaldi 2017051044

● Fachri Azka Nur 2017051054

● Putu Putra Eka Persada 2057051016

Gambaran Umum
CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk
mengatur tampilan dan format sebuah dokumen HTML. Dengan
menggunakan CSS, Anda dapat mengontrol warna, ukuran, tata letak, dan
gaya elemen-elemen dalam halaman web.

Capaian Pembelajaran
1. Praktikan mampu membuat efek visual

2. Praktikan bisa memahami kaskade dan pewarisan

3. Praktikan mampu memecahkan masalah dan kreativitas website

Materi Praktikum
Efek Visual
Dalam CSS, Anda dapat menggunakan berbagai properti dan teknik untuk
membuat efek visual yang menarik pada elemen-elemen halaman web.
Berikut adalah beberapa contoh efek visual yang dapat Anda
implementasikan:

● Efek Transisi (transition): Menerapkan perubahan animasi halus

antara dua keadaan elemen.
button {
transition: background-color 0.3s ease;
}

button:hover {
background-color: blue;
}

● Efek Bayangan (box-shadow): Menambahkan bayangan pada

elemen untuk memberikan dimensi dan kedalaman.
.box {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}
● Efek Hover (hover): Mengubah gaya elemen saat mouse diarahkan ke
atasnya.
 a:hover {
color: red;
text-decoration: underline;
}

● Efek Gradient (gradient): Menerapkan perubahan warna bertahap

pada latar belakang elemen.
.box {
background: linear-gradient(to right, red, blue);
}

● Efek Transparansi (opacity): Mengatur tingkat transparansi elemen.

.image {
opacity: 0.8;
}

● Efek Transformasi (transform): Mentransformasi elemen dengan

rotasi, skalasi, atau translasi.
.image {
transform: rotate(45deg);
}

● Efek Animasi (animation): Membuat animasi dengan menggunakan

keyframes.

@keyframes slide-in {
0% { opacity: 0; transform: translateX(-100px); }
100% { opacity: 1; transform: translateX(0); }
}

.box {
animation: slide-in 1s ease-in-out;
}

Memahami kaskade dan pewarisan

Dalam CSS, kaskade dan pewarisan adalah dua konsep penting yang
mempengaruhi cara aturan CSS diterapkan pada elemen-elemen dalam
halaman web. Berikut ini adalah penjelasan singkat tentang kaskade dan
pewarisan:
● Kaskade (Cascade):
○ Kaskade adalah urutan prioritas aturan CSS yang diterapkan
pada elemen-elemen dalam halaman web.
○ Aturan CSS yang ditentukan lebih terakhir atau memiliki
spesifisitas yang lebih tinggi akan memiliki prioritas yang lebih
tinggi daripada aturan sebelumnya.
○ Jika terdapat konflik dalam aturan yang diterapkan, aturan
yang memiliki prioritas lebih tinggi akan digunakan.
h1 {
color: red; /* Aturan 1 */
}

h1 {
color: blue; /* Aturan 2 */
}
Dalam contoh di atas, warna teks untuk elemen h1 akan menjadi biru
karena aturan kedua memiliki prioritas lebih tinggi daripada aturan
pertama.

● Pewarisan (Inheritance):
○ Pewarisan adalah kemampuan elemen untuk mewarisi properti
dari elemen induknya.
○ Beberapa properti CSS yang diterapkan pada elemen akan
diwarisi oleh elemen-elemen anaknya, kecuali jika properti
tersebut diubah secara eksplisit pada elemen anak.
○ Properti yang diwarisi dapat mencakup font, warna teks, dan
tata letak, tetapi properti seperti padding dan margin tidak
diwarisi.
.container {
font-family: Arial, sans-serif; /* Properti diwarisi */
color: blue; /* Properti diwarisi */
}

h1 {
font-weight: bold; /* Properti tidak diwarisi */
color: red; /* Properti tidak diwarisi */
}
Dalam contoh di atas, elemen h1 yang berada dalam elemen
dengan kelas "container" akan mewarisi properti font-family (Arial,
 sans-serif) dan warna teks (biru), tetapi tidak mewarisi properti font-
weight (bold) dan warna teks (merah) dari aturan CSS yang
diterapkan pada elemen h1.

Pemecahan masalah dan kreativitas

Pemecahan masalah dan kreativitas adalah dua aspek penting dalam
pengembangan web. Berikut ini adalah penjelasan singkat tentang
keduanya:

● Pemecahan Masalah:
○ Pemecahan masalah adalah kemampuan untuk
mengidentifikasi dan menyelesaikan masalah yang muncul
dalam pengembangan web.
○ Proses pemecahan masalah melibatkan analisis masalah,
pemahaman tujuan, eksplorasi alternatif solusi, dan
implementasi solusi yang efektif.
○ Pemecahan masalah melibatkan pemikiran logis, pemecahan
masalah berstruktur, dan kemampuan untuk mengatasi
rintangan dan hambatan.

● Kreativitas:
○ Kreativitas adalah kemampuan untuk menghasilkan ide-ide
baru dan orisinal dalam pengembangan web.
○ Kreativitas melibatkan kemampuan untuk berpikir di luar
batas-batas, membuat koneksi yang tidak biasa, dan
menciptakan solusi yang inovatif.
○ Dalam pengembangan web, kreativitas dapat diterapkan
dalam merancang tampilan visual yang menarik,
menciptakan interaksi yang unik, dan menghadirkan
pengalaman pengguna yang menarik.

Beberapa cara untuk membangun pemecahan masalah dan kreativitas

dalam pengembangan web meliputi:

● Berlatih pemecahan masalah dengan menyelesaikan tantangan

dan proyek-proyek kecil.
● Mengembangkan kemampuan berpikir kritis dan analitis.
 ● Mencari sumber inspirasi dari desain web yang menarik dan tren
terkini.
● Mengeksplorasi dan menguasai alat dan teknologi terbaru dalam
pengembangan web.
● Mendorong pemikiran asosiatif dan mengambil risiko dalam
menciptakan solusi yang baru.
● Berkolaborasi dengan tim atau komunitas pengembang web untuk
mendapatkan perspektif yang berbeda.

Kombinasi pemecahan masalah yang efektif dan kreativitas yang kuat

akan membantu Anda dalam mengatasi tantangan dalam
pengembangan web dan menciptakan solusi yang unik dan inovatif. Terus
berlatih dan eksplorasi untuk mengembangkan keterampilan ini secara
berkelanjutan.