CSS (Cascading Style Sheets) adalah salah satu teknologi yang digunakan pada bahasa HTML untuk mengatur tampilan dan gaya dari halaman web. Dalam pengembangan web modern, HTML dan CSS digunakan secara bersamaan untuk memisahkan konten (HTML) dari presentasi (CSS) pada halaman web. Berikut ini adalah beberapa hal penting yang perlu diketahui tentang CSS dan penggunaannya pada HTML:
Penggunaan CSS pada HTML
CSS dapat digunakan pada HTML melalui dua cara, yaitu dengan menulis kode CSS secara internal atau eksternal.
Cara pertama, yaitu dengan menulis kode CSS secara internal pada bagian <head> dari halaman HTML. Berikut ini adalah contoh penggunaan CSS internal pada HTML:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Halaman Web</title>
<style>
body {
background-color: #F5F5F5;
font-family: Arial, sans-serif;
font-size: 16px;
}
h1 {
color: #333333;
font-size: 32px;
}
</style>
</head>
<body>
<h1>Selamat Datang di Halaman Web Saya</h1>
<p>Ini adalah contoh halaman web yang dibuat dengan HTML dan CSS.</p>
</body>
</html>
Pada contoh di atas, kode CSS dituliskan pada bagian <style> di dalam bagian <head> dari halaman HTML.
Cara kedua adalah dengan menuliskan kode CSS pada file terpisah (eksternal) dengan menggunakan tag <link>. Berikut ini adalah contoh penggunaan CSS eksternal pada HTML:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Halaman Web</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Selamat Datang di Halaman Web Saya</h1>
<p>Ini adalah contoh halaman web yang dibuat dengan HTML dan CSS.</p>
</body>
</html>
Pada contoh di atas, file CSS yang digunakan disimpan pada file dengan nama "style.css".
Selektor CSS
Selektor CSS digunakan untuk menentukan elemen mana yang akan diberikan gaya atau tampilan tertentu. Ada beberapa jenis selektor CSS yang dapat digunakan, antara lain:
Selektor Elemen (Element Selector)
Selektor ini digunakan untuk memilih elemen HTML berdasarkan nama elemennya. Contohnya adalah sebagai berikut:
p { color: red; }
Selektor ID (ID Selector)
Selektor ini digunakan untuk memilih elemen HTML berdasarkan ID yang diberikan. ID adalah atribut unik pada elemen HTML. Contohnya adalah sebagai berikut:
#judul { font-size: 24px; }
Selektor Kelas (Class Selector)
Selektor ini digunakan untuk memilih elemen HTML berdasarkan kelas yang diberikan. Kelas adalah atribut pada elemen HTML yang dapat digunakan pada beberapa elemen yang berbeda. Contohnya adalah sebagai berikut:
.warning { color: yellow; background-color: red; }
Properti CSS
Properti CSS digunakan untuk menentukan gaya atau tampilan dari elemen HTML yang dipilih dengan menggunakan selektor CSS. Ada banyak jenis Properti CSS yang bisa digunakan diantaranya adalah
color
Properti ini digunakan untuk menentukan warna teks dari elemen HTML yang dipilih.
p { color: red; }
background-color
Properti ini digunakan untuk menentukan warna latar belakang dari elemen HTML yang dipilih.
body { background-color: #F5F5F5; }
font-family
Properti ini digunakan untuk menentukan jenis font yang digunakan pada elemen HTML yang dipilih.
p { font-family: Arial, sans-serif; }
font-size
Properti ini digunakan untuk menentukan ukuran font pada elemen HTML yang dipilih.
h1 { font-size: 32px; }
font-weight
Properti ini digunakan untuk menentukan ketebalan font pada elemen HTML yang dipilih.
p { font-weight: bold; }
text-align
Properti ini digunakan untuk menentukan penataan teks pada elemen HTML yang dipilih.
p { text-align: center; }
Itu sebagian penjelasan tentang CSS dan Properti CSS yang lebih detailnya akan di bahas pada halaman terpisah di bawah ini