/* Blog untuk Penggemar Gratis dan Free: Memasang Kode CSS*/


Monday, March 16, 2009

Memasang Kode CSS

Cara memasang kode CSS terbagi menjadi tiga cara

  • Eksternal CSS
  • Internal CSS
  • Inline CSS

Eksternal CSS


Eksternal CSS sangat ideal digunakan jika kita punya kode CSS yang sama untuk beberapa halaman Web. Langkah membuat eksternal CSS:

Pertama kita harus menuliskan kode CSS nya dulu dengan teks editor kesukaan kita misalnya notepad kemudian simpan dengan ekstensi .css.

Kedua buat suatu link untuk memanggil kode yang telah kita buat tersebut. Link tag ini harus terletak didalam bagian head.
Contoh:
Untuk memudahkan pembahasan, kita coba aja yok …

Bukalah notepad anda, kemudian ketik kode dibawah ini:

p {
margin-left: 20px;
color: blue;
}

body {background: yellow}


dan simpanlah dengan nama coba-eksternal.css misalnya di folder d:\Ngeblog\
Kemudian Klik Menu-File-New, ketikkan kode berikut
<html>
<head>
<link rel="stylesheet" type="text/css"
href="d:\Ngeblog\coba-eksternal.css" />
</head>
<body>
<p>Coba Eksternal CSS </p></body>
</html>

Setelah selesai simpanlah dengan ekstensi .htm, misalnya d:\Ngeblog\coba-eksternal-style.htm , nah… sekarang saatnya kita mencoba kode css kita. Coba buka Internet Explorer kemudian klik Menu File – Open dan Browse untuk mencari d:\Ngeblog\coba-eksternal-style.htm.  setelah itu klik OK.
Coba rubah file css misalnya color : red atau yang lainnya dan tekan F5 pada browser mu untuk melihat perubahannya.

Internal CSS


Kita bisa langsung menuliskan kode CSS kita dengan menggunakan tag <style> pada bagian dokumen HTML. Internal CSS biasa dipakai jika setiap dokumen HTML memiliki kode yang berbeda-beda.


Contoh:
Yok kita buka kembali notepad nya    ( kalau udah ditutup XxXxXx)
Ketik kode berikut:

<html>
<head>
<style type="text/css">
p {
margin-left: 20px;
color: blue;
}
body {background: yellow}
</style>
</head>
<body>
<p>Coba Internal CSS </p>  
</body>
</html>



Kemudian simpanlah dengan nama coba-internal-style.htm. Untuk melihat tampilannya coba buka kembali Internet Explorer dan Open file coba-internal-style.htm tersebut.

Nah…. Udah tampil khan.


Inline CSS


Inline Css ialah cara menuliskan kode CSS langsung pada elemen HTML yang akan diformat. Cara ini biasa digunakan untuk memformat suatu elemen hanya untuk sekali saja.
Contoh:
Biasa…, buka notepad dulu….lalu ketik

<p style="color: blue; margin-left: 20px; background: yellow">
Coba Inline CSS
</p>

Simpan dengan ekstensi .htm dan buka dengan IE untuk melihat tampilannya.


CSS Gabungan


Kita bisa menggabungkan dua atau tiga cara penulisan CSS diatas sekaligus.
Perlu diingat: Jika suatu elemen memiliki lebih dari satu kode, maka dia akan menggunakan kode yang paling spesifik.
Bila terdapat pengaturan yang sama, maka Kode CSS yang dianggap paling spesifik adalah Inline CSS, kemudian Internal CSS dan terakhir Eksternal CSS.

Untuk meningkatkan kemahiran, silakan mencoba sendiri membuat contoh dokumen yang memiliki kode CSS lebih dari satu.
Bila udah mencoba… bilang ke saya yaaa…. XxXxXx… 
Ternyata CSS ga sesulit yang dibayangkan…, ya thoooo


Posted by Abu Daniyal at 3:28 AM
Labels:

3 comments:

  1. garsel brandedJune 13, 2012 at 11:49 AM

    wah..artikel yang bermanfaat nih. Izin membaca ya. Mampir ke blog garsel. Murah-murah loh

    ReplyDelete
  2. rudiSeptember 16, 2012 at 2:42 PM

    Wah bagus tutorialx.. sangat bermanfaat.. trimakasih..

    ReplyDelete
  3. AnonymousMarch 20, 2013 at 9:16 AM

    izin copas ya om , buat tugas :D thx bgt loh sangat membantu

    ReplyDelete

Subscribe to: Post Comments (Atom)