Penjelasan Dan Struktur Dasar CSS Di Dalam Website

CSS (Cascading Style Sheets) adalah bahasa desain yang digunakan untuk menggubah tampilan dan format suatu dokumen yang ditulis dalam HTML atau XML. CSS memungkinkan pemisahan antara struktur dan presentasi dari sebuah halaman web, memungkinkan pengembang untuk membuat tata letak dan gaya yang konsisten di seluruh situs web. Berikut adalah penjelasan tentang CSS dan struktur dasar CSS:

CSS (Cascading Style Sheets):

1. Selektor:

Selektor CSS digunakan untuk menentukan elemen HTML yang akan diberi gaya.
Contoh:


body {
    font-family: Arial, sans-serif;
}

.judul {
    color: #3366cc;
}

2. Properti dan Nilai:

Properti adalah atribut yang akan diubah, sedangkan nilai adalah nilai yang diberikan kepada properti tersebut.
Contoh:


h1 {
    font-size: 24px;
    margin-bottom: 10px;
}

.konten {
    background-color: #f5f5f5;
    padding: 15px;
}

3. Komentar:

Komentar dalam CSS dimulai dengan /* dan diakhiri dengan */.
Contoh:


/* Ini adalah komentar dalam CSS */

4. Model Kotak:

CSS mengelola tata letak elemen HTML melalui model kotak, yang mencakup properti seperti width, height, margin, padding, dan border.
Contoh:


.kotak {
    width: 200px;
    height: 150px;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
}

5. Pseudo-class dan Pseudo-element:

CSS mendukung penggunaan pseudo-class (seperti :hover) dan pseudo-element (seperti ::before) untuk memberikan gaya berdasarkan kondisi atau lokasi elemen.
Contoh:


a:hover {
    color: #ff0000;
}

p::first-line {
    font-weight: bold;
}

Struktur Dasar CSS:

1. Penyisipan CSS:

CSS dapat disisipkan langsung dalam dokumen HTML menggunakan tag <style> di dalam bagian <head>.
Contoh:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* CSS disisipkan di sini */
    </style>
    <title>Contoh Halaman</title>
</head>
<body>
    <!-- Konten HTML -->
</body>
</html>

2. Penentuan Gaya pada Elemen:

Gaya dapat ditentukan langsung pada elemen HTML menggunakan atribut style.
Contoh:


<p style="color: #008000; font-size: 16px;">Ini adalah paragraf berwarna hijau.</p>

5. Eksternal Stylesheet:

Gaya dapat dipisahkan ke dalam file eksternal dengan ekstensi .css dan disisipkan dalam HTML menggunakan tag <link>.
Contoh:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Contoh Halaman</title>
</head>
<body>
    <!-- Konten HTML -->
</body>
</html>

Dengan struktur dasar ini, Anda dapat memahami cara menggunakan CSS untuk mengubah tampilan dan gaya elemen HTML dalam halaman web Anda. Penting untuk menciptakan kode Anda sendiri dan menghindari plagiat dalam pengembangan web.