Belajar Hari ke 6 pada
CSS Dasar: Memahami Gaya dan Penataan Dasar dalam Pengembangan Web
Pendahuluan:
Dalam artikel ini, kita akan membahas dasar-dasar CSS (Cascading Style Sheets), yaitu teknologi yang memungkinkan kita memberikan gaya dan penataan visual pada elemen HTML. Pemahaman tentang CSS sangat penting untuk membuat tampilan web yang menarik dan konsisten.
Bagian Utama:
1. Menyisipkan CSS ke dalam HTML
CSS dapat disisipkan ke dalam HTML menggunakan beberapa cara. Salah satu cara umum adalah dengan menyisipkannya langsung di dalam tag HTML menggunakan atribut style atau menyisipkan CSS secara eksternal melalui file terpisah.
Contoh penggunaan CSS internal:
html
<head>
<style>
body {
background-color: #f0f0f0;
color: #333;
font-family: 'Arial', sans-serif;
}
h1 {
color: #0077cc;
}
.box {
width: 200px;
height: 100px;
background-color: #ffcc00;
}
</style>
</head>
Contoh penggunaan CSS eksternal (dengan file "style.css"):
html
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
2. Selektor dan Deklarasi
CSS bekerja dengan menggunakan "selektor" untuk memilih elemen HTML dan "deklarasi" untuk memberikan properti dan nilai.
Contoh penggunaan selektor dan deklarasi:
css
/* Selektor: Memilih semua elemen <p> */
p {
color: #555;
font-size: 16px;
}
/* Selektor: Memilih elemen dengan class 'highlight' */
.highlight {
background-color: #ffffcc;
}
/* Selektor: Memilih elemen dengan id 'header' */
#header {
font-size: 24px;
font-weight: bold;
}
3. Box Model
Box model adalah konsep dasar dalam CSS yang mendefinisikan cara setiap elemen HTML ditempatkan dan memengaruhi tata letak. Terdiri dari margin, border, padding, dan konten.
Contoh penggunaan box model:
css
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid #333;
margin: 10px;
}
Penutup:
Dengan memahami dasar-dasar CSS, kita dapat mengontrol tampilan dan layout elemen HTML dengan lebih fleksibel. Dalam pengembangan web modern, keterampilan CSS yang baik sangat penting untuk menciptakan pengalaman pengguna yang memukau dan responsif.
Semoga artikel ini membantu Anda memahami dasar-dasar CSS dan memberikan dasar yang kokoh untuk eksplorasi lebih lanjut dalam dunia desain web.
0 Comments