Dasar Dasar CSS dan Style HTML

  Kembali lagi dengan Saya Root@KandoL. Sebelumnya saya ucapkan Selamat Datang di blogspot KandolTechno. Dalam kesempatan kali ini gua akan membahas 

PENGENALAN CSS

Apa itu CSS?

  Pertama kita harus Tau apa itu CSS, semoga setelah membaca artikel saya kalian bisa tau apa itu CSS .Pernah muncul dipikiran saya apa sih itu css? Dan apa itu Singkatan CSS .Mari kita bahas!  CSS singkatan dari Cascading Style Sheeet, yaitu dokumen yang berisi definisi style untuk sebuah dokumen HTML atau untuk mengatur tampilan dari dokumen HTML, meliputi layout dokumen, pewarnaan dan tampilan font dan teks dan lain sebagainya. 

Dengan adanya Cascading Style Sheeet, konten dan desain web akan sangat mudah dibedakan, sehingga akan memudahkan dalam membuat halaman web yang banyak, yang pada akhirnya dapat memangkas waktu pembuatan web.

Struktur Penulisan CSS

CSS ditulis dengan format seperti berikut: }

property:value }
selector { property:value; property:value }

  Selector adalah bagian CSS yang berfungsi untuk memilih elemen yang akan dikenai style. Sedangkan,

  Property adalah jenis style yang akan diterapkan pada elemen, dan 

  value adalah nilai dari property yang digunakan. Property dan value CSS ditulis diantara kurung kurawal. Bila property CSS yang digunakan lebih dari satu, maka pisahkan dengan titik koma. Dan ingat Dalam Sebuah bahasa pemograman ,Salah sedikit bakal berakibat fatal.

Contoh penulisan CSS:

<style>
h1 {
    font-size: 50px; 
    color: green; 
}
</style>

<h1>Kandol Techno</h1>

  Pada contoh di atas, saya menulis h1 sebagai selector yang artinya saya ingin agar elemen <h1> pada HTML dikenai style. Property yang diterapkan. Dan font-size untuk mengatur ukuran font, disini saya setting font-size dengan nilai 50px, dan property color untuk mengatur warna teks, saya setting dengan nilai green.

Teknik Penerapan CSS

 Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu external, internal dan inline.

Inline Style Sheet

  Pada teknik ini saya menulis kode CSS di dalam tag HTML, tepatnya di dalam atribut style.

<h1 style="font-size:40px; color:orange;">
    Teks Judul
</h1>

 Teknik ini akan menerapkan style hanya pada elemen yang dikenai tag <h1 style sampai ditutup </h1>

Internal Style Sheet

  Teknik internal stylesheet adalah menuliskan kode CSS di dalam file dokumen HTML tapi dikumpulkan di dalam satu  elemen <style>.

<style>
h1 {
    font-size: 40px; 
    color: orange; 
}
</style>

<h1>Teks Judul</h1>

  Teknik ini akan memberlakukan CSS hanya pada dokumen HTML dimana ia disimpan.

External Style Sheet

 Teknik eksternal stylesheet adalah menuliskan kode untuk style CSS di file terpisah dengan kode HTML.

  Style di definisikan di dalam file, misalkan saya menuliskan seperti style.css:

/* style.css */
h1 {
    font-size: 40px;
    color: orange;
}

  kemudian style.css saya tautkan didalam dokumen HTML menggunakan tag <link> seperti dibawah ini:

<!-- index.html-->

<link href="style.css" rel="stylesheet" type="text/css" />
<h1>Kandol Techno</h1>

  Maka semua style yang ada di dalam style.css akan diterapkan ke dalam dokumen HTML. Keuntungan dari teknik yang gunakan ini adalah, CSS dapat diterapkan ke banyak dokumen HTML sehingga penulisan CSS menjadi lebih efisien.

CSS Properties

  Property digunakan untuk memilih jenis style apa yang akan diterapkan pada tag, class, atau id yang telah dipilih pada selector, dan pada satu selector bisa berisi beberapa property. Diantaranya sebagai berikut : 

1. background
2. border
3. box model
4. layouting
5. font & text, dll.

 Karena ada begitu banyak property CSS, maka kalian tidak perlu menghafal kan semuanya, cukup pahami apa fungsi dari property yang akan digunakan. Referensi property CSS lebih lengkap bisa kalian lihat di https://www.w3schools.com/cssref/

 Mungkin masih banyak yang belum saya Bahas dalam artikel kali ini Mulai dari  Selector dan Masih Banyak Lagi. Karna kuranganya pengetahuan saya ,Saya ucapkan mohon maaf sebesar Besarnya Atas kurangnya informasi dari saya. 

Share this post