Menambahkan External, Internal, dan Inline Style dalam CSS

FSODIC.CO.ID - Selamat pagi mblo, apa kabar hari ini sobat semua? Semoga baik pastinya. Di hari ini kembali lagi saya hadir melanjutkan posting kemarin tentang CSS. Di kesempatan kali ini, saya akan menulis bagaimana menggunakan Style dengan cara-cara yang berbeda. Sesuai judul dipost ini, style terbagi menjadi 3 yaitu:
1. External / Ekstenal
2. Internal 3. Inline

Langsung saja kita mulai dari Extenal / Eksternal Style:
Eksternal Style merupakan cara terbaik membuat desain situs untuk menghemat waktu yang mana hanya 1 file yang butuh kita ubah.
Penggunaan Style ini bisa dengan:

<head>
<link rel="stylesheet" href="file.css" type="text/css" />
</head>

Dan misalnya isi dari file.css adalah:
body {
background-color: red;
}
h1 {
color: blue;
margin: 30px;
}

Notice: Dalam penggunaan value jangan pisahkan kesatuan value tersebut dengan spasi. (Contoh: margin: 20 px). Cara yang benar tetap dengan margin: 20px.
Sebagai contoh situs yang menggunakan ekstenal style:
Image of Inline Style by fsodic.co.id

Selanjutnya kita ke Internal, sebenarnya Internal ini tidak jauh berbeda dengan ekstenal style. Kita hanya memindahkan isi file.css (dalam contoh diatas) ke dalam <head> style kita.

<head>

<style>body {
background-color: red;
}
h1 {
color: blue;
margin: 30px;
}</style>

</head>

Selanjutnya sekaligus yang terakhir adalah inline.
Inline mungkin berguna untuk membuat style yang berbeda untuk selector-selector tertentu.
Contoh:

<h1 style="color: blue; margin: 30px;">FS Heading</h1>

Pie mblo? Semoga menambah ilmu untuk sobat semua. Saya rasa cukup sekian dan jangan lupa add facebook saya di sini. Salam sukses untuk kita semua.

Back to Top