CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk mengatur tampilan dan tata letak dari halaman web yang ditulis dengan HTML. CSS memungkinkan pengguna untuk memisahkan antara tampilan dan struktur halaman web. Dengan memisahkan antara tampilan dan struktur, pengguna dapat dengan mudah mengubah tampilan halaman web tanpa harus mengubah struktur HTML-nya.
CSS digunakan untuk mengatur gaya visual dari elemen HTML, seperti warna, jenis font, ukuran font, tata letak, margin, padding, dan banyak lagi. CSS menggunakan aturan dan deklarasi untuk menentukan gaya elemen HTML.
Contoh deklarasi CSS:
css
Copy code
color: blue;
font-size: 14px;
background-color: #f0f0f0;
Contoh aturan CSS:
css
Copy code
p {
color: blue;
font-size: 14px;
background-color: #f0f0f0;
}
Dalam contoh aturan di atas, p adalah selektor yang menentukan elemen yang akan diberi gaya, sedangkan deklarasi seperti color: blue; menentukan gaya elemen yang dipilih.
CSS juga memungkinkan pengguna untuk menggunakan konsep seperti cascading, inheritance, dan specificity untuk menentukan urutan prioritas gaya yang akan diterapkan pada elemen HTML.
Berikut adalah contoh script CSS pada HTML yang terpisah dari file CSS external:
HTML:
php
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Contoh Script CSS pada HTML</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Contoh Script CSS pada HTML</h1>
</header>
<main>
<p class="tebal">Ini adalah contoh script CSS yang diterapkan pada HTML.</p>
<p class="merah">CSS dapat digunakan untuk mengatur gaya visual dari elemen HTML.</p>
</main>
</body>
</html>
CSS:
css
Copy code
.tebal {
font-weight: bold;
}
.merah {
color: red;
}
header {
background-color: #f0f0f0;
padding: 20px;
}
Dalam contoh di atas, file CSS style.css dihubungkan dengan HTML menggunakan tag <link> pada bagian <head> dari HTML. CSS kemudian digunakan untuk mengatur tampilan elemen HTML seperti <p> dan <header>, dimana kelas tebal diberi gaya font-weight: bold, dan kelas merah diberi gaya warna teks merah. Selain itu, elemen <header> juga diberi gaya background-color dan padding menggunakan selector header.
Komentar
Posting Komentar