Sekarang kita akan melanjutkan ke bagian berikutnya, yaitu **CSS3**, untuk mempercantik halaman HTML yang sudah kamu buat.
Pengenalan CSS dan Dasar-dasar Styling**
1. **Apa itu CSS?**
- CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendesain dan mempercantik tampilan halaman web. Dengan CSS, kamu dapat mengontrol layout, warna, font, dan banyak elemen visual lainnya.
2. **Menambahkan CSS ke HTML**
- Ada tiga cara untuk menambahkan CSS ke halaman HTML:
1. **Inline CSS**: Diterapkan langsung pada elemen HTML.
```html
<h1 style="color: blue;">Judul</h1>
```
2. **Internal CSS**: Ditempatkan di dalam tag `<style>` di bagian `<head>`.
```html
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
```
3. **External CSS**: Menggunakan file CSS terpisah. Misalnya, jika file CSS bernama `styles.css`, kamu bisa menambahkannya seperti ini:
```html
<head>
<link rel="stylesheet" href="styles.css">
</head>
```
3. **Sintaks Dasar CSS**
- CSS menggunakan **selektor** untuk memilih elemen yang ingin di-styling.
- Contoh:
```css
/* Selektor untuk semua <h1> */
h1 {
color: blue; /* Mengubah warna teks menjadi biru */
font-size: 24px; /* Mengubah ukuran font */
}
```
4. **Box Model**
- Setiap elemen HTML dapat dianggap sebagai kotak. **Box model** terdiri dari:
- **Content**: Isi dari elemen (teks, gambar, dll).
- **Padding**: Ruang di dalam elemen, antara konten dan border.
- **Border**: Garis yang mengelilingi padding.
- **Margin**: Ruang di luar elemen, antara elemen dan elemen lainnya.
- Contoh CSS box model:
```css
p {
margin: 20px; /* Mengatur margin luar */
padding: 10px; /* Mengatur padding dalam */
border: 1px solid black; /* Mengatur border */
}
```
5. **Styling Dasar**
- **Warna**: Bisa menggunakan nama warna, kode hex, atau RGB.
```css
body {
background-color: #f0f0f0; /* Warna latar belakang */
}
```
- **Font**: Mengatur jenis dan ukuran font.
```css
h1 {
font-family: Arial, sans-serif; /* Mengatur jenis font */
font-size: 32px; /* Mengatur ukuran font */
}
```
6. **Flexbox**
- Flexbox adalah model layout yang memungkinkan elemen dalam kontainer untuk diatur secara fleksibel.
- Contoh:
```css
.container {
display: flex; /* Mengaktifkan flexbox */
justify-content: center; /* Mengatur elemen ke tengah */
align-items: center; /* Mengatur elemen secara vertikal ke tengah */
}
```
