Menempatkan style CSS dalam
dokumen web yang kita buat dalam bahasa html dapat dilakukan dengan beberapa
cara dan tingkatan yang berbeda sesuai dengan keinginan kita. Cara penempatan
dalam HTML adalah dengan menggunakan beberapa cara, diantaranya adalah
menggunakan Inline Style, Internal Style, External style, dan juga teknik
Importing dengan Internal Style.
- Inline Style
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. Contohnya adalah
sebagai berikut :
<html>
<head>
<title>belajar css</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. Adapun nilai style adalah jenis font arial
dengan ukuran 20 pixel dan memiliki warna latar kuning. Jika dilihat dalam
browser, akan terlihat seperti pada gambar berikut :
Gambar 3.1.
Penerapan Inline Style dilihat dalam browser
- 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. Contoh dari teknik ini terlhat pada contoh berikut :
<html>
<head>
<title>Belajar
CSS</title>
<style
type="text/css">
<!--
.blog {font-family:
Verdana, Arial, Helvetica, sans-serif; font-size:
24px; color: white; background-color:
blue;}
-->
</style>
</head>
<body>
<div class=”blog”>Penerapan
Internal Style</div>
</body>
</html>
Maksud dari <!-- aturan
css --> diatas adalah berguna agar
browser yang tidak mendukung CSS tidak menampilkan perintah-perintah
CSS, jadi perintah CSS didalam <!-- --> akan dianggap sebagai komentar HTML dan
tidak akan ditampilkan dalam browser walaupun browser tersebut tidak mendukung
CSS sekalipun. Penerapan dari teknik ini dalam dokumen html akan terlihat
seperti dalam gambar berikut :
Gambar 3.2.
Penerapan Internal Style dilihat dalam browser
- Import Style
Dengan teknik ini sebuah Style
tidak disimpan pada halaman tersebut, namun untuk menghubungkannya dengan
halaman web yang kita buat digunakan perintah import yang terdapat pada style
CSS. Seperti terlihat pada contoh berikut :
<html>
<head>
<title>Belajar
CSS</title>
<style
type="text/css">
<!--
@import url (http://www.nama_situs.com/global.css);
-->
</style>
</head>
<body>
<div
class=blog>Penerapan Import Style</div>
</body>
</html>
Pada teknik diatas, dokumen
HTML akan mengambil atau import style CSS untuk dipergunakan dalam dokumen
tersebut. Dimana pada contoh diatas dokumen akan mengimport file style dengan
nama global yang berekstensi CSS pada alamat url http://www.nama_situs.com
dengan menggunakan perintah :
@import url (http://www.nama_situs.com/global.css);
- External Style
Dengan menggunakan teknik
ini kita dapat memanggil style CSS pada file CSS yang kita inginkan dengan
menggunakan perintah “Link rel” yang berfungsi untuk menghubungkan kedalam
sebuah style CSS eksternal dengan nama yang telah kita tentukan seperti terlihat
pada contoh :
<link
rel="stylesheet" type="text/css" href="default.css">
Dalam contoh diatas kita
menghubungkan sebuah dokumen html dengan sebuah style eksternal dengan nama
default.css yang telah kita buat sedemikian rupa sehingga style tersebut dihubungkan
untuk memformat tampilan dalam dokumen html tersebut.
Dalam mengimport file CSS,
kita dapat langsung mengimport beberapa file CSS sekaligus dalam sebuah dokumen
agar memperkaya tampilan dokumen kita seperti terlihat pada 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 kita dapat menggunakan
perintah :
<style>
<!--
@import
url(default1.css);
@import
url(default2.css);
@import
url(default3.css);
-->
</style>
Perbedaan dalam teknik
terakhir adalah perintah import tersebut akan mengambil style CSS dengan cara
import style dari alamat url yang kita tentukan. Cara ini lebih efisien
dikarenakan dokumen yang kita beri perintah import tersebut hanya akan
mengimport file css yang pada akhirnya, style CSS tersebut hanya perlu di
download sekali saja dalam dokumen style sheet eksternal yang terpisah dengan
dokumen HTML asli. Ketika surfing ke dalam situs anda maka CSS akan
disembunyikan dalam komputer user sehingga akan memperkecil ukuran file sebuah
situs yang kita buat. Jadi jika anda menggunakan cara terakhir ini, maka
sebelumnya anda harus membuat sebuah dokumen style CSS eksternal tersebut
dengan ekstensi .css dimana dokumen style tersebut berisi aturan yang akan
mengatur tampilan dokumen web yang dibuat
Artikel yang bagus, gan.Akhirnya saya ngerti bagaimana membedakan Inline,Internal dan External Style sheet-nya. Terus Posting terus ya gan... Oh ya, Pernekalkan nama saya Muhamad Asfarezhan NIM 1922500056, Saya Mahasiswa dari kampus STMIK ATMA LUHUR pangkalpinang. Bila ingin liat - liat tentang kampus ku silahkan kunjungin https://www.atmaluhur.ac.id
ReplyDeleteTerima Kasih