Labels
Posted by

Inline, Embedded dan External CSS

Sebelumnya pasti anda sudah mengetahui fungsi dan kegunaan dari css yang sudah dibahas dalam artikel sebelumnya yaitu "Pengertian CSS (Cascading Style Sheet)".

Ada 3 cara memasang kode CSS ke dalam HTML yaitu :

  • Inline CSS
  • Embed / memasang kode CSS ke dalam bagian <head>
  • Link ke external CSS
INLINE CSS
Kode CSS di tulis langsung ke dalam tag HTMLyang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS. Cara ini sebaknya hanya di gunakan jika anda mau memformat suatu elemen satu kali saja. 
Contoh: 
<h1 style="color: red;">
H1 dengan CSS
</h1> 

Pada contoh si atas, elemen <h1> di format agar tulisannya menggunakan warna merah, elemen lain, tidak akan menggunakan warna merah karena format ini hanya berlaku pada elemen paragraf yang di tentukan kode CSS nya. Penulisan CSS dengan cara ini mulai dengan kata "style = lalu di ikuti dengan syntax Property:value;"

EMBEDDED CSS
Kita bisa menempelkan kode CSS di antara tag <head> & </head>. penulisan CSS dengan cara ini awalnya diawali dengan tag <style>----</style>.
Contoh :
<head>
    <style type=”text/css”>
         h1 {color : red;}
    </style>
</head>

EXTERNAL CSS
Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran ".css" atau ekstensi ".css". Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini. 

Contoh: 
  • Anda membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut. 
p {font-family: arial; font-size: small;} h1 {color: red; }
  • Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag <head> dan </head> 
<head> <link rel=”stylesheet” href=”style.css”> </head>
Labels:

Comments

Post a Comment

Silahkan Komentar jika ada pertanyaan atau ingin menambahkan artikel kami, komentar yang anda submit tidak akan langsung muncul karena akan kami moderasi dulu.
silahkan tunggu komentar anda muncul dan balasan dari kami

Popular Posts