HTML : Style

HTML

HTML sangat terbatas dalam menyajikan halaman web. Awalnya dirancang sebagai cara sederhana untuk menyajikan informasi. CSS (Cascading Style Sheets) diperkenalkan pada Desember 1996 oleh World Wide Web Consortium (W3C) untuk memberikan cara yang lebih baik dalam mendesain elemen HTML.

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

Menambahkan Style ke Elemen HTML

Informasi style dapat dilampirkan sebagai dokumen terpisah atau disematkan dalam dokumen HTML itu sendiri. Berikut adalah tiga metode menerapkan informasi style ke dokumen HTML.

  • Inline style – Menggunakan atribut style dalam tag awal HTML.
  • Embedded style – Menggunakan elemen <style> di bagian judul dokumen.
  • External style sheet – Menggunakan elemen <link>, merujuk ke file CSS eksternal.

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

Inline Style

Inline CSS adalah memasukkan kode CSS pada line HTML tepatnya pada atribut “style” pada sebuah tag. Inline CSS dapat digunakan jika penggunaan CSS tidak terlalu banyak dan cukup dibutuhkan oleh tag pemanggilnya saja. Karena jika pemakaiannya terlalu banyak misalnya pada setiap tag yang memerlukannya. Maka penggunaan Inline CSS tidak efesien dan malah akan membuat “jorok” kode HTML anda dan ukuran filepun akan semakin besar.

Atribut style termasuk serangkaian properti CSS dan pasangan nilai. Masing-masing pasangan nilai: dipisahkan oleh tanda titik koma (;), sama seperti Anda akan menulis ke lembar gaya yang disematkan atau eksternal. Tetapi harus semua dalam satu baris yaitu tidak ada istirahat baris setelah titik koma.

Contoh berikut menunjukkan cara mengatur warna dan ukuran font teks:

<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:18px;">This is a paragraph.</p>
<div style="color:green; font-size:18px;">This is some text.</div>

Menggunakan inline style umumnya dianggap sebagai cara yang buruk. Karena aturan gaya menyatu langsung di dalam tag html itu sendiri, hal tersebut menyebabkan hasilnya bercampur dengan konten dokumen, dan hal tersebut akan menyulitkan kita saat ingin memperbarui atau melakukan pemeliharaan website.

Embedded Style Sheets

Embedded atau internal style hanya mempengaruhi dokumen yang di embedded kan. Penulisandengan metode Embedded style sheet dituliskan langsung pada program HTML di bagian atas program atau di dalam tag <HEAD> dengan menggunakan tag <STYLE> ditutup dengan </STYLE>, cukup menuliskan selector dari CSS tersebut disertai dengan parameter yang ada. Berikut contoh embedded style :

<head>
    <style>
        body { background-color: YellowGreen; }
		h1 { color: blue; }
        p { color: red; }
    </style>
</head>

External Style Sheets

External style sheet cocok untuk diterapkan ke banyak halaman website.

Salah satu cara yang paling baik untuk menambahkan CSS ke website kalian adalah dengan menghubungkannya ke file .CSS eksternal. Dengan cara tersebut, perubahan apapun yang kalian buat pada file CSS akan tampil pada website kalian secara keseluruhan. Kalian bisa mengubah tampilan seluruh situs web dengan hanya memperbarui satu file saja.

Kalian bisa menggunakan external style sheet dengan dua cara yaitu :

  • Linking, dimana external style sheet ditautkan ke dokumen HTML dengan menggunakan tag <link> . Tag <link> dimasukan ke dalam tag <head> seperti contoh berikut:
<head> 
<link rel="stylesheet" href="css/style.css"> 
</head>
  • Import, @import adalah cara lain untuk memuat style sheet eksternal. Pernyataan impor meminta browser untuk memuat external style sheet dan menggunakannya. Kalian bisa menggunakannya dalam dua cara. Cara paling sederhana adalah menggunakannya di dalam elemen <style> di bagian <head>. Berikut contohnya:
<style>
    @import url("css/style.css");
    p {
        color: blue;
        font-size: 16px;
    }
</style>

Cara kedua, kalian bisa menggunakan pernyataan @import untuk mengimpor style sheet yang satu ke dalam style sheet yang lain. Berikut contohnya:

@import url("css/layout.css");
@import url("css/color.css");
body {
    color: blue;
    font-size: 14px;
}