Mata Kuliah: Pemrograman Berbasis Web
🧭 1. Pengertian CSS (Cascading Style Sheets)
7
📖 Deskripsi
CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan (style) dari halaman web yang dibuat dengan HTML.
🧠 Narasi
Jika HTML adalah kerangka rumah, maka CSS adalah cat, dekorasi, dan tata ruangnya. Tanpa CSS, halaman web akan terlihat polos dan kurang menarik. CSS memungkinkan kita mengatur warna, ukuran, posisi, dan layout secara fleksibel.
🧩 2. Cara Menggunakan CSS
8
📖 Deskripsi
CSS dapat diterapkan dalam 3 cara:
🧱 Tabel Metode CSS
| Metode | Penjelasan |
|---|---|
| Inline | Langsung di tag HTML |
| Internal | Dalam <style> di <head> |
| External | File .css terpisah |
💻 Contoh
Inline CSS
<p style="color:red;">Teks Merah</p>
Internal CSS
<style>
p { color: blue; }
</style>
External CSS
<link rel="stylesheet" href="style.css">
🧠 Narasi
Penggunaan external CSS sangat disarankan karena:
- Lebih rapi
- Mudah dikelola
- Bisa digunakan ulang
🎯 3. Sintaks Dasar CSS
7
📖 Deskripsi
Struktur CSS terdiri dari:
selector {
property: value;
}
🧠 Narasi
- Selector → memilih elemen HTML
- Property → jenis style
- Value → nilai dari style
Contoh:
p {
color: blue;
}
Artinya semua paragraf akan berwarna biru.
🔍 4. Selector CSS
7
📖 Deskripsi
Selector digunakan untuk memilih elemen HTML.
🧱 Jenis Selector
| Selector | Contoh | Keterangan |
|---|---|---|
| Element | p | Semua paragraf |
| Class | .judul | Elemen dengan class |
| ID | #header | Elemen dengan id |
| Universal | * | Semua elemen |
💻 Contoh
.judul {
color: green;
}
🧠 Narasi
Selector adalah inti dari CSS. Dengan selector, kita bisa mengatur tampilan secara spesifik.
🎨 5. Warna dan Background
6
📖 Deskripsi
CSS menyediakan berbagai cara untuk memberi warna.
🧱 Contoh Properti
| Properti | Fungsi |
|---|---|
| color | Warna teks |
| background-color | Warna latar |
| background-image | Gambar latar |
💻 Contoh
body {
background-color: lightblue;
}h1 {
color: red;
}
🧠 Narasi
Pemilihan warna sangat penting untuk:
- Estetika
- Keterbacaan
- UX (User Experience)
🔤 6. Font dan Teks
7
📖 Deskripsi
CSS memungkinkan pengaturan teks.
🧱 Properti Font
| Properti | Fungsi |
|---|---|
| font-size | Ukuran |
| font-family | Jenis font |
| text-align | Perataan |
| text-decoration | Dekorasi |
💻 Contoh
p {
font-size: 16px;
text-align: center;
}
🧠 Narasi
Tipografi yang baik meningkatkan kenyamanan membaca.
📦 7. Box Model
6
📖 Deskripsi
Setiap elemen HTML berbentuk kotak.
🧱 Komponen Box Model
| Bagian | Fungsi |
|---|---|
| Content | Isi |
| Padding | Ruang dalam |
| Border | Garis |
| Margin | Ruang luar |
💻 Contoh
div {
margin: 10px;
padding: 20px;
border: 1px solid black;
}
🧠 Narasi
Memahami box model sangat penting untuk mengatur layout.
📐 8. Layout Dasar (Display & Position)
5
📖 Deskripsi
Mengatur posisi elemen.
🧱 Properti
| Properti | Fungsi |
|---|---|
| display | Jenis tampilan |
| position | Posisi elemen |
💻 Contoh
div {
display: block;
position: relative;
}
🧠 Narasi
Properti ini membantu menyusun elemen dalam halaman.
📏 9. Satuan dalam CSS
6
📖 Deskripsi
CSS memiliki berbagai satuan ukuran.
🧱 Tabel
| Satuan | Keterangan |
|---|---|
| px | Pixel |
| % | Persen |
| em/rem | Relatif |
| vw/vh | Viewport |
🧠 Narasi
Penggunaan satuan relatif penting untuk responsive design.
⚖️ 10. Cascade & Specificity
7
📖 Deskripsi
CSS memiliki aturan prioritas.
🧱 Urutan Prioritas
- Inline
- ID
- Class
- Element
🧠 Narasi
Jika ada konflik, CSS akan memilih aturan dengan prioritas tertinggi.
🧪 11. Latihan Praktikum
🎯 Tugas
Buat halaman web dengan:
- Warna background
- Font custom
- Box model
- Layout sederhana
🎯 12. Kesimpulan
- CSS mengatur tampilan web
- Selector dan box model sangat penting
- Layout dasar menjadi fondasi desain web
- CSS bekerja bersama HTML & JavaScript
🎓 Penutup
Setelah memahami CSS dasar, mahasiswa akan siap untuk:
➡️ CSS Layout lanjutan (Flexbox, Grid)
➡️ Responsive Design
➡️ Framework CSS (Bootstrap, Tailwind)
