Jakarta Time
Haloo sahabat, kali ini saya ingin berbagi tentang
Cara Memasukan Script CSS ke Dalam HTML. Pada 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 Sheet,
internal style sheet dan juga bisa dengan menggunakan External Style Sheet.
1. Untuk pertama-tama kita bahas terlebih dahulu
mengenai cara Inline style sheet, Inline style sheet adalah CSS yang
dibuat dalam sebuah tag HTML yang hanya berlaku untuk dokumen yang diapitnya
saja. Biasanya teknik ini digunakan pada pemformatan khusus pada sebuah elemen HTML
dan tidak digunakan untuk memformat seluruh elemen dalam dokumen web.
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 script
di atas ke dalam notepad, lalu save dengan format ( .HTML ).
dapat terlihat terjadi perbedaan warna di
setiap kalimatnya.
2. Yang ke dua anda bisa menggunakan
internal style sheet, dimana kita dapat menuliskan
sript CSS di antara tag <head> dan </head>. Di mana bagian script
html terpisah dengan scipt CSS. Bagian HTML terletak di bagian body sedangkan
bagian CSS terletak di bagian Header. Penulisan CSS ini diawali dengan tag
<style>dan diakhiri tag
</style>.
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 external
style sheet atau bisa juga di sebut Linked CSS. External style sheet 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
yang satu ini di gunakan untuk menuliskan sript HTML.
Lalu copy pastesript HTML berikut :
Lalu copy pastesript 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>
Setelah itu save notepad
B. Buka notepad, notepad ini digunakan untuk
menuliskan sript CSS.
lalu copy paste cript CSS berikut
h3 {font-family : calibri;
color : red;
font-style :
italic}
lalu save file notepad tersebut di folder yang sama dengan file notepad CSS (format (.css). Tulisan yang berwarnabirudi atas mewajibkan anda untuk menuliskan nama file notepad HTML yang telah anda simpan tadi..
lalu save file notepad tersebut di folder yang sama dengan file notepad CSS (format (.css). Tulisan yang berwarnabirudi atas mewajibkan anda untuk menuliskan nama file notepad HTML yang telah anda simpan tadi..
0 komentar:
Posting Komentar