Basic Properties di CSS

CSS (Cascading Style Sheets) adalah bahasa yang kita gunakan untuk “menghias” atau mengatur tampilan halaman web. Dengan CSS, Anda bisa mengontrol warna, font, spasi, dan banyak lagi.

Struktur dasar sebuah aturan CSS adalah:

selektor {
  properti: nilai;
}

• Selektor: menargetkan elemen HTML mana yang ingin Anda gayakan.
• Properti: jenis gaya yang ingin Anda terapkan (misalnya, color).
• Nilai: pengaturan untuk properti tersebut (misalnya, blue).

Mari kita jelajahi beberapa properti paling dasar.

color

Properti color digunakan untuk mengubah warna teks.

p {
  color: #c0392b;
}

background-color

Properti background-color digunakan untuk mengubah warna latar belakang sebuah elemen.

p {
  background-color: #ecf0f1;
}

background-image

Anda juga bisa menggunakan gambar sebagai latar belakang dengan background-image. Nilainya harus berupa url('path/ke/gambar.jpg').

div {
  background-image: url(https://images.unsplash.com/photo-1554034483-04fda0d3507b?w=200&q=80);
}

font-size

Gunakan font-size untuk mengatur ukuran teks. Anda bisa menggunakan satuan px (pixel), em (relatif terhadap ukuran font induk), atau %.

p {
  font-size: 16px;
}

font-family

Properti font-family digunakan untuk mengubah jenis huruf (font) dari teks. Anda bisa menyediakan beberapa nama font sebagai cadangan, dipisahkan oleh koma.

p {
  font-family: serif;
}

margin

margin adalah properti untuk mengatur spasi atau jarak di luar batas (border) sebuah elemen. Ini seperti memberikan ruang napas di sekitar elemen.

• 1 nilai (cth: 20px): berlaku untuk semua sisi (atas, kanan, bawah, kiri).
• 2 nilai (cth: 10px 20px): nilai pertama untuk atas & bawah, nilai kedua untuk kanan & kiri.
• 4 nilai (cth: 5px 10px 15px 20px): searah jarum jam (atas, kanan, bawah, kiri).

div {
  margin: 10px;
}

padding

padding sangat mirip dengan margin, tetapi untuk mengatur spasi di dalam batas (border) sebuah elemen. Ini seperti memberikan bantalan antara konten dan border. Aturan penulisannya sama dengan margin.

div {
  padding: 10px;
}

border

Properti border digunakan untuk membuat garis di sekeliling elemen. Ini adalah shorthand (singkatan) dari tiga properti: border-width, border-style, dan border-color.

Formatnya: lebar gaya warna (cth: 1px solid black).

div {
  border: 1px solid black;
}

text-align

Properti text-align mengatur perataan horizontal teks di dalam sebuah elemen.

p {
  text-align: left;
}

text-decoration

text-decoration digunakan untuk menambahkan dekorasi pada teks, seperti garis bawah, garis tengah, atau garis atas.

p {
  text-decoration: none;
}

font-weight

Properti font-weight mengatur ketebalan font teks. Anda bisa menggunakan kata kunci seperti normal, bold, atau nilai numerik seperti 100 hingga 900.

p {
  font-weight: normal;
}

line-height

line-height mengatur tinggi setiap baris teks. Ini berguna untuk menambah atau mengurangi spasi vertikal antar baris teks, yang mempengaruhi keterbacaan.

p {
  line-height: normal;
}

width

Properti width mengatur lebar elemen. Anda bisa menggunakan satuan px, %, em, atau vw (viewport width).

div {
  width: 100px;
}

height

Properti height mengatur tinggi elemen. Sama seperti width, Anda bisa menggunakan satuan px, %, em, atau vh (viewport height).

div {
  height: 50px;
}

border-radius

border-radius digunakan untuk membuat sudut elemen menjadi melengkung atau membulat. Semakin besar nilainya, semakin bulat sudutnya.

div {
  border-radius: 0;
}

opacity

Properti opacity mengatur tingkat transparansi sebuah elemen. Nilainya berkisar antara 0 (sepenuhnya transparan) hingga 1 (sepenuhnya buram).

div {
  opacity: 1;
}