Metode Input CSS
Assalamualaikum wr wb, Selamat datang di blog saya, saya akan membagikan sedikit pembelajaran tentang Metode input CSS.
Secara garis besar, terdapat 3 cara
menginput kode CSS, yaitu metode Inline Style, Internal Style Sheets,
dan External Style Sheets.
Metode
Inline Style
Metode
Inline Style adalah cara
menginput CSS langsung kedalam tag HTML yang diperlukan dengan menggunakan
atribut style, contoh penggunaan Metode Inline Style CSS adalah sebagai
berikut:
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE
html>
<html>
<head>
<title>Contoh
Inline Style CSS</title>
</head>
<body>
<h2 style="background-color:black;
color:white" >
Text
ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>
|
Dalam kode diatas, saya menyisipkan
atribut style pada tag <h2>, nilai dari atribut style
ini adalah kode CSS yang ingin diterapkan.
Penggunaan tag CSS seperti ini
walaupun praktis, namun tidak disarankan, karena kode CSS langsung tergabung
dengan HTML, dan belum memenuhi tujuan dibuatnya CSS agar desain terpisah
dengan konten.
Metode
Internal Style Sheets
Metode
Internal Style Sheets,
atau disebut juga Embedded Style Sheets digunakan untuk memisahkan kode
CSS dari tag HTML namun tetap dalam satu halaman HTML. Atribut style
yang sebelumnya berada di dalam tag, dikumpulkan pada pada sebuah tag
<style>. Tag style ini harus berada pada bagian <head>
dari halaman HTML.
Contoh penggunaan motode internal
style sheets CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE
html>
<html>
<head>
<title>Contoh
Inline Style CSS</title>
<style
type="text/css">
h2 {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h2>
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>
|
Contoh metode internal style
sheets diatas sudah jauh lebih baik daripada inline style, karena
kita sudah memisahkan CSS dari HTML. Seluruh kode CSS akan berada pada tag head
dari HTML.
Namun kekurangan menggunakan internal
style sheets, jika kita memiliki beberapa halaman dengan style yang sama,
maka kita harus membuat kode CSS pada masing-masing halaman tersebut. Hal ini
dapat diatasi dengan menggunakan metode external style sheets.
Metode
External Style Sheets
Kekurangan dari metode internal
style sheets sebelumnya adalah jika ingin membuat beberapa halaman dengan
tampilan yang sama, maka setiap halaman akan memiliki kode CSS yang sama.
Metode
External Style Sheets
digunakan untuk ‘mengangkat’ kode CSS tersebut kedalam sebuah file
tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman yang
membutuhkan kode CSS, tinggal ‘memanggil’ file CSS tersebut.
Masih menggunakan contoh yang sama
dengan internal style sheets, tahap pertama kita akan pindahkan isi dari
tag <style> ke sebuah halaman baru, dan savelah sebagai belajar.css
Isi dari file belajar.css :
1
2
3
4
|
h2 {
background-color:black;
color:white;
}
|
Pastikan bahwa akhiran dari file
tersebut adalah .css dan untuk keperluan contoh kali ini, savelah pada folder
yang sama dengan halaman HTML kita.
Kembali kehalaman HTML, CSS
menyediakan 2 cara untuk menginput Kode CSS tersebut ke halaman HTML, yang
pertama adalah menggunakan @import
Contoh penggunaan @import CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE
html>
<html>
<head>
<title>Contoh
Inline Style CSS</title>
<style
type="text/css">
@import url(belajar.css);
</style>
</head>
<body>
<h2>
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>
|
Untuk metode @import external
style sheets ini, kita menyisipkan @import url(belajar.css); pada tag
<style>. Alamat pada bagian url bisa berupa alaman relatif
(seperti: folderku/belajar.css) maupun absolut (seperti
www.duniailkom.com/belajar.css).
Cara input kedua external style
sheets, adalah menggunakan tag <link>. Berikut contohnya:
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE
html>
<html>
<head>
<title>Contoh
Inline Style CSS</title>
<link
rel="stylesheet"
type="text/css" href="belajar.css">
</head>
<body>
<h2>
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>
|
Pada metode link external style
sheets ini, kita menggunakan atribut href pada tag <link>,
yang akan berisi alamat dari halaman CSS, dalam hal ini belajar.css
Dari ketiga jenis cara input CSS ke
dalam halaman HTML, yang paling direkomendasikan adalah metode external
style sheets, baik menggunakan @import maupun dengan tag
<link>. Karena dengan menggunakan kode CSS yang dipisahkan, seluruh
halaman web dapat menggunakan file CSS yang sama, dan jika kita ingin mengubah
seluruh tampilan halaman website, kita hanya butuh mengubah 1 file CSS saja.
Begitulah tentang metode CSS, semoga bisa membantu.
Cukup sekian dari saya, wasalamualaikum wr wb.
