a. Inline
Style
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 dokumen web. Contohnya adalah sebagai berikut :
<!DOCTYPE
html>
<html>
<head>
<title>Inline
Style</title>
</head>
<body>
<font style=’arial;
font-family:Arial; font-
size:20px;background-color:yellow’>Penerapan
Inline
Style</font>
</body>
</html>
|
Dalam script di atas dapat diketahui
bahwa style tersebut memiliki nama style arial yang memiliki nilai atau value
untuk style tersebut. Dari script di atas dapat dilihat tampilan dalam browser
seperti pada Gambar berikut ini.
b. Internal
Style
Pada teknik ini style diletakkan pada
tengah tag antara tag <head> dan </head>. Aturan-aturan dalam style
ini diatur sedemikian rupa untuk digunakan pada suatu tempat maupun untuk
keseluruhan situs. Perhatikan contoh berikut :
<!DOCTYPE
html>
<html>
<head>
<title>Internal
Style</title>
<style>
body
{background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>Ini adalah Style Heading
1 yang sudah diubah</h1>
<p> Ini adalah Style Paragrap
yang sudah diubah </p>
</body>
</html>
|
Maksud dari script di atas adalah
mengatur style pada elemen body dengan warna latar belakang abu-abu muda,
<h1> dengan warna biru, dan tag <p> dengan warna hijau. Hasil
script di atas dalam browser dapat dilihat di bawah ini.
c. Imported
Style
Dengan teknik ini sebuah style tidak
disimpan pada halaman tersebut. Namun untuk menghubungkannya dengan halaman web
yang dibuat, demgam menggunakan import yang terdapat pada style CSS. Perhatikan
contoh berikut :
<!DOCTYPE
html>
<html>
<head>
<title>Import
Style</title>
<style type=”text/css”>
@import url(http://www.namasitus.com/global.css);
</style>
</head>
<body>
<div class=blog>Penerapan
Import Style</div>
</body>
</html>
|
Dari script di atas, dokumen HTML
akan mengambil atau meng-import style CSS untuk dalam dokumen tersebut. Dimana
pada contoh di atas dokumen akan mengimpor file style dengan nama global yang
berekstensi .css pada alamat url http://www.namasitus.com dengan menggunakan
perintah berikut :
@import
url(http://www.namasitus.com/global.css);
|
d. Eksternal
Style
Dengan menggunakan teknik ini, dapat
memanggil CSS style pada file CSS yang diinginkan menggunakan perintah “Link
rel” yang berfungsi untuk menghubungkan ke dalam sebuah CSS style eksternal
dengan nama yang telah ditentukan. Perhatikan contoh berikut :
<link
rel=”stylesheet” type=”text/css” href=”default.css”>
|
Pada contoh di atas menghubungkan
sebuah dokumen HTML dengan sebuah eksternal style dengan nama default.css yang
telah dibuat sedemikian rupa sehingga style tersebut dihubungkan untuk
memformat tampilan dalam dokumen HTML tersebut.
Dalam mengimpor file CSS, dapat
langsung mengimpor beberapa file CSS sekaligus dalam sebuah dokumen agar
memperkaya tampilan dokumen. Perhatikan contoh berikut :
<link
rel=”stylesheet” type=”text/css” href=”default1.css”>
<link
rel=”stylesheet” type=”text/css” href=”default2.css”>
<link
rel=”stylesheet” type=”text/css” href=”default3.css”>
|
Atau dapat menggunakan perintah :
<style>
@import
url(default1.css);
@import
url(default2.css);
@import
url(default3.css);
</style>
|
Wihh terima kasih gan infonya dan menjelaskan kegunaannya.sangat membantu sekali dalam proses belajar saya dalam membuat web,kedepannya semoga bisa share lagi tentang membuat web ๐.
ReplyDeleteArdandysyah
1922500080
https://www.atmaluhur.ac.id/
Baccarat, Roulette, Dice, Dice and Blackjack | Wolverione
ReplyDeleteWelcome septcasino to the latest Baccarat ๋ฐ์นด๋ผ ์ฌ์ดํธ news and information from Wolverione, along with more games to play, to 1xbet korean keep up with our daily updates,