Pengenalan Dasar Html (Part #6) (Style)

Admin
Februari 22, 2023


Pada part #6 ini kita akan membahas tentang Styling, di gunakan untuk mengcustom/mengubah gaya sebuah tag.

Cara Menerapkan Style

Penerapan style pada sebuah elemen di HTML menggunakan atribut Style. Contoh:
<nama_tag style="properti:nilai;">

Properti dan nilai yang digunakan adalah properti dan nilai dari css.

Contoh Penerapan

Untuk mengubah warna teks


Kode di atas di gunakan untuk merubah warna pada teks, dimana di deklarasikan <H1> itu berwarna biru dan <p> berwarna kuning.

Untuk mengubah jenis teks


Kode di atas di gunakan untuk merubah jenis font yang kita gunakan sesuai keinginan kita.

Macam - macam properti css

  1. font-family Menentukan daftar font untuk elemen.
  2. font-size Menentukan ukuran font untuk teks.
  3. font-size-Adjust Mempertahankan keterbacaan teks saat font fallback terjadi.
  4. font-stretch Memilih wajah normal, terkondensasi, atau diperluas dari font.
  5. font-style Mendefinisikan gaya font untuk teks.
  6. font-variant Menentukan varian font.
  7. font-weight Menentukan berat font teks.
  8. margin Mengatur margin pada keempat sisi elemen.
  9. margin-bottom Mengatur margin bawah elemen.
  10. margin-left Mengatur margin kiri elemen.
  11. margin-right Mengatur margin kanan elemen.
  12. margin-top Mengatur margin atas elemen.
  13. padding Mengatur padding pada keempat sisi elemen.
  14. padding-bottom Mengatur padding ke sisi bawah elemen.
  15. padding-left Mengatur padding ke sisi kiri elemen.
  16. padding-right Mengatur padding ke sisi kanan elemen.
  17. padding-top Mengatur padding ke sisi atas elemen.
  18. direction Menentukan arah teks / arah penulisan.
  19. tab-size Menentukan panjang karakter tab.
  20. text-align Menetapkan perataan horisontal konten inline.
  21. text-align-last Menentukan bagaimana baris terakhir dari sebuah blok atau sebuah baris tepat sebelum jeda baris paksa disejajarkan ketika text-align dibenarkan.
  22. text-decoration Menentukan dekorasi yang ditambahkan ke teks.
  23. text-overflow Menentukan bagaimana konten teks akan ditampilkan, ketika meluap kontainer blok.
  24. text-shadow Menerapkan satu atau lebih bayangan ke konten teks suatu elemen.
  25. text-transform Mengubah kasus teks.
  26. line-height Mengatur tinggi antar baris teks.
  27. vertical-align Mengatur posisi vertikal suatu elemen relatif terhadap baseline teks saat ini.
  28. letter-spacing Mengatur jarak ekstra antar huruf.
  29. dll.

Penutup

Masih banyak lagi properti dari styling ini, kalian bisa cari di google sesuai kebutuhan kalian, sekian terima kasih!