Saat browser membaca sebuah style sheet, maka browser akan melakukan formating terhadap dokumen HTML sesuai dengan informasi yang di berikan oleh Style sheet.
Maksudnya begini, misalnya didalam style sheet terdapat informasi bahwa sebuah elemen HTML pada halaman web harus di tampilkan dengan background-color: black; dan color:white;. Maka saat style sheet tersebut di baca oleh browser, browser akan menampilkan elemen tersebut di dalam web page dengan background warna hitam dan tulisan warna putih.
Lalu Bagaimana cara Menuliskan CSS kedalam Dokumen HTML ?
Ada tiga cara dalam penulisan CSS, yaitu dengan cara External, Internal, dan Inline.
External CSS
Dengan cara ini, kita dapat mengatur tampilan seluruh website hanya dengan satu file saja. Syaratnya, setiap page HTML harus menyertakan referensi terhadap file style sheet eksternal di dalam element < link> pada bagian < head> .
<head>
<link rel="stylesheet" href="cssfile.css">
</head>
File Style sheet eksternal dapat di tulis dengan aplikasi text editor dan disimpan dengan ekstensi .css.
Misalnya kita sudah membuat style sheet yang disimpan dengan nama mystyle.css sebagai berikut :
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Maka kita referensikan terhadap file HTML kita sbb :
<head>
<link rel="stylesheet" href="mystyle.css">
Internal CSS
CSS juga dapat ditulis secara internal, yaitu didalam file HTML nya dengan disimpan pada bagian < head> dan ditulis di dalam elemen < style>. Contohnya seperti ini :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.<p>
</body>
</html>
Internal style sheet ini digunakan jika setiap page HTML memiliki style yang unik.
Inline CSS
Jika kita akan membuat setiap elemen memiliki style yang unik, maka inline style cocok digunakan.
Inline style digunakan dengan cara menggunakan attribute style terhadap elemen yang di tuju. Misalnya kita akan melakukan styling terhadap elemen <h1> dan elemen <p>. Maka kita gunakan attribute style seperti ini :
<body>
<h1 style="color:blue;text-align:center;"></h1>
<p style="color:red;"></p>
</body>
Bagaimana jika dalam sebuah halaman HTML terdapat ketiga unsur diatas, mana yang akan di eksekusi oleh browser ?
Jika didalam sebuah halaman HTML terdapat ketiga unsur penulisan CSS diatas, yaitu External, Internal, dan Inline style maka browser akan mengeksekusi berdasarkan skala prioritasnya.
Prioritas yang pertama adalah Inline, selanjutnya untuk External dan Internal tergantung penempatannya pada bagian head. Jika link External di deklarasikan lebih dahulu baru kemudian style Internal, maka Internal Style memiliki prioritas lebih tinggi dan sebaliknya.
Referensi : w3schools.com
| Prev. Chapter | Next Chapter |
|---|---|
| Lebih Jauh Tentang CSS | CSS Color Properties |
Tidak ada komentar:
Posting Komentar