Belajar Konsep Dasar CSS: Bahasa Pemrogaman Untuk Desain Website

CSS Min

CSS (Cascading Style Sheets) adalah bahasa pemrogaman yang wajib dipelajari seorang progammer setelah Html. Jika saat belajar Html kita sudah bisa membuat struktur website sederhana. Namun, jika hanya menggunakan Html saja tampaknya website yang anda buat tidak akan menarik.

Nah, mau lihat perbedaannya? Simak perbedaan halaman Facebook dengan Cascading Style Sheets dan tanpa Cascading Style Sheets dibawah ini.

Facebook With CSS Min
Halaman Facebook dengan Cascading Style Sheets| CM Progammers 
Facebook Without CSS Min
Halaman Facebook Tanpa Cascading Style Sheets

 Nah, keliatan kan bedanya? Kalau pake CSS, tampilan website kita akan tampak makin keren dengan penataan dan pewarnaan yang bagus. Sementara jika tanpa CSS, website kita kaya tulisan di koran.

Maka dari itu, seorang web developer diwajibkan untuk mempelajari
Cascading Style Sheets. Tentunya kamu harus khatam dulu belajar tentang Html, biar engga bingung. Karena nantinya Html dan CSS akan saling berkaitan.

Nah, bagi kalian yang belum belajar mengenai HTML bisa dibaca artikel kami Belajar Dasar HTML Untuk Progammer Pemula.


Apa Sih Itu Cascading Style Sheets?

Cascading Style Sheet adalah bahasa pemrogaman yang bertugas untuk mengatur  dan menghias desain layout website. Jadi, tugasnya CSS adalah untuk mendesain HTML. Paham kan?


Apa Aja Struktur CSS?

Kalau di HTML kita memiliki struktur. Dalam Cascading Style Sheets juga memiliki struktur. Struktur Cascading Style Sheets sendiri memiliki 3 komponen utama, yaitu Selektor, Blok Deklarasi, Properti dan Nilainya.

Bingung yaa? Nah, tenang aja Dafunda Tekno bakal jelasin satu-satu kok.


1.Selektor

Selektor dari asal katanya (Select) dapat diketahui bahwa selektor adalah fungsi html yang kita pilih untuk kita desain. Intinya, kita memilih fungsi di Html untuk kita desain melalui Cascading Style Sheets.

Nah, selektor sendiri dapat berupa tag, id , class dan atribut.

Contoh

h2 {
    color: blue;
}

Nah, selektor dari CSS ini adalah H2


2.Blok Deklarasi

Blok deklarasi itu semacam pagar untuk kita menuliskan atribut (isinya properti dan nilai) 

h2 {
   color: blue;
}

Nah bagian, { dan } adalah blok deklarasinya


3.Properti dan Nilai

Nah, kalau properti dan nilai itu attribut yang ada di dalam di blok deklarasi.

h2 {
   color: blue;
}

nah bagian color adalah properti dan blue adalah nilai. Properti dan nilai harus diakhiri dengan tanda ;

Jadi, struktur properti dan nilai adalah seperti ini

properti: nilai;

Nah, hasil dari kodingan Cascading Style Sheets diatas akan menjadi seperti ini

Hasil CSS 1 Min
Tanpa CSS
Hasil CSS Min
Dengan CSS, Text Berubah Menjadi Biru, Yeay!

Nah, itu penjelasan singkat mengenai Cascading Style Sheets. Nantinya Dafunda Tekno akan membahas lebih lanjut mengenai Cascading Style Sheets.

Nantinya, cukup dengan Html dan Cascading Style Sheets kita bisa membuat halaman homepage Facebook. Keren kan? Atau ada yang mau usul buat halaman website yang lain menggunakan Cascading Style Sheets? Silahkan komentar dibawah ini,

Ayo mulai berdiksusi