Cara Menggunakan CSS pada Kode HTML
9 Januari 2015
1 Komentar
Cara menggunakan CSS pada kode HTML dapat dibedakan menjadi 3 (tiga) cara / metode (input ke halaman / dokumen HTML) yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets
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:
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:
Metode External Style Sheets
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:
Pertama bentuk sebuah file CSS dan simpanlah dengan nama style.css (pastikan memiliki extention file .css)
Demikian tutorial bagaimana cara menggunakan CSS pada kode HTML (input CSS ke dalam HTML). Jika masih kurang memahami tutorial ini, Anda dapat memberikan pertanyaan melalui form komentar. Semoga dapat membantu
 |
| Cara menggunakan CSS pada kode HTML |
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.
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>
Contoh metode internal style sheets diatas sudah jauh lebih baik daripada inline style, karena masing-masing kode CSS dan HTML telah terpisah. Seluruh kode CSS akan berada pada tag <head> HTML.Metode External Style Sheets
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:
Pertama bentuk sebuah file CSS dan simpanlah dengan nama style.css (pastikan memiliki extention file .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.
Demikian tutorial bagaimana cara menggunakan CSS pada kode HTML (input CSS ke dalam HTML). Jika masih kurang memahami tutorial ini, Anda dapat memberikan pertanyaan melalui form komentar. Semoga dapat membantu
Keren bgt gan artikelnya tentang Cara Menggunakan CSS pada Kode HTML. Cocok buat sy yg pemula. Disini sy jadi tau cara menggunakan CSS : inline style, contohnya jika dijalankan akan menampilkan tulisan yang bewarna hitam, lalu jika kita ingin merubah warna paragraf ke warna biru, maka kita bisa langsung memberikan atribut style dengan nilai color: blue;. Sukses terus ya gan......Makasih.....
BalasHapusJangan lupa ya.....
kunjungi website saya : https://lurriekurniasih.mahasiswa.atmaluhur.ac.id
dan website kampus saya : http://www.atmaluhur.ac.id