Mengenal Dasar CSS
Artikel ini adalah lanjutan dari Mengenal Dasar-dasar & Fungsi HTML. Jika kau belum membaca bagian itu, disarankan untuk mulai dari sana dulu.
1. Apa Itu CSS?
CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan elemen HTML, seperti warna, ukuran, jarak, dan posisi. Dengan CSS, tampilan website menjadi lebih menarik dan profesional.
<p style="color: red;">Teks ini merah</p>2. Cara Menyisipkan CSS
- Inline CSS: Langsung di elemen HTML
<h1 style="color: blue;">Judul</h1>- Internal CSS: Di dalam tag <style> di bagian <head>
<style>
p {
color: green;
}
</style>- External CSS: File CSS terpisah
/* style.css */
body {
background-color: #f4f4f4;
}<link rel="stylesheet" href="style.css">3. Dasar Penulisan CSS
selector {
property: value;
}
/* contoh */
h1 {
color: red;
font-size: 30px;
}4. Properti CSS Populer
| Properti | Fungsi |
|---|---|
| color | Warna teks |
| background | Warna latar |
| font-size | Ukuran teks |
| margin | Jarak luar elemen |
| padding | Jarak dalam elemen |
| border | Garis tepi elemen |
| text-align | Posisi teks (kiri, tengah, kanan) |
5. Selektor CSS Umum
| Selektor | Fungsi |
|---|---|
| p | Memilih semua paragraf |
| .kelas | Memilih elemen dengan class tertentu |
| #id | Memilih elemen dengan ID tertentu |
| div > p | Memilih paragraf anak langsung dari div |
| a:hover | Saat kursor menyentuh link |
Penutup
CSS adalah pondasi penting dalam membangun web yang menarik. Di artikel berikutnya, kita akan buat mini project pakai CSS dan HTML seperti halaman profil, kartu produk, atau landing page mini.
Tetap ngoding dan jangan lupa ngopi, brok!
Author: Nyx6st
Posting Komentar