MATERI TENTANG CSS


1. Pengertian CSS

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan atau gaya (style) dari elemen-elemen yang ditulis dalam HTML.
Dengan CSS, kamu bisa mengatur warna, ukuran, posisi, font, dan tata letak halaman web agar lebih menarik.

2. Fungsi CSS

  •  Mengatur tampilan halaman web (warna, font, background, layout)
  • Memisahkan konten (HTML) dengan tampilan (CSS)
  •  Menghemat waktu, karena satu file CSS bisa digunakan untuk banyak halaman
  •  Membuat tampilan responsif (menyesuaikan layar HP, tablet, laptop)

3. Cara Menyisipkan CSS

Ada 3 cara untuk menggunakan CSS:

a. Inline CSS

Langsung di dalam tag HTML dengan atribut style

<p style="color: blue; font-size: 16px;">Teks ini berwarna biru</p>

b. Internal CSS

Ditulis di dalam tag <style> di bagian <head> dokumen HTML

<head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>

c. External CSS

Ditulis di file terpisah (misalnya style.css) lalu dihubungkan dengan tag <link>

<link rel="stylesheet" href="style.css">

Isi style.css:

p {
  color: blue;
  font-size: 16px;
}

4. Struktur Dasar CSS

selector {
  property: value;
}

Contoh:

h1 {
  color: red;
  text-align: center;
}

Artinya: tag <h1> akan berwarna merah dan teksnya di tengah.

5. Jenis Selector di CSS

Jenis Selector Contoh Keterangan
Tag selector p {} Memilih semua tag <p>
Class selector .judul {} Digunakan dengan class (pakai .)
ID selector #header {} Digunakan dengan id (pakai #)
Universal selector * {} Menerapkan ke semua elemen
Group selector h1, h2, h3 {} Mengatur beberapa elemen sekaligus

6. Properti CSS Umum

Warna & Latar

color: red;
background-color: yellow;

Teks & Font

font-size: 20px;
font-family: Arial, sans-serif;
text-align: center;
font-weight: bold;

 Ukuran & Jarak

width: 300px;
height: 200px;
margin: 10px;
padding: 20px;

 Border (Garis Pinggir)

border: 2px solid black;
border-radius: 10px;

Layout (Tata Letak)

display: flex;
justify-content: center;
align-items: center;
position: absolute;

7. Responsif dengan Media Query

Untuk menyesuaikan tampilan di berbagai ukuran layar:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

8. Keuntungan Menggunakan CSS

  • Desain konsisten di seluruh halaman
  • Lebih mudah dikelola dan diedit
  • Mendukung animasi dan efek transisi
  • Membuat website modern dan interaktif

9. Contoh Lengkap

<!DOCTYPE html>
<html>
<head>
  <title>Belajar CSS</title>
  <style>
    body {
      background-color: #f0f0f0;
      font-family: Arial;
    }
    h1 {
      color: blue;
      text-align: center;
    }
    p {
      color: #333;
      text-align: justify;
    }
  </style>
</head>
<body>
  <h1>Halo, CSS!</h1>
  <p>Ini adalah contoh sederhana penggunaan CSS.</p>
</body>
</html

Komentar

Posting Komentar