Pengantar CSS PDF

Apa itu CSS? CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk mengatur tampilan halaman web. Dengan CSS, kita bisa mengubah warna, ukuran font, tata letak, dan banyak lagi aspek visual dari sebuah website. Cara Menulis CSS di HTML Ada 3 cara utama untuk menulis CSS:...

Apa itu CSS? CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk mengatur tampilan halaman web. Dengan CSS, kita bisa mengubah warna, ukuran font, tata letak, dan banyak lagi aspek visual dari sebuah website. Cara Menulis CSS di HTML Ada 3 cara utama untuk menulis CSS: 1. Internal Stylesheet: Ditulis langsung di dalam tag dari file HTML. 2. External Stylesheet: Ditulis dalam file terpisah dengan ekstensi.css dan dihubungkan dengan file HTML menggunakan tag. 3. Inline Styles: Ditulis langsung di dalam tag HTML yang ingin digayakan menggunakan atribut style. Sintaks Dasar CSS Sintaks dasar CSS terdiri dari: Selector: Menentukan elemen HTML mana yang akan digayakan. Property: Menentukan sifat atau karakteristik yang akan diubah. Value: Menentukan nilai untuk property tersebut. Contoh: p{ color: blue; font-size: 16px; } Kode di atas akan membuat semua paragraf (elemen ) berwarna biru dengan ukuran font 16px. Memahami Selector Selector digunakan untuk memilih elemen HTML yang akan digayakan. Beberapa jenis selector yang umum: Element Selector: Memilih semua elemen dengan nama tag tertentu (misal: p, h1, div). ID Selector: Memilih elemen dengan ID tertentu (misal: #myDiv). Class Selector: Memilih elemen dengan kelas tertentu (misal:.myClass). Menggunakan Warna di CSS Untuk mengatur warna, gunakan property color. Kamu bisa menggunakan nama warna (misal: red, blue), kode HEX (misal: #FF0000), atau nilai RGB (misal: rgb(255, 0, 0)). Menggunakan Background Property background digunakan untuk mengatur latar belakang elemen. Kamu bisa mengatur warna, gambar, ukuran, dan posisi background. Text Formatting Untuk mengatur tampilan teks, gunakan property seperti: font-family: Mengatur jenis font. font-size: Mengatur ukuran font. font-weight: Mengatur tebal tipis font. text-align: Mengatur perataan teks. Menggunakan Font Selain font-family, kamu juga bisa menggunakan font-style untuk mengatur jenis font (normal, italic), dan text-decoration untuk menambahkan garis bawah atau coretan. Menggunakan Garis (Border) Property border digunakan untuk membuat garis di sekitar elemen. Kamu bisa mengatur tebal, gaya, dan warna garis. Menentukan Ukuran Elemen Gunakan property width dan height untuk mengatur lebar dan tinggi elemen. Property padding digunakan untuk menambahkan ruang kosong di dalam elemen, sedangkan margin digunakan untuk menambahkan ruang kosong di luar elemen. Box Model Box model adalah konsep penting dalam CSS yang menjelaskan bagaimana elemen HTML ditampilkan. Setiap elemen HTML dapat dianggap sebagai sebuah kotak yang terdiri dari content, padding, border, dan margin. CSS Shadow CSS Shadow digunakan untuk memberikan efek bayangan pada elemen. Ada dua jenis utama: Box Shadow: Memberikan bayangan pada seluruh elemen. Text Shadow: Memberikan bayangan pada teks. Contoh CSS Shadow:.box { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); }