Jika dalam tutorial CSS sebelumnya kita telah mempelajari Pengertian CSS, pada tutorial kali ini kita akan membahas cara menginput kode CSS ke halaman HTML.
Sebagaimana telah dipelajari pada saat pembahasan tentang HTML (pada artikel tutorial belajar HTML), HTML pada dasarnya adalah kumpulan dari tag-tag yang disusun sehingga memiliki bagian-bagian tertentu, seperti paragraf, list, tabel dan sebagainya. CSS digunakan untuk mendesain tag-tag HTML ini.
Secara garis besar, terdapat 3 cara menginput kode CSS ke dalam HTML, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.
Metode Inline Style
Metode Inline Style adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style, contoh penggunaan Metode Inline Style CSS adalah sebagai berikut:
<!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 tidak 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:
<!DOCTYPE html>
<html>
<head>
   <title>Contoh Internal 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 :
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:
<!DOCTYPE html> <html> <head>    <title>Contoh External 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:
<!DOCTYPE html> <html> <head>    <title>Contoh External 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.
Dalam tutorial CSS selanjutnya, kita akan membahas secara lebih detail cara penulisan kode CSS dengan mempelajari Pengertian Selector, Property dan Value pada CSS.
sumpah sangat membantu saya yg lg ambil skripsi web :D
Terimakasih kunjungannya, semoga bisa bermanfaat :)
Informasinya sangat bermanfaat untuk tugas saya pemrograman berbasis web, di kampus. Terima kasih banyak, semoga web ini semakin maju lagi, dan bermanfaat untuk orang banyak
Saya sangat senang jika artikel dan tutorial yang ada bisa bermanfaat,..:) semoga makin sukses dengan tugas kampus dan dapat nilai A :)
Sungguh sangat membantu sekali buat kami yang baru kenal dan ingin mengenal bahasa pemrograman web. Kemudahan penyampaian materi untuk ditangkap orang awam seperti kami ini. Jelas menunjukkan ketulusan hati penulis buat kemaslahatan umat. Semoga Allah menggantinya dengan imbalan yang sebaik-baiknya buat penulis…. Thanks berat….!!!!
Amiin… Terimakasih vendi, semoga artikel-artikel di duniailkom ini bisa bermanfaat… :)
masih bingung sama yg CSS ,-
Coba sambil praktek juga rahayu, dan dimulai secara berurutan dari tutorial pertama dasar CSS. Daftar tutorial CSS dapat dilihat di Index Tutorial Belajar CSS. Mudah-mudahan bisa cepat dipahami.
–
@import url(belajar.css);
–
Untuk fungsi yang import kok saya gagal ya :3 namun untuk fungsi href kok sukses :v
Mohon penjelasannya :D
Saya sudah cek ulang mas, dan tidak ada masalah. Namun kalau gagal, kemungkinan ada salah ketik atau bagian @import berada di luar tag <style>.
Saya ingin mengucapkan banyak terimakasih kepada admin, kerena telah banyak artikel-artikel di blog ini saya jadikan referensi pembelajaran saya mengenai css dan html…
Terimakasih kembali atas kunjungannya mas ibnu, saya juga senang artikel dan tutorial di duniailkom ini bisa bermanfaat.. :)
Blog yang bagus, bisa dijadikan referensi pembelajaran bagi pemula..
Silahkan gan, mudah2an tutorial CSS ini bisa berguna… :)
Saya telah mencoba yang external style sheet pada page di wordpress. Namun cssnya tetap tidak mau terhubung dengan file HTMLnya.
Itu apa harus menggunakan cara embeded style ya? atau ada solusi lain dari Duniailkom? saya tunggu jawabannya
Untuk menyisipkan CSS ke wordpress memang "susah susah gampang" gan. Karena efek cascading dari banyak sumber. Misalnya untuk merubah style tag <p>, bisa jadi theme yang digunakan sudah men-stylenya, belum lagi dari plugin-plugin yang juga membawa style CSS sendiri (Lebih jauh tentang cascading CSS: Tutorial Belajar CSS: Urutan Prioritas Selector CSS (Cascading))
Kalau boleh tau agan menginput kode CSSnya dari menu mana ya? Kadang di theme yang digunakan, ada menu "Custom CSS", nah disilah tempat terbaik menginput kode CSS. Atau kalau themenya tidak menyertakan menu tersebut, bisa coba input dari menu Appearance->Edit CSS, lalu coba periksa menggunakan tool web developer di web browser (tekan Shift+Ctrl+i) apakah CSS nya sudah masuk atau belum.
Saya juga sedang mengerjakan tutorial WordPress, namun masih menunggu versi wordpress 4.1 tgl 10 November nanti. Mudah2an berkenan menunggu :)
bagus artikel nya . kloo tempat donwload template website ny , tanpa edit input atau apa ?
ada gak mas?
Website duniailkom ini menggunakan wordpress, jadi untuk theme/templatenya bisa diambil dari https://wordpress.org/themes/ :)
Thank's mas, sangat membantu :)
Terimakasih juga atas kunjungannya Arifia :)
Terimakasih kang andree
sangat membantu
Thanx info ny mas.
Salam gan.. style css antara external dan internal untuk masalah loading blog lebih baik yang mana untuk lebih cepat? semoga infonya bermanfaat buat blog saya
Efeknya sih g terlalu terasa gan. Lebih ke tujuan penggunaannya. Jika kode CSS tersebut hanya digunakan untuk 1 halaman saja, maka sebaiknya menggunakan Internal CSS hanya di halaman tersebut. Tapi jika kode CSSnya digunakan untuk lebih dari 1 halaman, sebaiknya gunakan External CSS.
Tolong tips dari mas andre, klo misalkan 1 file css untuk banyak page .
Gmna ya cara pemanggilan selector / id / class HTML-nya ??
Karena desain web yg page satu belum tentu persis tata letaknya dengan page yg lain .
Terima kasih
terima kasih atas informasinya pak,saya sangat senang sekali bisa menerima informasi yang anda share
thanks gan tutorialnya
wah mantap, sy baru mengerti apa itu css dan html biasa (Y)
keren tutorial nya! :)
Thanks gan buat tutorialnya sangat membantu sekali bagi saya pemula belajar html Dan css.
Sama2 gan, senang bisa bermanfaat.. :)
Gan! wi udh 17 kali mncoba dn teliti dlm mnginput/tag/mnyatukan html ddan css yg trpisah. Tpi, blm brhasil2, gan. Wi bingung. Apkah dlm soal tag it hrus mnggunkan XAMMP juga ap gymna, gan? mohon pncerahannya :D thnx
G perlu XAMPP kok kalau cuma buat HTML dan CSS. Contoh dihalaman ini juga sudah menyatukan HTML + CSS kedalam 1 halaman. Silahkan dicoba lagi :)
Mastha quh mau nanya nih..
g mana caranya agar kode inspeksi halaman web kita gak bisa di liat orang?
Maksudnya agar source code HTML di web/blog kita g bisa dilihat y?
Tidak bisa gan, karena seperti itulah HTML, CSS, dan JavaScript bekerja. Seluruh kode HTML, CSS dan JavaScript bisa dilihat oleh siapapun.
Khusus untuk JavaScript, bisa 'disembunyikan' dengan membuat kode yang 'aneh'. Kodenya tetap ada, tapi g akan bisa dibaca. Contohnya, coba cek source code situs google.com :)
Salam mimin. blognya keren buat saya yang baru belajar, salut buat mimin.
Kalo mau menyisipkan External Css ke Html di Blogger gimana caranya min?
Terimakasih gan.. :)
Mengenai blogger, saya g terlalu familiar gan, lebih banyak utak-atik wordpress, hehe…
maaf kang, nanya..!
kalau misalkan kita sudah membuat file dokumen di folder. terus kita menyimpanya di mana untuk bisa dijalankan di wordpress?
File dokumen ini isinya apa y mas? :)
Kalau untuk menjalankan wordpress, kita harus mengikuti aturan yang ada di dalam wordpress. Jika yang dimaksud ingin menambahkan kode CSS, sebaiknya dari dalam admin wordpress mas. Worpdress punya mekanisme sendiri file mana yang akan dijalankan, dan ini diatur dari dalam kode PHP wordpress.
file css yng terpisah dari halaman html. yang di input dengan metode @import/external style sheet.
Khusus di wordpress, cukup repot jika ingin menginput kode CSS sendiri mas, soalnya kita harus paham struktur theme wordpress.
Cara yang disarankan adalah dari menu "costum CSS" di admin wordpress (hanya tersedia di theme-theme tertentu saja), atau cari file style.css di folder wordpress\wp-content\themes\nama_theme\
kalau design menu , diklik baru muncul isi dari menu"a gimana yak ?
Itu sudah gabungan HTML, CSS dan JavaScript sis. Lumayan rumit tuh buatnya. Misalnya untuk memproses apa yang terjadi ketika sebuah objek di klik, ini hanya bisa dilakukan dengan JavaScript, contohnya bisa kesini: https://www.duniailkom.com/tutorial-belajar-jquery-pengertian-jquery-event-dan-cara-penggunaannya/
bisa dicoba ini… thanks banget :)
sudah saya praktekan yang ekternal baik dgn import url atau link, live di blogspot dengan google drive untuk menyimpan external css nya, thanks:)
Artikelnya bagus, sangat membantu buat kami yang baru belajar pemograman web,semoga web ini bisa terus update dan tetep bisa bantu para pemula yang laen..
Amiin gan, saya akan usahakan situs duniailkom terus hadir dan update dengan materi2 terbaru…
Selamat malam para agan-agan dan senior..
mohon pencerahannya bagaimana caranya menuliskan kode php kedalam kode css.
contoh kasus :
background: url(…/saya ingin menulis script php disini untuk memanggil gambar) no-repeat 0px 0px;
background-size:cover;
jadi ketika saya upload gambar baru tidak harus manual untuk menggantinya.
terima kasih sebelumnya..
Kalau sekedar menampilkan dengan PHP, bisa seperti ini gan:
<?php
$alamat_gambar = "image/background/gambar.jpg"
?>
background: url('<?php echo "$alamat_gambar";') ;
Disini alamat gambar disimpan ke dalam variabel $alamat_gambar PHP. Tp mengenai "g harus manual untuk menggantinya", tergantung gimana kode program PHP yang dibuat, dan bisa cukup kompleks (misalnya menggunakan form upload).
Terima kasih pencerahannya Mas Andre
Sudah saya praktekkan penjelasannya tapi belum juga berhasil Mas, mungkin saya terlalu gaptek ato penjelasan saya yang kurang detail.
Kasus saya seperti ini detailnya Mas :
-Script pada halaman (banner.php) adalah seperti dibawah ini:
<div class='bannerslider'>
<?php
$banner=mysql_query("SELECT * FROM bannerslider ORDER BY id_banner LIMIT 3");
while($b=mysql_fetch_array($banner)){
echo "<h4>Bla bla bla</h4>";
}
?>
</div>
— — —
-Script pada halaman (style.css) adalah seperti dibawah ini :
/*script aslinya seperti ini*/
.bannerslider{
background: url(../gambar_banner/banner.jpg) no-repeat 0px 0px;
background-size:cover;
}
pertanyaan saya :
.bannerslider{
background: url('bagaimana memanggil gambar banner.jpg tersebut dengan script php') no-repeat 0px 0px;
background-size:cover;
}
sehingga setelah saya upload gambar banner.jpg, maka gambar banner.jpg akan tampil sebagai background secara otomatis.
Terima kasih sebelumnya.
Kalau seperti itu sudah cukup rumit gan, harus pelajari dulu semua kode program yang digunakan untuk upload gambar (form upload), gimana cara menyimpannya ke database, dimana alamat gambarnya, dst. Butuh puluhan atau ratusan baris kode program lagi nih.
Assalamualaikum gan.
Punya tutorial tentang penerapan CSS pada PHP gak, klw punya saya minta link nya.
Contohnya utk skrip php sperti ini gan :
<?php
$gambar = include "logo.jpg";
$teks1 = "qwerty";
$teks2 = "qwerty";
///
echo $gambar;
echo $teks1;
echo $teks2;
?>
saya pingin si $teks1 dan $teks2 ini berada di samping kanan $gambar penempatannya.
terima kasih gan.
sukses selalu.
Walaikumsalam..wr..wb
<?php
$gambar = include "logo.jpg";
$teks1 = "qwerty";
$teks2 = "qwerty";
///
echo $gambar;
echo $teks1;
echo $teks2;
echo "$gambar style='width:200px; height:40px; float:left; margin-right:5px;'";
echo $teks1;
echo $teks2;
?>
untuk ukuran gambar bisa disesuaikan lebar dan tingginya (width dan height).
float: left untuk menempatkan posisi gambar sebelah kiri.
dan untuk margin-right nya bisa di sesuaikan kebutuhan
semoga membantu
thanks bang :)
langsung saya praktekin skrang.
oh iya, nama wblog nya apa gan?
Selamat siang Mas Andre
untuk kasus pertanyaan saya diatas "di halaman css: ..background: url('bagaimana memanggil gambar banner.jpg tersebut dengan script php') no-repeat 0px 0px; .."
script asli php saya untuk memanggil banner.jpg seperti dibawah ini Mas :
<?php echo "<img src='gbr_banner/$b[gambar]' /> "; ?>
nah.. script php ini akan saya tuliskan ke dalam script css tersebut tetapi tidak bisa berfungsi
saya sudah membuat untuk script upload dan lainnya sudah lengkap semua.
tutorial menulis html ke dalam css .. ada
tutorial menulis css ke dalam html .. ada
tutorial menulis css ke dalam php .. juga ada
tutorial menulis php ke dalam css .. tidak menemukan
hingga saat ini saya mencari-cari tutorial penulisan script php ke dalam script css tidak menemukan, mungkin Mas Andre dan Agan-Agan senior bisa membantu
Terima kasih banyak sebelumnya, semoga ilmu dari DUNIAILKOM ini bisa bermanfaat buat yang lain.
<?php echo "<img src='gbr_banner/$b[gambar]' /> "; ?>
dari skrip di atas 'gbr_banner' maksudnya apa gan? nama folder?
betul mas, itu nama banner
betul mas, seperti yg saya ungkapkan diatas semua script dan database semua sdh saya buat.
dan itu terhubung dengan database mas
itu terhubung ke database gak mas?
jika filenya terpisah di folder coba skrip ini gan :
echo "<img src=\"".$b['gambar']."\"><br>";
ket:
field 'gambar' di database agan isinya "images/namagambar.jpg" (images=nama folder, namagambar.jpg=nama gambarnya)
kode <br> bisa di hilangkan jika perlu
smoga mmbantu
terima kasih mas Ali…
ilustrasinya begini :
halaman style.css isinya :
No.11. background: url ("../gbr_banner/banner.jpg") no-repeat 0px 0px;
halaman slider.php isinya :No.22. <?php echo "<img src='gbr_banner/$b[gambar]' /> "; ?>
kasus :
– banner.jpg tampil sebagai background statis yg di panggil dari script css tersebut, dan setiap kali ingin mengganti backgroundnya maka langkahnya harus manual harus masuk ke cpanel > public_html >bla.bla.bla.
pertanyaan :- bagaimana menuliskan script php No.22 kedalam script css ini background: url ("..script php… ") no-repeat 0px 0px;
sehingga ketika saya ingin mengganti slider backgroundnya tidak manual harus masuk ke cpanel > public_html >bla.bla.bla.
tetapi cukup dari form upload gambar di admin area.
catatan:
-semua script dan database sudah kami buat semua lengkap.
-saya hanya ingin menerapkan kode script php ke dalam kode script css saja.
terima kasih mas Ali dan Agan-agan semua
klw itu mah saya gak tau gan belum nyobain soalnya, mungkin skrip yang agan tulis sprti ini
<?php echo "<img src='gbr_banner/$b[gambar]' /> "; ?> di dalam nya prlu tmbahan file koneksi ke databasenya stelah <?php
Btw, itu file belajar.css disimpan dimana?
Silahkan dibaca2 lagi tutorialnya dengan perlahan gan, sudah ada saya tulis kok:
"Pastikan bahwa akhiran dari file tersebut adalah .css dan untuk keperluan contoh kali ini, savelah pada folder yang sama dengan halaman HTML kita".
Syarat untuk bisa mempelajari CSS harus paham HTML dulu, jadi seharusnya agan sudah paham maksud kalimat diatas…
gimana caranya jika ingin memasukkan kode-kode css, tag-tag <div> semacam itu, kedalam PHP???
Tinggal ditulis langsung saja gan, silahkan pelajari dasar2 HTML, CSS dan PHP, nanti akan paham sendiri gimana cara penggunannya. Tp kalau lompat langsung ke PHP tanpa paham HTML dan CSS memang akan bikin bingung…
Mas Bagus Swastika .. tentang pertanyaannya yaitu "gimana caranya jika ingin memasukkan kode-kode css, tag-tag <div> semacam itu, kedalam PHP??? "
Sebelumnya mohon maaf jika salah dan mohon koreksi dari para senior.
Mungkin sedikit contoh dibawah ini cara memasukkan script CSS ke dalam PHP :
<?php
echo "<img style='height: 80%;
width: 20em;
float: left;
margin-right: .5em;
margin-bottom: 0em;
margin-top: 1em;
position: relative;'
src='gambar/$r[gambarku]' title='ini gambarku' >";
?>
Perhatikan tulisan tanda petiknya.
Semoga bisa sedikit membantu
bisa juga seperti ini
<?php
echo "<div style='height: 80%;
width: 20em;
float: left;
margin-right: .5em;
margin-bottom: 0em;
margin-top: 1em;
position: relative;'>
<img src='gambar/$r[gambarku]' title='ini gambarku' >
</div>";
?>
Perhatikan tanda tag-tag dan petik-petiknya
Semoga membantu
terimakasih gan , ane jdi terbantu …
Siip gan… sama2.
Memisahkan file html dengan css
Tapi bila dipanggil jadi 1 seperti index. Html
Makudnya external CSS ya? yup betul, konsepnya memang seperti itu
dimanakah sebaiknya file css disimpan ? kalau seandainya disimpan dalam HD PC, bagaimana memanggilnya ke dalam halaman blog, ?
Untuk blogspot, kode CSSnya harus ditulis ke dalam template langsung. Kalau untuk website umum yang diletakkan di web hosting, file CSS ditempatkan bersama2 di web hosting dengan file HTML, JavaScript, dan PHP.
Mas Tolong tipsnya,
Bgimana cara pemanggilan selector/id/class HTML ke file CSS yg baik & benar ?
Maksudnya, misalkan kita mau membedakan desain page 1 dengan page yg lain .
Agak bingung juga soalnya .
Terima kasih
Nanti di file CSS external dibuat kelompok2, misalnya ini kode untuk halaman admin, ini kode untuk halaman home, ini kode untuk halaman kontak, dst. Kurang lebih seperti pembagian untuk posisi header, menu, konten, dan footer seperti yang saya pakai di case study buku CSS Uncover.
Tidak masalah walaupun ada kode CSS yang tidak dipakai di sebuah halaman, karena memang bukan ditujukan untuk halaman itu.
Tapi jika kode CSSnya hanya digunakan untuk 1 halaman saja (tidak ada kemungkinan di gunakan oleh halaman lain), cukup pakai internal style CSS. Kita tidak perlu pakai external style untuk kasus ini. External CSS hanya pas untuk kode yang dipakai lebih dari 1 halaman.
Kak mau tanya membuat file javascript bergabung dengan css menjadi 1 wadah </style>
Tidak bisa gan, untuk JavaScript harus menggunakan tag <script>, tidak bisa digabung dengan <style>.
Permisi mau tanya dan minta bantu… Ane bikin tugas web php dr kampus. Link css sblumnya bisa di edit ,tp setelah komputer di reboot,css ane edit ,misalkan ganti warna,tp di browser tidak ada perubahan, ada yg pernah ngalamin atau nggak?Mohon d bantu… Terimakasih
Mungkin terkena efek cache web browser, jadi halaman yang diakses adalah yang versi lama (tersimpan di cache web browser).
Solusinya, coba akses halaman tersebut, kemudian tahan tombol SHIFT sambil tekan tombol reload, atau bisa jika tekan SHIFT + F5. Alternatifnya, bisa tes akses dengan web browser yang berbeda.
Gan maaf saya masih bingung dengan external sheet :
1. untuk metode @import apakah bisa menggunakan absolute link seperti pada metode link ?? bagaimana contoh penggunaan nya ?
2. apakah fungsi dari atribut rel pada tag link ??? apakah manandakan relatif ? dan value / nilai dari atribut rel="stylesheet" ??
Satu lagi gan apa ya fungsi dari type="text/css" ?
1. Yup, bisa. Contohnya seperti ini:
@import url(http://absolute-path.com/css/some-styles.css);
2. "rel" itu singkatan dari dari "relationship" berisi jenis 'hubungan' dengan file yang di link. Perintah rel="stylesheet" artinya file yang sedang di-link-kan berupa file stylesheet (CSS).
3. Atribut type="text/css" fungsinya untuk memberitahu kepada web browser kalau file yang di link merupakan file CSS. Di dalam HTML5, atribut ini tidak perlu lagi ditulis.
Pembahasan seperti ini saya siapkan di eBook CSS Uncover, silahkan di order apabila butuh penjelasan lebih detail terkait CSS :)
hehehe terimakasih gan penjelasan nya. senang bisa belajar di website ini. nanti kalau ada rezeki saya order gan :)
tutorial yang sangat bagus dan membantu bagi pemula seperti saya yg harus banyak belajar.. makasih Om Admin,,sukses buat webnya. moga jadi ilmu yg bermanfaat, menjadi amal buat om admin,,, aminnn…..
Amiin.. terimakasih juga untuk doanya.. :)
saya cuma bisa membantu dengan mengklik iklan
Terimakasih :)
Masukin kode css kalau nanti mau disave file Ekstensi nya harus tetap .html yak agar bisa view browser?
Sebab kalau .css kembali ke view code nya
Betul, file .css hanya untuk membuat file external CSS. Halaman webnya sendiri tetap .html
Thanks gan andre :)
terima kasih banget mas duniaikom , tutorial nya keren mas tentang belajar css cara menginput kode css ke halaman html nya mas , kalau cara membuat template blog ada gak mas ? , kalau ada di kasih saya ya mas. mau belajar buat template blog .
Untuk pembuatan template blog saat ini belum tersedia, tapi requestnya akan ditampung…
ok termkasih atas informasinya..
Terimakasih mas belajar tentang menginput code CSS, saya akan belajar mas cara belajar code cssnya mas.
h2 {
background-color:red;
color:white;
}
.warna {
color: blue;
}
.paragraf {
background-color:red;
color:black;
font-size: 30px;
}
ini saya pakai external style, tapi class paragraf nya kok tdk berfungsi ya min wktu sy panggil ? trs class warna itu pertama saya pakai 'red', tapi kok nggak ganti ya ? padahal uda saya save. tapi misal itu smua saya buat internal style berfungsi semua, dan bs ganti sewaktu sy save, kira2 knapa min ? trima kasih..
Terimakasih Gan .tutorial belajar css sangat padat dan jelas sekali walaupun dalam penerapannya saya masih bingung .maklum aja masih baru. salam kenal aja gan dari my blog bima hartono .jika berkenan mampir ke blog saya. mohon saran dan masukan untuk penulisan artikel di blog saya baik tulisan atau lainnya.
Materi web programming seperti HTML, CSS, PHP, dkk baru berguna jika webnya dibuat manual. Kalau pakai blogspot, kita tidak perlu berurusan dengan kode2 ini, cukup cari template yang sesuai…
Mas andre kalau input kode css ke template blogspot menggunakan cara apa yah?
Caranya bisa dari menu template -> Edit HTML. Tapi kode CSS di blogspot sudah bergabung dengan kode2 untuk template. Jika salah edit, tampilan blogspot jadi berantakan semua..
mau nanya,
kalau fungsi <link rel=""> , rel yang dimaksud untuk apa ya??
soalnya saya buka source code web ini, disitu link relnya ada icon dan profile, saya pingin tau kegunaannya buat apa.
maaf apabila pertanyaannya konyol, saya masih belajar.
Atribut rel singkatan dari relationship. Fungsinya lebih ke keterangan tambahan untuk robot seperti search engine (Google, Bing, dkk) untuk menjelaskan apa hubungan halaman saat ini dengan yang di link-kan tersebut. Tapi ini sifatnya opsional, boleh ditulis boleh tidak dan tidak ada pengaruh apa-apa ke tampilan web.
Haiii Min….
Mau tanya nihh, website ini mimin buat sendiri ato gimana?
Mohon dijawab ya…
Website ini benar2 membantu saya yg sedang belajar pemrograman dasar
Tq Min
Hehe, saat ini web duniailkom memang hanya saya kelola sendiri (single fighter).
Min itu maksudnya yg <style type="text/css"> itu cuma bisa berfungsi di tag <h2> doang yah min ??
Kebetuan dalam contoh ini isi kodenya memang hanya untuk mengubah tampilan tag <h2>, silahkan lanjut ke materi berikutnya yang akan membahas tentang selector.
Terima Kasih sangat berguna, saya belajar dari awal html lanjut dgn yg lain dari duniailkom untuk menunjang Semester Pendek kali ini.
Sebenarnya simple dipahami bagi pembaca. Untuk halaman ini. Saya ingin memberi komentar saja hee, supaya lebih rapi lagi memberi keterangan dalam kodingan. Dalam contoh internal dan external cara penulisan css masih dgn kata-kata "inline".
Semoga duniailkom terus berkembang dan lebih banyak reader di duniailkom yg bermanfaat ini.
Oh iya… terimakasih koreksinya. Sepertinya lupa di edit bagian tersebut.
Sukses juga dengan semester pendeknya…
kak aku tuh udah coba, tapi kok pas aku simpan dengan save as typenya css** kok gk kebuka yaa??
Mungkin bisa diperiksa lagi apakah nama filenya sudah sama atau belum. Selain itu untuk contoh pada halaman ini, file belajar.css harus ada pada folder yang sama dengan file .html.
Min lebih baik mana, pakai @import atau pakai tag link?
Terima kasih min atas jawabannya?
Keduanya bisa dipakai, tapi lebih umum pakai tag