Penerapan CSS ke suatu dokumen HTML diantaranya:
External Style Sheet
Metode External Style Sheet ini digunakan bila menginginkan dampak CSS yang sama untuk banyak dokumen HTML.
Cara ini, CSS rule tersimpan di luar dokumen HTML yang menggunakannya. Untuk memanggil dokumen yang eksternal, bisa menggunakan elemen LINK.
Untuk prakteknya, bisa ikuti langkah-langkah berikut:
Ketikkan dokumen HTML di bawah ini di Notepad, kemudian simpan dengan nama
htmlDoc.html:<HTML> <HEAD> <LINK REL="stylesheet" TYPE="text/css" HREF="cssDoc.css"> </HEAD> <BODY> <P>Alinea 1</P> <P>Alinea 2</P> </BODY> </HTML>Selanjutnya membuat dokumen CSS. Ketikkan kode di bawah ini di Notepad, lalu simpan dengan nama
cssDoc.css:P { color: red; }- Terakhir jalankan dokumen HTML yang bernama
htmlDoc.htmldi browser anda. Nanti akan terlihat teks dari elemen P akan berwarna merah, dan itu berdasarkan declaration CSS di dokumen CSS yang bernamacssDoc.css.
Internal Style Sheet
Ketika menggunakan metode ini, CSS rule harus berada di dalam dokumen HTML yang menggunakannya, tepatnya menggunakan elemen STYLE di dalam HEAD.
Untuk prakteknya, bisa ikuti langkah-langkah berikut:
Ketikkan dokumen HTML di bawah ini di Notepad, kemudian simpan dengan nama
htmlDoc.html:<HTML> <HEAD> <STYLE TYPE="text/css"> P { color: red; } </STYLE> </HEAD> <BODY> <P>Alinea 1</P> <P>Alinea 2</P> </BODY> </HTML>- Terakhir jalankan dokumen HTML yang bernama
htmlDoc.htmldi browser anda. Nanti akan terlihat teks dari elemen P akan berwarna merah, dan itu berdasarkan CSS rule di elemen STYLE.
Inline Style Sheet
Metode Inline Style Sheet ini digunakan jika menginginkan dampak CSS yang unik untuk elemen HTML. Metode ini menetapkan deklarasi-deklarasi CSS langsung di dalam tag awal dari suatu elemen via atribut STYLE, berikut contohnya:
