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>
</head>
<Body>
<h3>kalimat ini memiliki font jenis calibri, warna merah dan juga di cetak miring</h3>
</body>
</html>
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
0 komentar:
Posting Komentar