Belajar CSS : Apa itu CSS ? Pengertian, Konsep, Struktur dan Kode Program CSS

Faktanya, pada tahun 2018 pengguna internet di Indonesia mencapai 200 juta dan akan mengalahkan Jepang. Itu artinya, terjadi pertumbuhan yang cukup signifikan terhadap jumlah pemakai internet di negeri ini.

Tapi tidak hanya itu...

Menurut APJII (Asosiasi Penyelenggara Jasa Internet Indonesia), bahwa pada tahun 2020 itu Indonesia akan menjadi negara keempat dengan pengguna internet terbanyak di dunia (setelah China, India, Amerika Serikat, dan Brazil).

Dengan kata lain, di masa yang akan datang banyak orang Indonesia yang berada pada dunia online. Otomatis, banyak sekali website-website yang lahir untuk meraih keuntungan dari ledakan drastis pengguna internet di Indonesia.

Tapi, fakta muramnya banyak orang yang  tidak segera membuat website sedangkan mereka tahu peluang yang akan terjadi akibat kenaikan jumlah pengguna internet di Indonesia.

Entah karena alasan tidak tahu cara membuat website, tidak memiliki jiwa seni sehingga tidak bisa mendesain sebuah website agar tampil menarik dan mobile friendly, atau bahkan malas untuk membuat website karena tidak mengerti bahasa pemrograman.

css adalah


Kalau Anda termasuk yang pertama dan kedua, Anda bisa melanjutkan artikel yang sedang Anda baca ini tentang CSS. Tapi, kalau Anda termasuk yang ketiga, Anda bisa baca artikel tentang cara efektif menguasai bahasa pemrograman tanpa mengeluarkan uangyang banyak.

Kalau diajak berbicara tentang teknologi dan dunia online (website, bahasa pemrograman), banyak yang sudah takut duluan. Padahal tidak susah mempelajari hal-hal seperti itu. Hanya saja banyak istilah-istilah asing yang terdengar asing bagi Anda yang baru menggeluti dunia teknologi.

Contoh-contoh istilah asingnya adalah seperti HTML. Intinya,  HTML itu merupakan dasar dari sebuah website. Sebelum belajar CSS, saya sarankan Anda belajar HTML terlebih dahulu supaya tahu pondasi-pondasi yang sangat fundamental bagi sebuah website.

Apakah Anda ingin memiliki website dengan tampilan yang menarik, template yang mobile friendly sehingga pengunjung Anda tidak kabur ketika melihat website Anda ?

belajar css


Tenang saja, kabar baiknya saya akan memberikan panduan/cara membuat website yang menarik dan dinamis. Tapi sebelum itu, saya sarankan baca artikel tentang cara dan apa saja yang harusdikuasai untuk belajar membuat website yang menarik dan bisa menghasilkan uang.

Tapi, salah satu elemen penting yang harus dikuasai dalam belajar membuat website adalah CSS.

Apa itu CSS ?

CSS adalah Cascading Style Sheet. CSS itu bukan termasuk ke dalam bahasa pemrograman, tetapi CSS adalah bahasa markup. Karena di dalam CSS ini tidak terdapat deklarasi variabel, aritmatika, perulangan dan perintah-perintah lainnya.

Itulah perbedaan antara bahasa pemrograman dengan bahasa markup.

Pada intinya, CSS itu termasuk kumpulan kode program yang sangat berpengaruh terhadap desain/tampilan suatu website. Dengan kata lain, CSS ini memiliki fungsi untuk mengatur sebuah website agar terlihat menarik dan enak dipandang mata (User Interface).

Tapi... Pasti Susah Untuk Belajar CSS ?

Kata siapa susah ? CSS itu masih termasuk dalam golongan bahasa komputer yang sangat mudah dikuasai selain HTML. Itu sebabnya saya sarankan Anda untuk belajar HTML dahulu sebelum belajar CSS.

Jika Anda sudah paham HTML dan CSS, maka Anda bisa mengkombinasikan mereka dalam membuat website agar tampilannya elok.

Struktur Dasar CSS

Metode/cara memasukkan kode CSS ke dalam kode program HTML ada 3 cara. Contoh penggunaan sintaks CSS adalah sebagai berikut...

kode program CSS


Untuk baris ke 1-4 dan 11-17 adalah kode HTML. Sedangkan untuk baris ke 5-10 adalah kode program CSS untuk mengatur font dengan jenis “Aharoni”.

Untuk baris ke 5 adalah pembuka bagi kode program (sintaks) CSS agar CSS bisa terbaca oleh HTML. Baris ke 5 bagi CSS itu memiliki peranan yang hampir sama dengan baris pertama bagi HTML.

Untuk baris ke 6 adalah membuat sebuah class (yang nantinya akan dipanggil di HTML). Deklarasi class itu diawali dengan tanda titik (.). Sedangkan untuk id diawali dengan tanda pagar (#).

Fungsi keduanya (class dan id) itu hampir sama dan fungsinya juga sama.
Untuk baris ke 7 itu sebagai pembukaan dan baris ke 9 itu sebagai penutup dari class jenisfont. Sedangkan untuk baris ke 8 itu untuk mengatur font pada class jenisfont menjadi “Aharoni”.

Pengaturan font menjadi jenis Aharoni itu terletak di dalam class jenisfont. Maka, jika ada atribut HTML yang menggunakan class jenisfont milik CSS tadi, maka seluruh elemen di dalam tag HTML yang memakai class tersebut akan berubah font menjadi Aharoni.

Contohnya ada pada baris ke 13 sampai 15. Di baris ke 13 itu kita membuat tag <h1> dengan menggunakan class jenisfont dari css tadi. Oh iya, bagi yang belum paham tag-tagHTML bisa baca artikel ini.

Hasilnya adalah sebagai berikut :

hasil belajar CSS


Otomatis seluruh elemen/tulisan di dalam tag <h1> sampai </h1> itu memiliki font yang berbentuk Aharoni. Sebenarnya tidak hanya mengatur jenis font saja pada CSS, tetapi kita juga bisa mengatur warna, ukuran font, letak elemen, dll yang akan dibahas di artikel selanjutnya.

Jadi, kesimpulannya CSS adalah sebuah kode program yang berfungsi untuk membuat tampilan interface (User Inteface/UI) menjadi lebih menarik dan sesuai dengan harapan sang programmer.

Share this

Related Posts

Previous
Next Post »