CSS - Property & Value

• Property adalah nama aturan tampilan yang ingin diterapkan pada elemen (misal: color, font-size, margin).
• Value adalah nilai yang diberikan pada property untuk menentukan tampilannya (misal: red, 20px, auto).
• Keduanya ditulis dalam format property: value; di dalam blok CSS.

Contoh Dasar:

teks {
  color: blue;            /* Warna teks */
  font-size: 16px;        /* Ukuran font */
  margin: 10px;           /* Jarak luar */
  padding: 20px;          /* Jarak dalam */
  background-color: #f0f0f0;  /* Warna latar belakang */
  border: 1px solid #ccc; /* Garis tepi */
  border-radius: 5px;     /* Sudut melengkung */
  text-align: center;     /* Posisi teks */
  font-weight: bold;      /* Ketebalan font */
  text-decoration: none;  /* Dekorasi teks */
}

Kategori Property CSS:

1. Text & Font

   p {
     font-family: Arial, sans-serif;
     font-size: 1rem;
     line-height: 1.6;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     text-align: justify;
   }

2. Box Model

   .box {
     width: 300px;
     height: 200px;
     margin: 10px 20px;
     padding: 15px 25px;
     border: 2px solid #333;
     box-sizing: border-box;
   }

3. Background

   .header {
     background-color: #4CAF50;
     background-image: url('gambar.jpg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
   }

4. Layout

   .container {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     gap: 20px;
   }

5. Transisi & Animasi

   .button {
     transition: all 0.3s ease-in-out;
   }
   
   .button:hover {
     transform: scale(1.05);
     box-shadow: 0 5px 15px rgba(0,0,0,0.1);
   }

Satuan dalam CSS:

• px - Pixels
• % - Persentase
• em - Relatif terhadap ukuran font elemen
• rem - Relatif terhadap ukuran font root
• vw/vh - Viewport width/height
• vmin/vmax - Viewport minimum/maximum

Warna dalam CSS:

.berwarna {
  color: red;                  /* Nama warna */
  background-color: #ff0000;   /* Hex color */
  border-color: rgb(255, 0, 0); /* RGB */
  outline-color: rgba(255, 0, 0, 0.5); /* RGBA dengan transparansi */
  text-shadow: 1px 1px 2px hsl(0, 100%, 50%); /* HSL */
}