Lembar Gaya Bertingkat (CSS) adalah bahasa yang digunakan untuk mendesain tampilan dan tata letak situs web. Jika HTML adalah kerangka halaman web, maka CSS adalah pakaian dan gaya yang memberikan tampilan menarik. Artikel ini ditujukan untuk pemula yang ingin memahami dasar-dasar CSS dan mengambil langkah pertama menuju desain web profesional.
Apa itu CSS?
CSS adalah singkatan dari Lembar Gaya Bertingkat dan digunakan untuk mengontrol tampilan elemen HTML. Dengan CSS Anda dapat mengubah warna, font, spasi, latar belakang, dan banyak lagi. CSS memisahkan konten (HTML) dari desain, membuat kode lebih jelas dan mudah dipelihara.
Bagaimana Anda memasukkan CSS?
Ada tiga cara untuk memasukkan CSS dalam halaman HTML:
CSS sebaris: Langsung di tag HTML.
Contoh:
<p style=”color: blue;”>Teks ini berwarna biru.</p>
CSS Internal: Dalam satu <gaya>-Tag saya <kepala>-Daerah.
Contoh:
<gaya>
P {
warna: hijau;
}
</gaya>
Eksternal CSS: Menautkan file CSS eksternal. Cara ini adalah yang paling direkomendasikan.
Contoh:
<link rel=”stylesheet” href=”style.css”>
Struktur dasar CSS
CSS terdiri dari pemilih dan deklarasi.
Contoh:
jam1 {
warna: merah;
ukuran font: 24px;
}
h1 adalah Pemilih (elemen HTML yang sedang ditata).
Mereka berada dalam tanda kurung kurawal Deklarasi, terdiri dari Karakteristik (warna, ukuran font) Dan nilai-nilai (merah, 24 piksel).
Properti CSS yang umum digunakan
warna: Warna teks.
warna latar belakang: warna latar belakang.
font-keluarga: huruf.
ukuran font: ukuran font.
batas: Jarak luar.
lapisan: Spasi dalam.
berbatasan: Bingkai.
perataan teks: Perataan teks (misalnya kiri, kanan, tengah).
Contoh sederhana
<!DOCTYPEhtml>
<html>
<kepala>
<gaya>
tubuh {
warna latar belakang: #f0f0f0;
keluarga font: Arial, sans-serif;
}
jam1 {
warna: biru tua;
perataan teks: tengah;
}
P {
warna: #333;
bantalan: 10 piksel;
}
</gaya>
</kepala>
<tubuh>
<h1>Selamat datang di dunia CSS!</h1>
<p>Ini adalah paragraf pertama Anda dengan gaya CSS.</p>
</tubuh>
</html>
Kiat untuk pemula
Gunakan alat pengembang browser Anda: Klik kanan → Menyelidikiuntuk mengedit CSS langsung secara langsung.
Gunakan kelas dan ID: Ini memungkinkan Anda mendesain elemen tertentu secara spesifik.
Pelajari sistem Flexbox dan Grid: Teknik tata letak modern ini membantu Anda membuat desain responsif.
Latihan, latihan, latihan: Mulailah dengan proyek kecil seperti halaman profil pribadi.
Kesimpulan
CSS adalah keterampilan penting bagi siapa saja yang ingin mendesain situs web. Dengan pemahaman tentang penyeleksi, properti, dan struktur yang tepat, Anda akan diperlengkapi dengan baik untuk menerapkan desain yang menarik. Jangan ragu untuk bereksperimen dan mempelajari hal baru – dunia desain web terus berkembang.
