Cascading Style Sheets (CSS)

Apakah CSS?

• CSS = Cascading Style Sheets
• Mengawal rupa dan format halaman web
• Memisahkan kandungan (HTML) daripada persembahan (CSS)
• Membolehkan satu fail CSS digunakan untuk banyak halaman
• Menjadikan laman web lebih menarik dan professional

Kelebihan CSS:

1. Inline CSS

CSS ditulis terus dalam tag HTML menggunakan atribut style.

<p style="color: #bf9270; font-size: 18px;">Teks berwarna</p>

2. Internal CSS

CSS ditulis dalam tag <style> di bahagian <head>.

<head>
    <style>
        p {
            color: #bf9270;
            font-size: 18px;
        }
    </style>
</head>

3. External CSS (Recommended)

CSS ditulis dalam fail berasingan (.css) dan dipautkan ke HTML.

<!-- Dalam HTML -->
<head>
    <link rel="stylesheet" href="style.css">
</head>

/* Dalam style.css */
p {
    color: #bf9270;
    font-size: 18px;
}

1. Tag Selector

Memilih semua elemen berdasarkan nama tag.

/* Pilih semua <p> */
p {
    color: #4a4a4a;
}

/* Pilih semua <h1> */
h1 {
    font-size: 36px;
    color: #bf9270;
}

2. ID Selector

Memilih satu elemen dengan ID tertentu. Gunakan #.

/* Pilih elemen dengan id="header" */
#header {
    background-color: #f8f5f1;
    padding: 20px;
}

<!-- HTML -->
<div id="header">Ini adalah header</div>

3. Class Selector

Memilih semua elemen dengan class yang sama. Gunakan .

/* Pilih semua elemen dengan class="highlight" */
.highlight {
    background-color: #ffe8d6;
    font-weight: bold;
    padding: 0.5rem;
}

<!-- HTML -->
<p class="highlight">Teks highlighted</p>
<span class="highlight">Ini juga highlighted</span>

Font Properties:

p {
    font-family: Arial, sans-serif;  /* Jenis font */
    font-size: 16px;                  /* Saiz font */
    font-weight: bold;                /* Ketebalan (normal, bold, 100-900) */
    font-style: italic;               /* Style (normal, italic, oblique) */
}

Text Properties:

p {
    color: #333333;                   /* Warna teks */
    text-align: center;               /* Alignment (left, center, right, justify) */
    text-decoration: underline;       /* Decoration (none, underline, line-through) */
    text-transform: uppercase;        /* Transform (uppercase, lowercase, capitalize) */
    line-height: 1.6;                 /* Jarak antara baris */
    letter-spacing: 2px;              /* Jarak antara huruf */
}

Contoh Kombinasi:

.heading {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 700;
    color: #bf9270;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.paragraph {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #4a4a4a;
    text-align: justify;
}

Background Color:

div {
    background-color: #fdfaf6;        /* Warna solid */
}

Background Image:

div {
    background-image: url('image.jpg');       /* Gambar background */
    background-repeat: no-repeat;             /* repeat, no-repeat, repeat-x, repeat-y */
    background-position: center;              /* Position gambar */
    background-size: cover;                   /* cover, contain, atau px */
}

Gradient Backgrounds:

/* Linear Gradient - Warm Theme */
.gradient1 {
    background: linear-gradient(135deg, #bf9270, #c77d3f);
}

/* Linear Gradient - Soft Beige */
.gradient2 {
    background: linear-gradient(to right, #fdfaf6, #f8f5f1);
}

/* Radial Gradient */
.gradient3 {
    background: radial-gradient(circle, #d4a989, #bf9270);
}

Background Shorthand:

/* Gabungkan semua dalam satu baris */
div {
    background: #f0f0f0 url('bg.jpg') no-repeat center/cover;
}

Width & Height:

div {
    width: 300px;           /* Lebar tetap */
    height: 200px;          /* Tinggi tetap */
    max-width: 100%;        /* Maksimum lebar */
    min-height: 150px;      /* Minimum tinggi */
}

Margin (Ruang Luar):

div {
    margin: 20px;           /* Semua sisi */
    margin-top: 10px;       /* Atas sahaja */
    margin-right: 15px;     /* Kanan sahaja */
    margin-bottom: 10px;    /* Bawah sahaja */
    margin-left: 15px;      /* Kiri sahaja */
    
    /* Shorthand */
    margin: 10px 15px;      /* Atas-Bawah  Kiri-Kanan */
    margin: 10px 15px 20px 25px;  /* Atas Kanan Bawah Kiri */
}

Padding (Ruang Dalam):

div {
    padding: 20px;          /* Semua sisi */
    padding-top: 10px;      /* Atas sahaja */
    padding-right: 15px;    /* Kanan sahaja */
    padding-bottom: 10px;   /* Bawah sahaja */
    padding-left: 15px;     /* Kiri sahaja */
    
    /* Shorthand */
    padding: 10px 15px;     /* Atas-Bawah  Kiri-Kanan */
}

Komponen Box Model:

Urutan dari dalam ke luar:

1. Content - Kandungan sebenar (teks, gambar, dll)
2. Padding - Ruang antara content dan border
3. Border - Garis sempadan elemen
4. Margin - Ruang di luar border

Contoh Box Model:

div {
    width: 300px;           /* Lebar content */
    height: 200px;          /* Tinggi content */
    padding: 20px;          /* Ruang dalam */
    border: 5px solid #bf9270;  /* Border */
    margin: 30px;           /* Ruang luar */
}

/* Total lebar = 300 + 20+20 + 5+5 + 30+30 = 410px */

Border Properties:

div {
    border-width: 2px;              /* Ketebalan */
    border-style: solid;            /* Style (solid, dashed, dotted, double) */
    border-color: #bf9270;          /* Warna */
    border-radius: 12px;            /* Sudut bulat */
    
    /* Shorthand */
    border: 2px solid #bf9270;
}

Border Style Types:

Border Radius (Rounded Corners):

div {
    border-radius: 8px;             /* Semua sudut */
    border-radius: 16px 16px 0 0;   /* Atas sahaja */
    border-radius: 50%;             /* Bulat penuh (circle) */
}

Individual Border:

div {
    border-top: 3px solid #bf9270;
    border-right: 2px dashed #c77d3f;
    border-bottom: 3px solid #bf9270;
    border-left: 2px dashed #c77d3f;
}

Position Types:

div {
    position: static;  /* Default, tidak perlu tulis */
}

div {
    position: relative;
    top: 10px;         /* Bergerak 10px dari atas */
    left: 20px;        /* Bergerak 20px dari kiri */
}

div {
    position: absolute;
    top: 0;
    right: 0;
}

div {
    position: fixed;
    bottom: 0;
    width: 100%;
}

div {
    position: sticky;
    top: 0;
}

Z-Index (Layer):

/* Elemen dengan z-index lebih tinggi akan berada di atas */
.layer1 {
    position: relative;
    z-index: 1;
}

.layer2 {
    position: relative;
    z-index: 2;  /* Ini akan berada di atas layer1 */
}