Aplikasi, Coding Kesehatan dan Tutorial

Thursday, August 31, 2017

Belajar CSS

alosobat.blogspot.co.id


Pengertian CSS
CSS adalah singkatan dari Cascading Style Sheet, tujuannya untuk mengatur tampilan website. Contohnya mengatur jarak antara baris, teks, warna dan format border bahkan tampilan file gambar. Perlu diingat, CSS hanyalah berupa kumpulan script yang fungsinya bukan untuk menggantikan HTML, melainkan pelengkap supaya dokumen HTML bisa tampil lebih cantik. 

Sejarah CSS
Sejak ditemukannya CSS  pada awal decade 90an yang dikembangkan oleh World Wide Web Consortium (W3C), CSS terus berkembang dan diserap oleh web developer. Hingga saat ini CSS telah mencapai versi ke-3. Versi ketiga lebih mempermudah penerapan animasi diantaranya animasi warna hingga animasi 3D pada halaman website. Selain itu, fitur yang ditambahkan di CSS 3 seperti multiple background, drop-shadow, border-radius, CSS math dan CSS objek model.

Kode CSS bersifat lintas platform, yang berarti script ini dapat dibaca oleh berbagai macam system operasi dan browser, hanya saja browser seperti internet explorer sering kali salah mengartikan script CSS yang menyebabkan tidak sempurnanya tampilan dokumen HTML. Script CSS harus perlu dioptimalkan supaya tampil maksimal pada browser internet explorer.

Memahami CSS
Belajar dasar css sebenarnya tidak terlalu susah banget cukup memahami beberapa hal sebagai berikut :
1. Penulisan/pendefinisian awal kode yang akan disisipkan di dokumen HTML
Pendefinisian  atau penulisan awal style bisa dilakukan pada tag <style> dapat dilihat contoh seperti berikut ini:
<style>
….
</style>

2. Mengetahui  kegunaan atau penulisan selektor ID dan class CSS di HTML
Pada selektor ID yang perlu diingat adalah nama ID tidak boleh sama dengan yang lain di dalam dokumen HTML, contoh :
<div id= “merah”>………</div>
<div id=”hijau”>…….</div>
Lalu bagaimana CSS  mengatur ID merah dan ID hijau dapat dilihat sebagai berikut :
<style>
#merah { height : 200px; width :100px; }
#hijau { padding: 20px; margin:0; }
</style>
Sedangkan untuk selektor class nama boleh sama, contoh :
<div class=”satu”>…..</div>
Untuk mengatur selektor class diawali dengan tanda titik (.) dapat dilihat sebagai berikut :
<style>
.satu { height : 200px; width :100px; }
</style>

3. Mengetahui aturan penulisan kode CSS untuk mengatur tag HTML.
Pada tag HTML seperti <body>, <h1>,<h2>< <hr>, <p>, <form>, <table> <a> dan yang lain-lain sobat bisa mencari di goole mengenai tag HTML, contoh :
Body { Background : red; }

4. Mengetahui property CSS dan value/nilai propertinya.
Property CSS sangat banyak,  disini hanya beberapa yang ditulisakan yaitu background, padding, margin, width, height, color, font-family dan lainnya, contoh :
Backround : red;
Margin: 10px 20px 0 4px;
Height: 200px;

Demikian sobat tutorial ini buat untuk pembelajaran bersama jika bermamfaat Alhamdulillah dan jika ada kekurangan semata karna ilmu saya masih dangkal dan jika ada kritik dan saran silahkan berkomentar di kolom yang telah disediakan, Assalamualaikum.

2 comments

Thanks artikelnya sangat membantu.

Artikelnya boleh dicoba bagi yang ingin mempercantik blog,buat template

Berkomentar yang baik dan sopan ya sobat