Apa itu CSS ?
CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan kumpulan kode-kode yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik. CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).
Pada desember 1996, W3C memperkenalkan Level 1 spesifikasi CSS atau juga dikenal CSS1 yang mendukung format, warna font teks, dan lain-lain. Kemudian, Mei 1998, W3C menerbitkan CSS2 yang di dalamnya diatur fungsi peletakan elemen. Dan sekarang, W3C telah memperbaiki dan meningkatkan Kemampuan CSS2 ke CSS3.
CSS digunakan oleh web programmer dan juga blogger untuk menentukan warna, tata letak font, dan semua aspek lain dari presentasi dokumen di situs mereka. Saat ini, hampir tidak ada situs web yang dibangun tanpa kode css.
Sebagai blogger, Anda juga harus tahu apa itu CSS dan bagaimana menggunakannya agar mudah untuk merancang blog anda. Kode CSS membuat pembaca blog kita menjadi nyaman dan betah berlama-lama di blog kita sehingga pageviews situs kitapun meningkat. Namun, itu semua tergantung bagaimana kita menggunakannya sehingga bisa memikat pengunjung. Untuk itulah serial tutorial ini dibuat 🙂 .
PENGENALAN DASAR
Cascading Style Sheet terdiri dari Selektor, deklarasi, Properti dan Nilai. Seperti pada HTML, PHP dan bahasa pemrograman lainnya, CSS juga memiliki aturan yang menulis itu sendiri.
Contoh penulisan kode css :
?Body? adalah Selektor, ?{ }? adalah deklarasi, ?background-color? adalah properti dan ?white? adalah nilai. Maksud dari kode diatas adalah mengatur warna latar belakang (background color) dari tag ?Body? sebuah halaman web.
CARA-CARA PENGGUNAAN CSS
Untuk latihan penggunaan CSS, langkah pertama yang harus anda lakukan adalah membuat file dengan menggunakan Software kode editor seperti Notepad, lalu namai file dengan format ?.html?. Lalu praktekkanlah cara-cara berikut ini. Ada 3 cara untuk menggunakan kode CSS di situs Anda.
1. CSS sebagai atribut/elemen/bagian dari tag HTML.
Oke, sebagai contoh, lihat gambar screenshoot kode CSS di bawah ini:
?Div? adalah tag html/Mark up yang dihiasi oleh kode css. kode cssnya adalah ?style =? padding: 5px 20px; ? ?. Cara ini biasanya dipakai jika kode cssnya sedikit.
2. CSS dalam tag <style type=?text/css?> (Kode CSS) </ style>.
Kode css terletak antara tag ?style? yang biasanya diletakkan dibawah elemen <title></title>(Tapi, tidak untuk gambar ini). Dengan cara ini anda harus menentukan nama selektor. Pada gambar diatas, selektornya adalah ?.download?.
3. CSS sebagai file terpisah.
Kode pada gambar diatas adalah kode html untuk memanggil kode css yang terpisah. Kode itu biasanya diletakkan dibawah elemen <title></title> pada sebuah file html. Dalam cara 3 ini, kode css berada pada file .css yang dibuat dengan cara yang sama yaitu dengan sofware notepad, namun diberi format .css.
Untuk Latihan cara 3 ini silahkan anda buat folder. Dalam folder itu anda buat lagi file .html, misalnya latihan.html . Lalu buat file css-nya misalnya style.css.
Dalam file latihan.html, silahkan ketikkan kode dibawah ini :
<head>
<title>Latihan</title>
<link rel=?stylesheet? href=?style.css? type=?text/css?/>
</head>
<body>
<div class=?download?>
<a href=?#?>Download</a>
</div>
</body>
<html>
Simpan, lalu buka di browser. File .html anda belum dihias karena kita belum menambahkan kode css kedalam file style.css. Jadi, silahkan masukkan kode seperti dibawah ini, tentu anda bisa merubah-rubahnya :
padding:5px 20px;
background:#000;
border:1px solid auto;
text-transform:uppercase;
font-size:20px;
}
setelah itu simpan, lalu refresh file latihan.html yang sedang dibuka di browser
Selamat mencoba 🙂 .
Keterangan :
Cara 1 dan 2 sebagian besar digunakan dalam blog blogspot/blogger. Sedangkan, Cara 3 biasanya digunakan dalam situs web berbasis wordpress ataupun yang lainnya, karena membutuhkan ruang untuk menyimpan file css.
Jika menggunakan cara2 dan 3, Anda harus melengkapi tag html yang akan anda hias dengan atribut ?id? atau ?class?. Ini adalah 2 cara untuk penamaan selektor pada kode css. Jika menggunakan atribut ?id? (misal: <div id=?download?></div>), maka selektor dalam kode cssnya adalah sebagai berikut :
Properti:nilai;
}
Sedangkan, jika menggunakan atribut ?class? (misal:<div class=?download?></div>), maka selektor dalam kode cssnya adalah sebagai berikut :
Properti:nilai;
}
Dengan kata lain, hanya dibedakan dengan tanda ?#? dan ?.? .
Nah, lalu jika anda ingin menghias tag tertentu dalam file html, misalnya seluruh tag h1 yang ada, Maka anda dapat menuliskan selektornya tanpa menggunakan tanda apapun. Seperti ini :
properti:nilai;
}
Jika anda masih ada yang belum ngerti dengan penjelasan saya diatas, silahkan ditanyakan lewat komentar.
Sekian dari saya. Semoga bermanfaat dan selamat belajar 🙂 .
~Muhammad Syakirurohman~
Wahyu Eka Prasetiyarini
Terimakasih banyak mas atas informasinya. Sangat membantu saya sebagai blogger pemula 🙂
Syakir Rahman
iyaa sama-sama mbak, selamat belajar 🙂
vozduh
thanks kang tutorialnya angat membantu sekali, saya juga masih dalam tahap belajar
Syakir Rahman
Yoo, sama -sama mas.. kita semua masih belajr disini 🙂
Nurul Imam
Detail banget mas, pokoke sipppp
Syakir Rahman
hehe, saya memang membuatnya untuk yang masih pemula mas 🙂
FARIZAH HAMID
tahniah! info yang bermanfaat..
http://www.bondasihat.com
nadianaim
confuse @_@
Mengaplikasikan CSS Di Jenis Halaman Tertentu Pada Blogger - ID MASHERIC
[…] CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language). Sumber […]
Rudhi Hadhi
Artikel yang cukup membantu untuk saya yang sedang belajar perkodean CSS dalam blog atau website sobb..
Namun, apabila suatu blog/website terdapat kesalahan data terstruktur bila di lihat dalam webmaster, apa ada kaitan atau kesalahan dalam pengaturan CSS nya sobb ? Mohon pencerahannya ?
Terima kasih
Syakir Rahman
Ngga ada sama sekali mas.. Kalo data terstruktur di web master itu kaitannya sama HTML..
Data terstruktur di webmaster tools itu menentukan data-data seperti author, tanggal, dan judul posting berdasarkan ‘class’ yang ada pada htmlnya.. Misalnya untuk author :
<div class="vcard author">Nama Author</div>
Rudhi Hadhi
Ouw begitu ya mas. .
cuma kalo di wordpress katanya untuk masalah HTML ini nggak bisa di otak atik ya mas, walaupun kita pakai wordpress yang hosting. betul nggak itu mas ?
Apa memang harus kita iklhas in aja blog yang mengalami kesalahan data terstruktur tersebut mas.
Terima kasih
Syakir Rahman
Kalo wordpressnya itu yang wordpress.com, iya ga bisa di otak atik.. Tapi kalo self hosted (wordpress.org), itu bebas mau digimanain juga..
Masalah data terstruktur bisa diatasi lewat edit templatenya..
Rudhi Hadhi
Ouw begitu ya mas.
saya pakai wordpress yang hosting itu mas. mungkin ada tutorial atau artikel yang membahas cara memperbaiki itu dari mas, mohon bantuannya mas.
terima kasih
Syakir Rahman
Oke nanti saya tulis mas di blog ini
wahid ubaidillah
mksh gan tutornya….sedikit pencerahan nih..
antiklopedia
terima kasih informasinya, sedikit mencerahkan meski masih sedikit bingung, hehe
Syakir Rahman
Yap. sama-sama.. belajar terus.. Semoga cepat paham heheh
jayatama
mumet mas….. :p
muhammad zainul amin
mas untuk pemula yang baru mengenal blog sperti saya ini. gimana ya caranya agar bisa dengan mudah belajar perkodean html dan css…
terimaksih ..
Syakir Rahman
Coba belajar di sini : w3schools.com.. Kalo rajin nyoba pasti cepet bisa
muhammad zainul amin
oh oke mas akan saya coba dulu ..
terimakasih atas infonya mas..
muhammad zainul amin
soalnya saya juga ingin mendalami ilmu blogger
hehe jadi mohon bimbingannya ya..
muhammad zainul amin
oke mas … akan saya coba dulu..
terima kasih infonya mas…
hargatronik
makasih infonya mas, sangat membantu saya yang masih pemula
Syakir Rahman
Yap. sama-sama
Post pertama | syifadenia
[…] ini, framework untuk pemrograman website yang sering digunakan adalah framework php dan framework css. Contoh framework php adalah CodeIgniter dan Zend Framework. Sedangkan, contoh framework css […]
adont
Mau tanya mass,saya baru belajar buat blog wp.
Kenapa dikolom komentar tidak bisa mengakses kode html seperti penebalan hurup dan lain2,trus cara memperbaikinya bagaimna mas
http://www.kingprediksi.com
Syakir Rahman
Secara defalut komentar di wordpress memang begitu.. yang bisa dipakai hanya beberapa tag html seperti yang tag berwarna pink di bawah form komentar..
Java Script | progammerweb
[…] Namun, penggunaan kode javascript ini tidak akan maksimal jika tidak dibarengi dengan penggunaan css karena javascript juga tidak akan lepas dari […]
Kasmawan purba
gan, artikelny bagus,,,sgt membantu,,,izin copas y gan?
Syakir Rahman
Jangan lupa cantumkan sumbernya yaah
Agie
Sya masih bingung juga mengelola website saya yang ini bengkeloblong
Antony
mas, gimana ya cara nampilin tabel pada xml dengan menggunakan css?
Syakir Rahman
Coba baca artikel ini : Membuat tabel lebih menarik
Sandi Mulyadi
Assalamualaikum, Kang.
Untuk mempersiapkan solusi cross browsing rendering, kira-kira CSS apa yang cocok digunakan untuk Material Framework ? Rencananya saya mau rombak total blog biar gak pake template blogger bikinan orang lain ^_^
Syakir Rahman
Waalaikumsalam kang sandi.. Kalau saya biasanya pakai bootstrap.. Crossbrowsingnya sudah oke, dan penggunaannya juga mudah.. Alternatif lain yaa foundation.
Sandi Mulyadi
hatur nuhun atas jawabannya, kang 🙂
ian
makasih ya mas aku lagi pengen dalemin php nih buat skripsi…
Hafez Fahrizal
Terimakasih infonya kak, sangat membantu dalam pembuatan blog saya meskupun saya agak sedikit bingung. 🙂
konveksi kaos bandung
salam kenal mas 🙂 dari konveksi kaos bandung. Artikelnya sangat bagus dan bermanfaat mas, buat nambah pengetahuan tentang css
Syakir Rahman
Salam kenal juga.. iya sama sama .. sukses selalu usahanya
oleholehdemak
makasih artikelnya gan ,ini sanagat meambah pengetahuan kami ….http://www.oleholehdemak.com/
Teka
🙂 🙁 banyaj sedih bingubg dooong :'( :’) 😛
ade sinta
puyeng ya -_- mau belajar main blog .
Pengantar Web Science | HELLO WORLD
[…] http://www.syakirurohman.net/2013/08/mengenal-apa-itu-css-dan-bagaimana-menggunakannya.html […]
JavaScript | nitayuliana13
[…] Namun, penggunaan kode javascript ini tidak akan maksimal jika tidak dibarengi dengan penggunaan CSS karena javascript juga tidak akan lepas […]
Java Script, Pengertian,Manfaat dan Fungsinya – nitayulianablog
[…] Namun, penggunaan kode javascript ini tidak akan maksimal jika tidak dibarengi dengan penggunaan CSS karena javascript juga tidak akan lepas […]
dandi
Nice artikel mass
http://www.dandiha.blogspot.com
Pbb Online
sedia software aplikasi untuk pemda salah satunya Sistem Informasi Pbb online kunjungi http://www.aplikasipemda.com
service ac di solo -dexaac
ini yang lagi saya cari cari mas makasih,, https://dexaac.wordpress.com/
Mengenal CSS (Cascading style Sheet) – Learning Together
[…] h1 { properti:nilai; } Sumber : www.devaradise.com […]
Mengenal CSS - SoGraViSc Digital Media
[…] Sumber : https://www.devaradise.com/id/2013/08/mengenal-apa-itu-css-dan-bagaimana-menggunakannya.html […]
Warman istiqomah
Lengkap sekali mas pemaparannya tentang kode css saya ingin belajar mengetahui detil kode css ini tapi belum bisa nih..
Pengertian Singkat Framework – Blog ResponWeb.com
[…] ini, framework untuk pemrograman website yang sering digunakan adalah framework php dan framework css. Contoh framework php adalah Yii, CodeIgniter dan Zend Framework. Sedangkan, contoh framework […]
Dani
puyeng….! tapi matap membantu tutornya. saya masi dalam tahap belajar.
Tugas Lab CSAS Resume_1 – hariswedira's blog
[…] ini, framework untuk pemrograman website yang sering digunakan adalah framework php dan framework css. Contoh framework php adalah CodeIgniter dan Zend Framework. Sedangkan, contoh framework css […]
HTML 5 CSS 3 Framewor – MR R.O.B.O.T
[…] ini, framework untuk pemrograman website yang sering digunakan adalah framework php dan framework css. Contoh framework php adalah CodeIgniter dan Zend Framework. Sedangkan, contoh framework css […]
Mengenal Apa Itu CSS Dan Bagaimana menggunakannya – RPL SMAKDA
[…] Sumber : https://www.devaradise.com/id/2013/08/mengenal-apa-itu-css-dan-bagaimana-menggunakannya.html […]
Demia Kami
Hallo, selamat siang, untuk merubah border page menjadi lebih lebar apakah ada caranya??
terima kasih sebelumny
syakirurahman
Bisa lebih spesifik border apa ?
secara umum sih kalo mengatur border begini kodenya :
border: 3px solid #ddd;
*tebalnya 3px, jenis border solid, warna #ddd (abu-abu)
vimax
ternyata ribet ya
wahyu
pak mau tanya, jika blog saya tidak menggunakan kode CSS apa ada pengaruhnya sama tampilan blog? ini blog saya http://www.bacainfobermanfaat.blogpot.com
mohon pencerahannya pak, terima kasih
syakirurahman
Yaa tampilannya ga akan bagus
Bagaimana cara membuat sebuah website sendiri? – Kebandingan Development
[…] CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language). “https://www.devaradise.com/id/2013/08/mengenal-apa-itu-css-dan-bagaimana-menggunakannya.html…; […]
Z
lengkap definisinya tapi sayang gak di sertakan sumber dari definisi dan sedikit sejarah nya itu. padahal menurut saya sangat penting mnyertakan sumber.
Syakir Rahman
Ini langsung dari pemahaman saya mas. Saya gunakan bahasa sendiri supaya lebih mudah di cerna oleh pembaca blog saya. Jadi, saya ga rekomendasikan untuk di catut dalam buku atau tulisan formal lainnya.
Ari Manurung
Terimakasih Ilmunya Gan, Semoga Bermanfaat untuk orang banyak gan, izin share gan