Penggunaan CSS pada HTML dibedakan menjadi 3, yaitu :
- Metode Inline Style
- Metode Internal Style Sheets
- Metode External Style Sheets
Metode 1 & 2 diatas merupakan metode dimana kode CSS berada dalam kode HTML, sedang metode ke 3 adalah metode dimana kode css dibuatkan file yang berekstensi *.css yang nantinya akan dipanggil dalam kode HTML.
1. METODE INLINE STYLE
Metode Inline Style adalah cara menggunakan kode CSS pada kode HTML langsung ke dalam tag HTML dengan menggunakan atribut style, contoh penggunaan Metode Inline Style CSS adalah sebagai berikut:
<!DOCTYPE html><html> <head><title>Contoh Inline Style CSS</title></head> <body><p style="background-color:orange; color:black" >Text ini akan bewarna hitam dengan background warna orange </p></body></html>
Dalam kode diatas, atribut style disisipkan pada tag paragraph <p>, dimana nilai dari atribut style tersebut adalah kode CSS yang ingin diterapkan.
2. Metode Internal Style Sheets
Metode Internal Style Sheets (Embedded Style Sheets) digunakan untuk memisahkan kode CSS dari tag HTML namun tetap dalam satu halaman HTML. Atribut style yang sebelumnya berada di dalam tag, dikumpulkan pada pada sebuah tag <style>. Tag style ini harus berada pada bagian <head> dari halaman HTML. Contoh penggunaan motode internal style sheets CSS:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Internal Style Sheets CSS</title>
<style type="text/css">
p{
background-color:orange;
color:black;
}
</style>
</head>
<body>
<p>Text ini akan bewarna hitam dengan background warna orange <p>
</body>
</html>
3. Metode External Style Sheets
Pertama bentuk sebuah file CSS dan simpanlah dengan nama style.css (pastikan memiliki extention file .css)Metode External Style Sheets digunakan untuk 'mengangkat' kode CSS tersebut kedalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman yang membutuhkan kode CSS, cukup 'memanggil' file CSS tersebut. Contoh penggunaan motode External style sheets CSS:
p {
background-color:orange;
color:black;
}
Kedua bentuk sebuah file HTML kemudian 'panggil' file css diatas menggunakan tag <link> dengan atribut “href”, tag <link> harus terletak pada bagian <head> HTML.
<!DOCTYPE html> <html> <head> <title>Contoh External Style Sheets CSS</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>Text ini akan bewarna hitam dengan background warna orange </p> </body> </html>
Ketiga cara menggunakan CSS pada kode HTML di atas akan menghasilakn tampilan desain yang sama ketika dijalankan pada web browser, namun dari ketiga cara tersebut, yang paling direkomendasikan adalah metode external style sheets. Karena dengan menggunakan kode CSS yang dipisahkan, seluruh halaman web dapat menggunakan file CSS yang sama, dan jika kita ingin mengubah seluruh tampilan halaman website, kita hanya butuh mengubah 1 file CSS saja.
0 komentar:
Post a Comment