Jun 8, 2010

Beberapa Cara Memanggil CSS ke dalam HTML


Kalau kemarin membahas "Mengenal Bahasa Pemrograman CSS", sekarang saya akan membahas sedikit cara memanggil CSS dalam HTML. Mungkin tutorial kali ini tidak sebaik yang Anda kira, jadi saya sebagai penulis, minta maaf sebelumnya...hehehehehe...
Pada dasarnya untuk memanggil file CSS ini ada 3 cara:
1. Membuat File CSS terpisah dengan HTML
2. Menyisipkan perintah CSS diantara <head></head>
3. Menyisipkan perintah CSS ke dalam perintah-perintah HTML.


1. Membuat File CSS terpisah dengan HTML.
Untuk membuat file CSS terpisah dengan HTML, Anda bisa membuat file dengan format .CSS dan setelah itu memanggil file Anda dalam HTML. Sebagai contoh, saya akan membuat file yang akan saya beri nama style.css,seperti ini:

h1{color:white; letter-spacing:-1px; margin:0; text-align:left; font:42px verdana;}
h2{font-size:1.6em; font-weight:normal; letter-spacing:-1px; margin:5px 0 10px; font: 22px verdana;}
img{border: 0px;}
blockquote {background-color: #666; color: white; font-style: italic; text-align: left; width: 300px; margin: 10px auto;}
code {color: #444;font: verdana, monospace;background-color: #f4f4f4;font-size: 1.2em;}

Dan untuk perintah pemanggilnya di HTML begini:
<link href="style.css" rel="stylesheet" type="text/css">
Dengan membuat demikian, maka file-file Anda akan simple, dan mudah kalau dilakukan pengeditan ulang.

2.Menyisipkan perintah CSS diantara <head></head>
Untuk bagian ini akan banyak Anda temui pada template-template blogger, seperti ini contoh perintahnya
<style>a:hover {
text-decoration: none;
color: blue;
font-size: 16px;}
</style>
 
Keuntungan bagian ini, Anda tidak perlu membuat 2 file, cukup 1 file dalam HTML, tetapi kelemahannya, jika file CSS Anda terlalu panjang dan Anda ingin mengadakan pengeditan, maka siap-siap saja pusing melihat perintah yang bertaburan...hehehehe

3. Menyisipkan perintah CSS ke dalam perintah-perintah HTML
Yang saya maksudkan pada bagian ini adalah perintah CSS nanti akan langsung dimasukkan dalam perintah HTML, sebagai contoh adalah demikian, saya memakai contoh jika saya mau memberikan style pada perintah HTML <blocknote>, seperti ini;
<blockquote style="font-color: white; font-size:12px;">Ini Adalah perintah <code><blocquote>...</blockquote></code></blockquote>
Mungkin sampai disini dulu, Anda bisa mencoba-coba sendiri pada file HTML Anda, seperti pembahasan kemarin tentang Penerapan HTML.

11 Comments:

forwarderodeng on June 8, 2010 at 9:34 PM said...

semakin pintar aja nieh,, padahal loekan bukan jurusannya,, bagus de,, banyak kemauan banyak juga kesempatan menanti.

Blogger Indo on June 8, 2010 at 10:50 PM said...

hehehehe...malu ni jadinya...tapi meskipun bukan jurusanku ni, tapi aku like with this program!!:-) So i like this to student this program!!

Ҝarlz on June 9, 2010 at 1:10 PM said...

q pernah coba dan ga2l.. ternyata cara panggil q yg salah.. HAHAHA.. ^-^ pas banget nich postingan-nya.. Thx udah d share

Note Of Life on January 30, 2011 at 8:41 AM said...

Lagi Tahap Dasar Skolah Di w3schools

Nurul Imam on March 5, 2011 at 6:07 PM said...

Kok Buat Cara pemanggilan Css Ke Url lain Ga Bisa Di Terapin

Ade on March 6, 2011 at 12:32 AM said...

@Nurul Imam: Mungkin bisa diberi contoh cara Anda memanggil Css ke URLnya?

Unknown on June 25, 2011 at 7:22 PM said...

Mas, butuh pencerahan nih.. knapa kalo saya pake yang no.1 itu pas aku simpan selalu hilang yo?
Nih alamat css-nya:

http://www.khus.us.ms/DeeZ_Style.css

Trus saya simpen di TambahGadget. Terimakasih sebelumnya.

Anonymous said...

mass tanya neh, css itu apa ya... maklum masih dasar banget.

madjongke on March 26, 2012 at 8:25 PM said...

Saya mau nanya. Kalau meletakan css dengan css lagi bisa gak. Misalnya .blog_title_before { terus di sini id css lagi }

Unknown on May 26, 2014 at 5:31 PM said...

blognya loadingny lama ...

Bundet on February 22, 2015 at 10:22 AM said...

Mantep gan, sekedar saling melengkapi saja,, Monggo silaken,

Rekomendasi Artikel Terkait ->
Format Tampilan Visual Web Dengan CSS3

Post a Comment

Your comments are very helpful this blog in the future. but do not spread the SPAM on this blog!

Followers

 

Mata Kuliah Teknik. Copyright 2010 All Rights Reserved.Template by Bloganol.com Detiablog