Kelas XI
Materi Kelas XI – Lingkungan MA Al-Ishlah Jamanis
Bab 5. CSS (C. Fungsi CSS)
C. Fungsi CSS CSS memiliki banyak fungsi penting. 1. Mempercantik Tampilan Website CSS dapat mengatur: Warna Font Layout Animasi Background 2. Memisahkan Struktur dan Tampilan HTML fokus pada isi. CSS fokus pada desain. 3. Membuat Website Responsive Website dapat menyesuaikan ukuran layar HP, tablet, dan desktop. 4. Mempermudah Pengelolaan Website Perubahan desain cukup dilakukan pada file CSS.
Bab 5. CSS (D. Cara Kerja CSS Dan Struktur Dasar CSS)
D. Cara Kerja CSS Dan Struktur Dasar CSS 1. Cara Kerja CSS CSS bekerja dengan memilih elemen HTML lalu memberikan style pada elemen tersebut. Contoh: p { color: red; } Penjelasan: p adalah selector. color adalah property. red adalah value. Browser membaca CSS dari atas ke bawah. 2. Struktur Dasar CSS Struktur dasar CSS: selector { property: value; } Contoh: h1 { color: blue; font-size: 30px; } Penjelasan: h1 → selector color → property blue
Bab 5. CSS (E. Bagian-Bagian CSS)
E. Bagian-Bagian CSS CSS memiliki beberapa bagian penting. 1. Selector Digunakan untuk memilih elemen HTML. Contoh: h1 { color: blue; } 2. Property Property adalah atribut yang akan diubah. Contoh: color: blue; color adalah property. 3. Value Value adalah nilai dari property. Contoh: color: blue; blue adalah value. 4. Declaration Gabungan property dan value. Contoh: color: blue; 5. Declaration Block Kumpulan declaration di dalam {}. Contoh: h1 { color: blue; font-size: 20px; }
Bab 5. CSS (F. Selector CSS)
F. Selector CSS Selector digunakan untuk memilih elemen HTML yang akan diberi style. 1. Element Selector Memilih elemen berdasarkan nama tag. p { color: black; } 2. ID Selector Menggunakan tanda #. #judul { color: red; } HTML: <h1 id=”judul”>Belajar CSS</h1> 3. Class Selector Menggunakan tanda .. .kotak { background: yellow; } HTML: <div class=”kotak”></div> 4. Universal Selector Menggunakan tanda *. * { margin: 0; padding: 0; } 5. Group Selector h1, h2, h3 {
Bab 5. CSS (G. Jenis Penulisan CSS)
G. Jenis Penulisan CSS 1. Inline CSS CSS ditulis langsung pada tag HTML. <p style=”color:red;”>Halo</p> 2. Internal CSS CSS ditulis di dalam tag <style>. <style> p { color: blue; } </style> 3. External CSS CSS ditulis di file terpisah dan dipanggil dari file html. <link rel=”stylesheet” href=”style.css”>
Bab 5. CSS (H. Jenis-Jenis Properti CSS)
H. Jenis-Jenis Properti CSS Properti Latar Belakang Background : Menentukan berbagai properti latar belakang dalam satu deklarasi. background-attachment : Menentukan apakah gambar latar belakang diperbaiki atau menggulir dengan halaman web. background-color : Menentukan warna latar belakang elemen pada halaman web. background-image : Menentukan gambar latar belakang suatu elemen. background-clip : Menentukan seberapa jauh gambar latar atau warna memanjang untuk suatu elemen. background-origin Menentukan area posisi gambar latar belakang. background-position Menentukan asal dari gambar latar belakang. background-repeat Menentukan bagaimana ubin