Belajar CSS

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

<!-- 1) inline: pada elemen -->
<h1 style="color: blue;">Judul biru</h1>

<!-- 2) internal: di head -->
<style>
  h1 { color: green; }
</style>

<!-- 3) external: berkas terpisah -->
<link rel="stylesheet" href="style.css">

<!-- index.html -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

/* style.css */
body {
  background: #35A9DB;
  color: #fff;
  font-family: sans-serif;
}

.hero {
  height: 100vh;         /* setinggi layar */
  padding: 5vh 5vw;      /* jarak ikut ukuran layar */
}

.artikel {
  font-size: 1.1rem;     /* konsisten di mana pun */
  max-width: 70ch;       /* ±70 karakter per baris */
}

.avatar {
  width: 64px;           /* tetap, tak terpengaruh font */
  border: 2px solid #333;
}

ul { font-size: 1.2em; }
li { font-size: 1.2em; } /* li di ul makin besar terus */

/* perbaikannya: */
ul { font-size: 1.2rem; }
li { font-size: 1rem; }

:root {
  --utama: hsl(14, 100%, 60%);
  --utama-tua: hsl(14, 100%, 45%);
}

.tombol {
  background: var(--utama);
  color: #fff;
}
.tombol:hover { background: var(--utama-tua); }

.overlay {
  background: rgba(0, 0, 0, 0.45);  /* gelap tanpa memudarkan teks anak */
}

.ikon {
  color: teal;
  border: 2px solid currentColor;  /* selalu senada teks */
}

p { color: #596970; }
.kartu { color: #263744; }
.kartu strong { color: #c7603e; }

/* kombinator */
.menu > li      { font-weight: bold; }
h2 + p          { text-indent: 0; }

/* struktural */
tr:nth-child(even) { background: #f2f7f9; }
li:not(.aktif)     { opacity: 0.55; }

/* atribut */
input[type="email"]   { border-color: teal; }
a[href^="https"]::after { content: " ↗"; }

<input type="checkbox" id="saklar">
<label for="saklar">Tampilkan detail</label>

<div class="detail">Teks rahasia di sini.</div>

.tautan-selengkapnya::after {
  content: " →";
  color: #c7603e;
}

blockquote::before {
  content: "\201C";        /* tanda kutip besar */
  font-size: 3em;
  color: #bbb;
  float: left;
  margin-right: 6px;
}

input::placeholder { color: #9aa5ab; }
p::selection { background: #ffe9a8; }

.kartu { position: relative; }

.kartu::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px dashed currentColor;
  border-radius: 8px;
  pointer-events: none;   /* hantu: tak menghalangi klik */
}

body {
  background: #35A9DB;
  color: #fff;
}

.hero {
  background: url('pemandangan.jpg') center / cover no-repeat;
  height: 300px;
}

.kartu {
  background: linear-gradient(to right, #ffd89b, #19547b);
}

.judul {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 2px 2px #ccc;
}

.artikel {
  text-align: justify;
  text-indent: 30px;
  line-height: 1.8;
}

.harga-lama {
  text-decoration: line-through;
  color: gray;
}

body {
  font-family: "Segoe UI", sans-serif;
  font-size: 17px;
}

h1 { font-weight: 800; }

blockquote { font-style: italic; }

@font-face {
  font-family: "TulisanKeren";
  src: url("font/wolf.ttf");
}

.judul-unik {
  font-family: "TulisanKeren", cursive;
  font-size: 44px;
}

a.tombol,
a.tombol:link,
a.tombol:visited {
  display: inline-block;
  padding: 10px 22px;
  background: #1ABC9C;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}

a.tombol:hover {
  background: #148f77;
}

a.tombol:active {
  background: #0e6251;
}

* { box-sizing: border-box; }

.kartu {
  width: 280px;
  padding: 20px;
  border: 2px solid #56636a;
  margin: 16px;
}

.geser { margin-left: -8px; }   /* menyenggol ke kiri */

.tengah {
  width: 600px;
  margin: 0 auto;              /* rata tengah horizontal */
}

.garis-satu   { border: 1px solid blue; }
.garis-dua    { border: 10px dotted green; }
.garis-tiga   { border: 3px dashed #ff6b35; }
.garis-empat  { border: 6px double purple; }

.kartu-aksen {
  border-bottom: 4px solid teal;
  border-radius: 8px;
}

.kartu {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),    /* lapis dekat tajam */
    0 8px 24px rgba(0, 0, 0, 0.12);   /* lapis jauh lembut */
}

.kartu:hover {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 14px 32px rgba(0, 0, 0, 0.16);
}

.input-cekung {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #1c2833;
  padding: 12px 20px;
}

.kartu { position: relative; }

.badge {
  position: absolute;
  top: -8px; right: -8px;
  background: #e74c3c;
  color: #fff;
  border-radius: 50%;
  padding: 4px 8px;
  font-size: 12px;
}

.navbar {
  position: fixed;
  z-index: 100;   /* tingkat: navigasi */
}

.dropdown {
  position: absolute;
  z-index: 110;   /* sedikit di atas navbar */
}

.modal {
  position: fixed;
  z-index: 1000;  /* tingkat: jendela modal */
}

.toast {
  position: fixed;
  z-index: 2000;  /* tingkat: notifikasi teratas */
}

.gambar-postingan {
  float: left;
  width: 240px;
  margin: 0 18px 8px 0;  /* kanan-bawah agar teks tidak menempel */
}

.bawah { clear: both; }

.judul-satu-baris {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

pre.kode {
  overflow-x: auto;         /* kode panjang digulir */
}

.panel-chat {
  max-height: 320px;
  overflow-y: auto;         /* isi bertambah, kotak menggulir */
}

.thumbnail {
  width: 240px;
  height: 140px;
  object-fit: cover;            /* isi penuh, potong sisa */
  object-position: center top;  /* fokus di bagian atas */
}

.logo {
  width: 120px;
  height: 60px;
  object-fit: contain;          /* utuh, tak terpotong */
}

ul.makanan  { list-style-type: square; }
ul.minuman  { list-style-type: circle; }
ol.bab      { list-style-type: upper-roman; }
ol.huruf    { list-style-type: lower-alpha; }

ul.menu {
  list-style-type: none;      /* polos: siap jadi navigasi */
  padding: 0;
}
ul.menu li { display: inline-block; margin-right: 12px; }

.navbar {
  display: flex;
  align-items: center;      /* tegak: tengah */
  justify-content: space-between;  /* mendatar: meregang */
  gap: 16px;
  padding: 12px 20px;
}

.badan {
  display: flex;
  gap: 24px;
}
.sisi { flex: 0 0 240px; }  /* kaku 240px */
.isi { flex: 1; }            /* menyerap sisanya */

.kartu-grid {
  display: flex;
  flex-wrap: wrap;   /* muat? baris baru */
  gap: 20px;
}

.kartu-grid > .kartu {
  flex: 1 1 260px;  /* dasar 260, boleh tumbuh & menyusut */
}

.galeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.galeri .unggulan {
  grid-column: span 2;   /* kartu unggulan dua kolom */
}

.halaman {
  display: grid;
  grid-template-areas:
    "kepala kepala"
    "sisi    isi"
    "kaki    kaki";
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.kepala { grid-area: kepala; }
.sisi   { grid-area: sisi; }
.isi    { grid-area: isi; }
.kaki   { grid-area: kaki; }

/* 1) teks */
.tombol {
  text-align: center;
  line-height: 44px;   /* = tinggi tombol */
}

/* 2) blok tetap */
.konten { width: 640px; margin: 0 auto; }

/* 3) serba-bisa */
.panggung {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.induk { position: relative; height: 300px; }

.anak {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

:root {
  --utama: hsl(190, 60%, 40%);
  --bg: #f7f9fa;
  --teks: #243b46;
  --radius: 10px;
  --jarak: 16px;
}

body {
  background: var(--bg);
  color: var(--teks);
}

.kartu {
  border-radius: var(--radius);
  padding: var(--jarak);
  background: var(--utama);
}

body.gelap {
  --bg: #16222b;
  --teks: #e8eef1;
}

.isi {
  width: calc(100% - 260px);      /* semua dikurangi sidebar */
  margin-left: 260px;
}

h1 {
  font-size: clamp(1.6rem, 4vw, 3rem);  /* fluid dengan jepit */
}

.konten {
  width: min(680px, 90%);         /* tak pernah lebih lebar dari keduanya */
}

.tombol {
  background: #1ABC9C;
  color: #fff;
  padding: 10px 22px;
  border-radius: 6px;
  /* transisi di keadaan dasar */
  transition: background 0.25s ease-out, transform 0.25s ease-out;
}

.tombol:hover {
  background: #148f77;
  transform: translateY(-2px);   /* terangkat halus */
}

.kartu {
  transition: transform 0.3s ease-out;
}
.kartu:hover {
  transform: translateY(-6px) scale(1.02);
}

.ikon-muat {
  animation: none;
  transform-origin: center;
}
.ikon-muat.putar { transform: rotate(180deg); }

.stempel {
  transform: rotate(-6deg) skew(-4deg);
}

@keyframes berdenyut {
  0%   { transform: scale(1);    opacity: 1; }
  50%  { transform: scale(1.25); opacity: 0.7; }
  100% { transform: scale(1);    opacity: 1; }
}

.titik-live {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #e74c3c;
  animation: berdenyut 1.6s ease-in-out infinite;
}

@keyframes masuk {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.kartu-masuk {
  animation: masuk 0.5s ease-out backwards;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 700px) {
  .cards { grid-template-columns: 1fr; }
}

table.siswa {
  border-collapse: collapse;
  width: 100%;
  font-family: sans-serif;
}

table.siswa th {
  background: #35A9DB;
  color: #fff;
}

table.siswa th,
table.siswa td {
  border: 1px solid #d5dbdf;
  padding: 10px 16px;
  text-align: center;
}

table.siswa tr:nth-child(even) {
  background: #f2f7f9;
}

table.siswa tr:hover {
  background: #dceef5;
}