Madao Code

Gaya HTML

Dalam tutorial ini akan belajar bagaimana menerapkan aturan gaya ke elemen HTML.

Penataan Elemen HTML

HTML cukup terbatas dalam hal penyajian halaman web. Ini awalnya dirancang sebagai cara sederhana untuk menyajikan informasi. CSS (Cascading Style Sheets) diperkenalkan pada bulan Desember 1996 oleh World Wide Web Consortium (W3C) untuk menyediakan cara yang lebih baik untuk menata elemen HTML.

Dengan CSS, menjadi sangat mudah untuk menentukan hal-hal seperti, ukuran dan jenis huruf untuk font, warna untuk teks dan latar belakang, perataan teks dan gambar, jumlah ruang antara elemen, batas dan garis untuk elemen, dan banyak. dari properti styling lainnya.

Menambahkan Gaya ke Elemen HTML

Informasi gaya dapat dilampirkan sebagai dokumen terpisah atau disematkan dalam dokumen HTML itu sendiri. Ini adalah tiga metode penerapan informasi gaya ke dokumen HTML.

  • Inline styles — Menggunakan atribut style di tag awal HTML.
  • Embedded style — Menggunakan elemen <style> di bagian kepala dokumen.
  • External style sheet — Menggunakan elemen <link>, menunjuk ke file CSS eksternal.

Dalam tutorial ini kita akan membahas semua jenis style sheet yang berbeda ini satu per satu.

CATATAN

Gaya sebaris memiliki prioritas tertinggi, dan lembar gaya eksternal memiliki prioritas terendah. Ini berarti jika Anda menentukan gaya untuk paragraf kalian di lembar gaya yang disematkan dan eksternal, aturan gaya yang bertentangan di lembar gaya yang disematkan akan menimpa lembar gaya eksternal.

Inline Styles

Inline styles digunakan untuk menerapkan aturan gaya unik ke elemen, dengan menempatkan aturan CSS langsung ke tag awal. Itu dapat dilampirkan ke elemen menggunakan atribut style.

Atribut style mencakup serangkaian properti CSS dan pasangan nilai. Setiap pasangan property: value dipisahkan oleh titik koma (;), seperti yang kalian tulis ke dalam lembar gaya yang disematkan atau eksternal. Tapi itu harus semuanya dalam satu baris yaitu tidak ada jeda baris setelah titik koma.

Contoh berikut menunjukkan cara mengatur warna dan ukuran font teks:

<h1 style="color:red; font-size:30px;">Ini adalah heading</h1>
<p style="color:green; font-size:18px;">Ini adalah paragraf.</p>
<div style="color:green; font-size:18px;">Ini adalah beberapa teks.</div>
1
2
3

Menggunakan gaya sebaris umumnya dianggap sebagai praktik yang buruk. Karena aturan gaya disematkan langsung di dalam tag html, hal itu menyebabkan presentasi menjadi tercampur dengan konten dokumen, yang membuat pembaruan atau pemeliharaan situs web menjadi sangat sulit.

Untuk mempelajari tentang berbagai properti CSS secara detail, silakan lihat bagian tutorial CSS.

CATATAN

Menjadi tidak mungkin untuk menggaya pseudo-elements dan pseudo-class dengan inline-styles. Oleh karena itu, kalian harus menghindari penggunaan atribut style di markup kalian. Menggunakan lembar gaya eksternal adalah cara yang lebih disukai untuk menambahkan informasi gaya ke dokumen HTML.

Lembar Gaya Tertanam

Lembar style yang disematkan atau internal hanya memengaruhi dokumen tempat mereka disematkan.

Lembar gaya yang disematkan didefinisikan di bagian <head> dokumen HTML menggunakan tag <style>. Anda dapat menentukan sejumlah elemen <style> di dalam bagian <head>.

Contoh berikut menunjukkan bagaimana aturan gaya disematkan di dalam halaman web.

<head>
  <style>
    body {
      background-color: YellowGreen;
    }
    h1 {
      color: blue;
    }
    p {
      color: red;
    }
  </style>
</head>
1
2
3
4
5
6
7
8
9
10
11
12
13

Lembar Gaya Eksternal

Lembar gaya eksternal sangat ideal ketika gaya diterapkan ke banyak halaman.

Lembar gaya eksternal menampung semua aturan gaya dalam dokumen terpisah yang dapat Kalian tautkan dari dokumen HTML apa pun di situs Kalian. Style sheet eksternal adalah yang paling fleksibel karena dengan style sheet eksternal, Kalian dapat mengubah tampilan seluruh situs web dengan memperbarui hanya satu file.

Kalian dapat melampirkan lembar gaya eksternal dengan dua cara — menautkan dan mengimpor:

Menautkan Lembar Gaya Eksternal

Lembar gaya eksternal dapat ditautkan ke dokumen HTML menggunakan tag <link>.

Tag <link> masuk ke dalam bagian <head>, seperti yang ditunjukkan di sini:

<head>
  <link rel="stylesheet" href="css/style.css" />
</head>
1
2
3

Mengimpor Lembar Gaya Eksternal

Aturan @import adalah cara lain untuk memuat lembar gaya eksternal. Pernyataan @import menginstruksikan browser untuk memuat lembar gaya eksternal dan menggunakan gayanya.

Kalian dapat menggunakannya dengan dua cara. Cara paling sederhana adalah dengan menggunakannya dalam elemen <style> di bagian <head> kalian. Perhatikan bahwa, aturan CSS lain mungkin masih disertakan dalam elemen <style>.

<style>
  @import url("css/style.css");
  p {
    color: blue;
    font-size: 16px;
  }
</style>
1
2
3
4
5
6
7

Demikian pula, kalian dapat menggunakan aturan @import untuk mengimpor lembar gaya dalam lembar gaya lain.

@import url("css/layout.css");
@import url("css/color.css");
body {
  color: blue;
  font-size: 14px;
}
1
2
3
4
5
6

CATATAN

Semua aturan @import harus muncul di awal lembar gaya. Aturan gaya apa pun yang ditentukan dalam lembar gaya itu sendiri mengesampingkan aturan yang bertentangan dalam lembar gaya yang diimpor. Aturan @import dapat menyebabkan masalah kinerja, Anda biasanya harus menghindari mengimpor lembar gaya.

Last Updated:
Contributors: Ronal Aldinal