Belajar CSS Kode Dasar Untuk Pemula Tahap 1

  • 3 min read
  • May 25, 2020
Belajar CSS Dasar Di Lautan IT
Hosting Unlimited Indonesia

CSS (Cascading Style Sheets) adalah paket lengkap yang harus dipelajari ketika ingin berubah menjadi web developer. Bersamaan dengan kpde HTML (Hypertext Markup Language), bahasa pemrograman ini menjadi bahasa yang sebenarnya mudah dipahami. Kunci untuk memahaminya adalah tau tag HTML mana yang menjadi selektor serta paham penggunaan properti perubahan tampilan tag.

Oke mari kita mulai belajar dasar-dasar CSS (Cascading Style Sheets).

Pengertian CSS

CSS (Cascading Style Sheets), adalah format bahasa khusus yang terdiri dari kumpulan kode untuk mengatur tampilan dari tag HTML (Hypertext Markup Language). Tidak hanya untuk HTML saja, namun juga untuk jenis markup lainnya, seperti XML (Extensible Markup Language) dan SVG (Scalable Vector Graphics).

Implementasi pertama dari CSS (Cascading Style Sheets) diterapkan pada web browser Argo. Hingga saat ini, CSS (Cascading Style Sheets) terus mengalami perkembangan hingga menghasilkan 3 standar, yakni CSS 1.0, CSS 2.0, dan CSS 3.0.

Berikut adalah contoh kode CSS

Penulisan kode CSS

Terdapat 3 cara untuk meng-input kan kode CSS (Cascading Style Sheets), dalam kode HTML. 3 Cara tersebut adalah inline, internal, dan external. Tapi sebelum mempelajari ketiga cara penulisan tersebut, kita harus memahami bagian-bagian CSS terlebih dahulu. Bagian dari CSS (Cascading Style Sheets) adalah selector, declaration, property, dan value.

Selector, declaration, property, dan value

Untuk dapat memahami bagian-bagian dari CSS (Cascading Style Sheet) ini dengan mudah, perhatikan gambar dibawah ini..

Bagian CSS
Bagian CSS

Dari gambar di atas dapat dipahami bahwa setiap bagian CSS (Cascading Style Sheets) adalah sebagai berikut

Selector adalah bagian yang berisikan tag-tag HTML yang akan diubah tampilannya. Contoh pada gambar, maka tag p atau paragraf akan mengalami perubahan tampilan.

Bagian kedua adalah declaration area. Area untuk mendeklarasikan perubahan tampilan seperti apa yang diinginkan. Didalam area ini terdapat property dan valueProperty adalah jenis style dari tag yang ingin diubah. Sedangkan value adalah pengisi dari property tersebut.

Makna gambar di atas tidak lain adalah cari tag p lalu ubah pada bagian ukuran fontnya menjadi 18px (pixel). Berikan latar belakang tag p dengan warna hijau. Gambar pula secara tidak langsung mengajarkan kita cara penulisan CSS yang sederhana, yakni;

  • Awali dengan sebuah selector berubah tag.
  • Tuliskan property dan value dalam sebuah tanda kurung kurawal
  • Antara property dengan value terdapat tanda :
  • Antara property dengan property baru pisah dengan tanda ;
  • Akhiri property terakhir juga dengan tanda ;

Penulisan kode CSS (Cascading Style Sheets) sendiri bersifat case-insensitive, sama seperti HTML. Yakni tidak membedakan huruf besar maupun kecil. Tapi yang ini tidak berlaku jika tag yang menjadi selector diberi property tambahan seperti class. Kita akan membahasnya saat materi CSS Selector.

Untuk dapat membuat sebuah komentar cukup gunakan /* teks komentar */. Komentar tidak akan ditampilkan.

Kode CSS dimasukkan bersamaan ‘satu garis’ dengan kode HTML. Tag HTML ditambahkan property style. Lalu cara penulisan berikutnya mengikuti penulisan CSS tadi.

Berikut adalah contohnya

Pada akhir bagian setelah value, boleh tidak ditulis ; Tapi, jika ingin merubah 5 property dari tag yang ada, maka pisahkan dengan tanda ;

Cara ini banyak digunakan pada saat menggunakan blog atau wordpress.

CSS (Cascading Style Sheets) ditulis terpisah dari tag HTML, namun dalam satu halaman kode yang sama. Kode CSS tersebut ditulis diantara tag <style> </style>, tepat di dalam bagian tag <head>.

Berikut adalah contohnya;

Khusu untuk gaya eksternal, terdapat dua cara penulisan. Yakni dengan menggunakan <link> dan @import. Sesuai dengan namanya, kode CSS ditulis berbeda halaman (file) dari kode HTML. Lalu disimpan pada satu folder sama dengan file HTML. Mari kita coba…

Berikut adalah kode CSS yang disimpan dengan nama kodecss.css

Lalu ketika membuat kode HTML, sertakan tag <link> atau @import di bagian tag head. Perhatikan contoh ini..

Jika menggunakan @import, maka menjadi seperti ini

Penulisan kode CSS gaya eksternal dengan @import, haruslah dilengkapi dengan property tambahan berupa url dan ditulis diantara tag <style> dan <head>.

Mana yang terbaik ?

Semua jenis penulisan kode CSS di atas memiliki kekuragan dan kelebihan masing-masing. inline style sering digunakan untuk keperluan di blog atau wordpress. Namun sangat jarang digunakan ketika seseorang menulis sebuah kode HTML murni.

Penggunaan paling banyak dari programmer dalam menuliskan kode CSS(Cascading Style Sheets), adalah internal dan externalInternal style digunakan oleh programmer ketika membangun website yang hanya punya satu halaman. Ya, sebut saja seperti landing page. Sedangkan external digunakan ketika halaman yang dibuat lebih dari satu.

Kesimpulan

CSS (Cascading Style Sheets) adalah bahasa khusus untuk merubah tampilan tag HTML. Terdiri dari 4 bagian utama yakni, selector, declaration, property dan value. Penulisannya sendiri memiliki 3 tipe, yakni inline, internal dan external. Setiap penulisan memiliki kelebihan dan kekurangan masing-masing.

sumber : di bawah

Pratama, Andre. 2017. CSS Uncover Panduan Belajar CSS untuk Pemula.Padang Panjang : www.duniailkom.com

petanikode.com, w3schools.com

Hosting Unlimited Indonesia
Related Post :

One thought on “Belajar CSS Kode Dasar Untuk Pemula Tahap 1

Leave a Reply

Your email address will not be published. Required fields are marked *