Belajar HTML - HTML dan Styles (CSS)
Seperti kita ketahui bersama pada tutorial sebelumnya, bahwa HTML dan Styles CSS tidak dapat di pisahkan dimana kedua document ini saling berkegantungan satu sama lainnya.
oke, kali ini kita akan membahas sedikit tentang penggabungan style CSS dan HTML pada sebuah halaman web/blog.
Mari kita lihat contoh simpel berikut bersama :
Menggunakan Styles dalam HTML ~ klik
Bagaimana menambah informasi Styles ke bagian <head>.
Membuat Link yang tidak digaris bawahi ~ klik
Bagaimana membuat link yang tidak digarisbawahi, dengan atribut style.
Link ke style sheet eksternal ~ klik
Cara menggunakan tag <link> untuk link ke style sheet eksternal.
Bagaimana cara menambahkan fungsi styles CSS
eksternal style sheet sangat cocok ketika style CSS akan diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan hanya mengubah satu file. Setiap halaman harus mempunyai link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian <head>:
style sheet internal dapat digunakan jika satu dokumen tunggal memiliki gaya yang unik. Gaya internal didefinisikan dalam bagian <head> dari sebuah halaman HTML, dengan menggunakan tag <style>, seperti ini:
- Inline styles
Contoh di bawah ini menunjukkan bagaimana untuk mengubah warna teks dan margin kiri dari sebuah paragraf :
penggunaan Style Eksternal Style Sheet tidak dapat di gunakan jika anda menggunakan hosting yang hanya menggunakan template dalam pembuatan halamannya .
oke, kali ini kita akan membahas sedikit tentang penggabungan style CSS dan HTML pada sebuah halaman web/blog.
Mari kita lihat contoh simpel berikut bersama :
Menggunakan Styles dalam HTML ~ klik
Bagaimana menambah informasi Styles ke bagian <head>.
Membuat Link yang tidak digaris bawahi ~ klik
Bagaimana membuat link yang tidak digarisbawahi, dengan atribut style.
Link ke style sheet eksternal ~ klik
Cara menggunakan tag <link> untuk link ke style sheet eksternal.
Bagaimana cara menambahkan fungsi styles CSS
Ada tiga cara untuk memasukan fungsi style css ke document HTML :
- External style sheet
- Internal style sheet
- Inline styles
eksternal style sheet sangat cocok ketika style CSS akan diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan hanya mengubah satu file. Setiap halaman harus mempunyai link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian <head>:
contoh :
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
- Internal style sheet
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
- Inline styles
Inline Styles adalah sebuah style yang langung di letakan pada sabuah dokument tunggal .
Contoh di bawah ini menunjukkan bagaimana untuk mengubah warna teks dan margin kiri dari sebuah paragraf :
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
Catatan !!!
contoh : hosting blogspot seperti yang saya gunakan
Dalam hosting blogspot, untuk mengedit style CSS anda dapat mengedit ataupun membuatnya di atas kode ]]></b:skin> .
insyaallah nanti saya akan membuat juga tutorial belajar CSS untuk pemula .
+ oke, kita akan lanjut ke tutorial belahjar HTML untuk pemula selanjutnya ...
<< DOCTYPE : Sebelumnya
<< DOCTYPE : Sebelumnya
Hehehe......... bingung juga gan. sory lagi belajar html nih
BalasHapusmantap (y)
BalasHapus