Langsung ke konten utama

Mengenal Dasar CSS

Hai sahabat adventura, hari ini ane balik lagi nie. Bersama dengan sebuah lagu dari Last Child - Tak Pernah Ternilai. Hehehe, tapi bukan itu yang mau kita bahas, melainkan dasar CSS. Yup, CSS itu apa sih?

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
(copas dari : http://id.wikipedia.org/wiki/Cascading_Style_Sheets)

Nah berikut tampilannya


masih sederhana banget ya, untuk Tutorial yang lebih advancenya bisa di download di blog dosen ane http://blog.rosihanari.net/ disitu komplit - plit kalo pengen belajar programming, terutama PHP.

Ini untuk download sourcenya ya :D


Oke sedikit kita mengulas ya coy, disitukan ada dua file satunya style yang berisi file cssnya, dan satunya css yang berisi codingannya.

<link rel ="stylesheet" type="text/css" href="style.css"/>
berfungsi untuk menhubungkan antara file css.html dengan style.css

<div id="kotak">
div berfungsi untuk membagi - bagi tampilannya jadi beberapa bagian, nah itu div dengan id kotak, berarti kita sudah memiliki satu komponen dasar namnya kotak. Terus di dalam div kotak dibagi lagi
<div id="header">, <div id="navigasi">, <div id="isi">, <div id="footer">

Nah intinya ada 1 kotak terus dipotong jadi 4, keliatan kan entu kayak digambar.
Id ini bukan sembarangan jadi nama id harus menyesuaikan dengan file cssnya, kalo di situ namanya style.css
misalnya <div id="kotak"> maka di dalam cssnya akan terdapat bagian seperti berikut

#kotak{
width:800;
margin:0 auto;
}

didepan tulisan kotak ditulis # karena merupakan id, jika class maka didepannya di tulis .kotak

Oh iya, setelah temen2 menulis

<div id="kotak">
biasakan menutup dengan
</div>

menurut http://kangtanto.com/web-2/css-web-2/pengenalan-id-dan-class-pada-css
bedanya id dan class, id hanya digunakan sekali pada komponen yang unik misal, footer, header, dll
sedangkan class digunakan untuk komponen2 yang selalu diulang - ulang misalnya pada paragraf, title dan heading.

kemudian di dalam style terdapat padding dan margin yang bedanya

(gambar dari http://gaptek32.blogspot.com/2012/12/perbedaan-dari-fungsi-margin-dengan.html)

padding untuk mengatur batas dalam komponen, misalnya mengatur jarak heading dengan gambar
margin untuk mengatur batas luar komponen kanan, kiri, atas, bawah.

Sudah jelaskah?
kalo belum yuk, koment - koment dibawah ini ya :)
Salam adventura :D

Komentar

Postingan populer dari blog ini

Contoh Free Software dan Open Source Terbaik

Hai - hai sobat adventura, ketemu lagi bareng ane di blog paling keren and kece ini. Masih ngelanjutin yang kemaren tentang macam - macam lisensi pada open source software. Nah sekarang kita akan bahas mengenai contohnya nie gan....

Browser
Browser adalah perangkat lunak yang berfungsi untuk menerima dan menyajikan sumber informasi di Internet. Sebuah sumber informasi diidentifikasi dengan Uniform Resource Identifier yang dapat berupa halaman web, gambar, video, atau jenis konten lainnya. Contohnya Mozila, Opera dan Chrome. Antivirus
Antivirus adalah sebuah jenis perangkat lunak yang digunakan untuk mengamankan, mendeteksi, dan menghapus virus komputer dari sistem komputer. Antivirus disebut juga Virus Protection Software. Aplikasi ini dapat menentukan apakah sebuah sistem komputer telah terinfeksi dengan sebuah virus atau tidak. Umumnya, perangkat lunak ini berjalan di latar belakang (baground) dan melakukan pemindaian terhadap semua berkas yang diakses (dibuka, dimodifikasi, atau keti…

Contoh Proposal Skripsi RND

Helo sobat adventura, ketemu lagi nie sama ane. Udah lama banget ane nggak nulis. Hari ini ane mau nulis tentang proposal skripsi. Sebelumnya ane mau cerita ada beberapa jenis skripsi yang perlu sobat tau, yaitu Kualitatif, Kuantitatif, RND, dan PTK.
Kualitatif yaitu jenis skripsi yang menggunakan analisis deskriptif. Contohnya riset tentang masalah sosial yang berada di masyarakat sekitar. Jadi kita sebagai peneliti melihat dan mendeskripsikannya dari hasil pengamatan analisa sosial yang kita temui di masyarakat.
Kuantitatif yaitu jenis skripsi yang menggunakan data sebagai sumber penelitiannya, data tersebut biasanya diperoleh dari angket yang selanjutnya diuji apakah valid atau tidak, dari data tersebut maka dapat diungkapkan apakah hipotesa peneliti dengan hasil penelitian sebelumnya mengalami perkembangan, sama atau gagal.
 RND, nah skripsi ane tentang ini gan. BTW, RND ini sebenarnya digunakan untuk penelitian S2 dan untuk S1 hanya diperkenankan sampai dengan uji kelayakan. Unt…

Step by Step Pembuatan Proposal Skripsi sampai Wisuda Jurusan Pendidikan Teknik Kejuruan

Hello sahabat adventura hari ini ane mau jelasin step by step menuju wisuda di FKIP terutama di JPTK UNS.

Yuk langsung aja :v
Buat dulu mini proposal buat ngajuain judul skripsi kamu disertai dengan 1 Jurnal internasional, KHS dan KRS semuanya diserahkan ke koordinator skripsi. Setelah semuanya mengajukan judul maka koordinator skripsi akan memploting dosen pembimbing untuk agan/sista. ( khusus PTIK)Cetak buku konsultasi skripsi (bisa ane buatin dengan ganti biaya cetak 3000 dan bisa di delivery). Buku konsultasi ini berfungsi buat mencatat hasil konsultasi skripsi kamu.[UPDATE OKTOBER 2017] Untuk beberapa dosen diwajibkan mencari 10 jurnal internasional dan 5 jurnal nasional sebagai refrensi bisa kamu lihat disini. (khusus PTIK)Mulailah menulis proposal skripsi kamu dari bab 1 - bab 3 beserta instrumentasinya. (Buat kertas HVS bisa juga cetak di ane, :v )[UPDATE NOVEMBER 2017]Setelah kamu diperbolehkan melakukan seminar proposal silakan melengkapi data peminjaman ruangan, dll --> D…