Pengenalan CSS

1. Struktur Dasar CSS

CSS ditulis dalam format aturan (rules). Setiap aturan terdiri dari dua bagian utama:

Selektor: Menentukan elemen HTML yang akan diberi style.
Deklarasi: Menentukan property dan value yang akan diterapkan pada elemen yang dipilih.

Contoh:

selector {
    property: value;
}

Misalnya, untuk mengubah warna teks dalam elemen <p> menjadi merah:

p {
    color: red;
}

2. Cara Menyisipkan CSS ke dalam HTML

Ada tiga cara utama untuk menyisipkan CSS dalam halaman HTML:

a. Inline CSS

CSS ditulis langsung di dalam tag HTML menggunakan atribut style.

Contoh:

<p style="color: red;">Ini adalah paragraf dengan teks berwarna merah.</p>

b. Internal CSS

CSS ditulis di dalam tag <style> yang diletakkan di dalam tag <head> pada dokumen HTML.

Contoh:

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>Ini adalah paragraf dengan teks berwarna merah.</p>
</body>
</html>

c. External CSS

CSS disimpan di file terpisah dengan ekstensi .css dan dipanggil ke dalam dokumen HTML menggunakan tag <link>.

Contoh file CSS (styles.css):

p {
    color: red;
}

Contoh file HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>Ini adalah paragraf dengan teks berwarna merah.</p>
</body>
</html>

3. Selektor CSS

Selektor digunakan untuk memilih elemen HTML yang ingin diberikan style. Beberapa jenis selektor CSS antara lain:

Selektor elemen: Memilih elemen berdasarkan tag HTML-nya.
```
p {
    color: blue;
}
```
Selektor ID: Memilih elemen berdasarkan ID-nya, dengan menggunakan tanda # sebelum ID.
```
#header {
    font-size: 20px;
}
```
Selektor kelas: Memilih elemen berdasarkan kelas, dengan menggunakan tanda . sebelum nama kelas.
```
.button {
    background-color: green;
}
```
Selektor atribut: Memilih elemen berdasarkan atribut tertentu.
```
input[type="text"] {
    border: 1px solid black;
}
```

4. Properti CSS Dasar

Beberapa properti CSS dasar yang sering digunakan adalah:

color: Menentukan warna teks.
background-color: Menentukan warna latar belakang elemen.
font-size: Menentukan ukuran font.
font-family: Menentukan jenis font.
margin: Menentukan ruang di luar elemen.
padding: Menentukan ruang di dalam elemen.
border: Menentukan garis batas di sekitar elemen.
width dan height: Menentukan lebar dan tinggi elemen.

Contoh:

p {
    color: blue;
    font-size: 18px;
    margin: 20px;
}

5. Model Box CSS

Setiap elemen HTML dianggap sebagai "box". CSS menyediakan properti untuk mengatur ukuran dan ruang di sekitar box ini, termasuk:

Content: Area tempat konten elemen berada.
Padding: Ruang antara konten dan border.
Border: Garis yang mengelilingi elemen.
Margin: Ruang di luar border.

6. Mengatur Layout dengan CSS

Untuk mengatur layout halaman web, CSS menyediakan beberapa teknik:

Flexbox: Metode layout yang memudahkan pengaturan elemen dalam baris atau kolom.
Grid: Teknik layout yang memungkinkan pembuatan grid 2D dengan baris dan kolom.
Positioning: Mengatur posisi elemen menggunakan properti seperti static, relative, absolute, dan fixed.

7. Responsive Design

CSS memungkinkan pembuatan desain yang responsif, yaitu desain yang menyesuaikan dengan berbagai ukuran layar perangkat (desktop, tablet, ponsel). Teknik yang digunakan adalah:

Media Queries: Digunakan untuk menetapkan aturan CSS yang berbeda berdasarkan ukuran layar atau perangkat.

Contoh:

@media screen and (max-width: 600px) {
    p {
        font-size: 14px;
    }
}

CSS adalah alat yang sangat kuat untuk menata halaman web, dan pemahaman dasar CSS ini sangat penting bagi siapa saja yang ingin membuat halaman web yang menarik dan responsif.

PreviousPengenalan HTML NextTugas Pembelajaran CSS

Last updated 4 months ago

Pengenalan CSS

1. Struktur Dasar CSS

CSS ditulis dalam format aturan (rules). Setiap aturan terdiri dari dua bagian utama:

Selektor: Menentukan elemen HTML yang akan diberi style.
Deklarasi: Menentukan property dan value yang akan diterapkan pada elemen yang dipilih.

Contoh:

selector {
    property: value;
}

Misalnya, untuk mengubah warna teks dalam elemen <p> menjadi merah:

p {
    color: red;
}

2. Cara Menyisipkan CSS ke dalam HTML

Ada tiga cara utama untuk menyisipkan CSS dalam halaman HTML:

a. Inline CSS

CSS ditulis langsung di dalam tag HTML menggunakan atribut style.

Contoh:

<p style="color: red;">Ini adalah paragraf dengan teks berwarna merah.</p>

b. Internal CSS

CSS ditulis di dalam tag <style> yang diletakkan di dalam tag <head> pada dokumen HTML.

Contoh:

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>Ini adalah paragraf dengan teks berwarna merah.</p>
</body>
</html>

c. External CSS

CSS disimpan di file terpisah dengan ekstensi .css dan dipanggil ke dalam dokumen HTML menggunakan tag <link>.

Contoh file CSS (styles.css):

p {
    color: red;
}

Contoh file HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>Ini adalah paragraf dengan teks berwarna merah.</p>
</body>
</html>

3. Selektor CSS

Selektor digunakan untuk memilih elemen HTML yang ingin diberikan style. Beberapa jenis selektor CSS antara lain:

Selektor elemen: Memilih elemen berdasarkan tag HTML-nya.
```
p {
    color: blue;
}
```
Selektor ID: Memilih elemen berdasarkan ID-nya, dengan menggunakan tanda # sebelum ID.
```
#header {
    font-size: 20px;
}
```
Selektor kelas: Memilih elemen berdasarkan kelas, dengan menggunakan tanda . sebelum nama kelas.
```
.button {
    background-color: green;
}
```
Selektor atribut: Memilih elemen berdasarkan atribut tertentu.
```
input[type="text"] {
    border: 1px solid black;
}
```

4. Properti CSS Dasar

Beberapa properti CSS dasar yang sering digunakan adalah:

color: Menentukan warna teks.
background-color: Menentukan warna latar belakang elemen.
font-size: Menentukan ukuran font.
font-family: Menentukan jenis font.
margin: Menentukan ruang di luar elemen.
padding: Menentukan ruang di dalam elemen.
border: Menentukan garis batas di sekitar elemen.
width dan height: Menentukan lebar dan tinggi elemen.

Contoh:

p {
    color: blue;
    font-size: 18px;
    margin: 20px;
}

5. Model Box CSS

Setiap elemen HTML dianggap sebagai "box". CSS menyediakan properti untuk mengatur ukuran dan ruang di sekitar box ini, termasuk:

Content: Area tempat konten elemen berada.
Padding: Ruang antara konten dan border.
Border: Garis yang mengelilingi elemen.
Margin: Ruang di luar border.

6. Mengatur Layout dengan CSS

Untuk mengatur layout halaman web, CSS menyediakan beberapa teknik:

Flexbox: Metode layout yang memudahkan pengaturan elemen dalam baris atau kolom.
Grid: Teknik layout yang memungkinkan pembuatan grid 2D dengan baris dan kolom.
Positioning: Mengatur posisi elemen menggunakan properti seperti static, relative, absolute, dan fixed.

7. Responsive Design

CSS memungkinkan pembuatan desain yang responsif, yaitu desain yang menyesuaikan dengan berbagai ukuran layar perangkat (desktop, tablet, ponsel). Teknik yang digunakan adalah:

Media Queries: Digunakan untuk menetapkan aturan CSS yang berbeda berdasarkan ukuran layar atau perangkat.

Contoh:

@media screen and (max-width: 600px) {
    p {
        font-size: 14px;
    }
}

CSS adalah alat yang sangat kuat untuk menata halaman web, dan pemahaman dasar CSS ini sangat penting bagi siapa saja yang ingin membuat halaman web yang menarik dan responsif.

PreviousPengenalan HTML NextTugas Pembelajaran CSS

Last updated 4 months ago