Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mengatur tampilan elemen HTML pada halaman web. Dengan CSS, Anda dapat mengatur warna, font, ukuran, posisi, dan banyak lagi. Dalam tutorial ini, kita akan membahas langkah-langkah dasar untuk belajar bahasa CSS.
- Memahami Konsep Dasar CSS
Sebelum mulai belajar bahasa CSS, penting untuk memahami konsep dasar. Pertama, CSS terdiri dari tiga bagian utama: selektor, properti, dan nilai. Selektor digunakan untuk memilih elemen HTML yang ingin diatur tampilannya. Properti digunakan untuk menentukan apa yang ingin diatur pada elemen HTML, seperti warna atau ukuran font. Nilai digunakan untuk menentukan nilai dari properti, seperti merah atau 14px.
Contoh:
p {
color: blue;
font-size: 16px;
}
Dalam contoh di atas, p adalah selektor, color dan font-size adalah properti, dan blue dan 16px adalah nilai.
- Menerapkan CSS di HTML
Setelah memahami konsep dasar, langkah selanjutnya adalah menerapkan CSS di HTML. Ada beberapa cara untuk menerapkan CSS, namun cara yang paling umum adalah dengan menggunakan tag <style> dalam bagian <head> dari halaman HTML. Berikut adalah contoh kode untuk menerapkan CSS secara internal di halaman HTML:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Halaman Web</title>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>Ini adalah contoh teks</p>
</body>
</html>
Hasilnya seperti dibawah ini
Ini adalah contoh teks
Dalam contoh di atas, CSS diaplikasikan secara internal di halaman HTML dengan menggunakan tag <style> dalam bagian <head>. Selektor p digunakan untuk memilih elemen paragraf dan properti color dan font-size digunakan untuk mengatur warna dan ukuran font.
- Menggunakan Selektor CSS
Selektor digunakan untuk memilih elemen HTML yang ingin diatur tampilannya. Ada beberapa jenis selektor yang dapat digunakan, namun yang paling umum adalah selektor tipe dan selektor kelas.
- Selektor Tipe
Selektor tipe digunakan untuk memilih semua elemen dengan jenis yang sama. Contoh, selektor p akan memilih semua elemen paragraf di halaman web.
Contoh:
p {
color: blue;
font-size: 16px;
}
- Selektor Kelas
Selektor kelas digunakan untuk memilih elemen HTML dengan atribut class. Dalam HTML, atribut class digunakan untuk memberikan nama kelas pada elemen tertentu. Dalam CSS, selektor kelas didefinisikan dengan menggunakan titik (.) sebelum nama kelas.
Contoh:
.red {
color: red;
font-size: 18px;
}
Dalam contoh di atas, selektor .red akan memilih semua elemen dengan atribut class="red" dan mengatur warna dan ukuran font menjadi merah dan 18px.
.
Halaman Selanjutnya:
