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

Ada tiga cara untuk memasukan fungsi style css ke document HTML :
  • External style sheet
  • Internal style sheet
  • Inline styles
 - Eksternal Style Sheet

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>

    
- Internal style sheet

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:

<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 !!!

penggunaan Style Eksternal Style Sheet tidak dapat di gunakan jika anda menggunakan hosting yang hanya menggunakan template dalam pembuatan halamannya . 
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                                               

2 komentar:

Diberdayakan oleh Blogger.