-=[ Klick Go To My Homepage ]=-














!!Catatan Si Hitam!!
!!http://cekouff.blogspot.com/!!
0

Tutorial CSS - Cara Memasukan Script CSS ke Dalam HTML

Rabu, 12 Desember 2012
Share this Article on :


Assalamuallaikum Wr Wb

Setelah sebelumnya saya telah menulis tutorial CSS mengenai Pengenalan Dasar Penulisan CSS , Sekarang saya akan menulis tentang Cara Memasukan Script CSS ke Dalam HTML. Seperti yang saya katakan pada tulisan saya sebelum nya, bahwa tutorial kali ini sangat penting dan wajib di ketahui bila anda ingin lebih mengetahui mengenai CSS.


Untuk memasukan atau menggunakan Script CSS ke dalam HTML ada 3 cara yang dapat dilakukan. Yaitu bisa dengan cara Inline Style, header style dan juga bisa dengan menggunakan Linked CSS.

1.  Untuk pertama-tama kita bahas terlebih dahulu mengenai cara Inline style, Inline style merupakan salah satu cara yang dapat dilakukan untuk menggunakan atau memasukan sript CSS ke dalam HTML dengan cara menuliskan Script CSS satu persatu ke dalam HTML.
Untuk lebih jelasnya perhatikan Sript di bawah ini :

<html>
<header>
<title>Belajar CSS</title>
</header>
<body>
<p style="color : red"> Teks ini berwarna merah </p>
<p style="color : Blue"> teks ini berwarna biru </P>
<p style="color : green"> teks ini berwarna hijau </p>
</body>
</html>

Dapat terlihat komposisi Sript CSS di atas menggunakan style="property : value"> menjadi style="color : red".
Untuk melihat hasilnya anda bisa copy sript di atas ke dalam notepad, lalu safe dengan format ( .HTML ).
dapat terlihat terjadi perbedaan warna di setiap kalimatnya.

2.  Yang ke dua anda bisa menggunakan header style, dimana kita dapat menuliskan sript CSS pada bagian header. Di mana bagian script html terpisah dengan scipt CSS. Bagian HTML terletak di bagian body sedangkan bagian CSS terletak di bagian Header.
Keunggulan dengan menggunakan cara ini kita tidak perlu menuliskan satu per satu sript HTML tapi cukup hanya dengan menuliskan Script CSS yang di butuhkan maka script CSS dapat digunakan di setiap tag HTML. Untuk lebih memahainya silahkan lihat contoh di bawah ini :

<head>
<title> Belajar tutorial CSS</title>
<style>
h3 {font-family : calibri; 
      color : red;
      font-style : italic}
</style>
</head>

<Body>
<h3>kalimat ini memiliki font jenis calibri, warna merah dan juga di cetak miring</h3>
</body>
</html>

Dari contoh di atas dapat dilihat bahwa semua yang berada di dalam tag h3 akan memiliki apa yang telah di tuliskan pada bagian CSS di header tadi, yaitu akan memiliki font calibri, berwarna merah dan juga di cetak miring.

3. Yang ketiga adalah dengan menggunakan Linked CSS. Linked CSS adalah salah satu cara untuk memasukan menggunakan Script CSS dimana, sript html dipisahkan dengan sript CSS, lalu di hubungkan dengan link.
Untuk lebih jelasnya lagi silahkan ikuti petunjuk di bawah ini :

a. Buka notepad, notepad ini digunakan untuk menuliskan sript CSS.
lalu copy paste cript CSS berikut 

h3 {font-family : calibri; 
      color : red;
      font-style : italic}


 Setelah itu save notepad


B. Buka notepad kembali, notepad yang satu ini di gunakan untuk menuliskan sript HTML
.
Lalu copy paste
sript HTML berikut 

<head>
<title> Belajar tutorial CSS</title>
 <link rel="stylesheet" href="Tulis nama file notepad Css yang telah di save" type="text/css">
</head>
<Body>
<h3>kalimat ini memiliki font jenis calibri, warna merah dan juga di cetak miring</h3>
</body>
</html>

lalu save as file notepad tersebut di folder yang sama dengan file notepad CSS. Tulisan yang berwarna biru di atas mewajibkan anda untuk menuliskan nama fie notepad HTML yang telah ada simpan, Contoh : format.css


Sekian untuk tutorial Cara Memasukan Script CSS ke Dalam HTML untuk hari ini.Silahkan baca tutorial CSS selanjutnya mengenai Tutorial CSS - Mengenal Class dan Id


Artikel Terkait:

0 komentar:

Poskan Komentar

Read more: http://blogkomputer12.blogspot.com/2012/06/tips-memasang-widget-untuk-mempercantik.html#ixzz2CsoLdPTs

Blogger news

Column 1

Musik

Pages

Popular Posts