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?

ARTIKEL TERKAIT
Grasshopper, Game Milik Google Untuk Bantu Progammer Pemula

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 ;

ARTIKEL TERKAIT
Tag HTML Populer yang Wajib Progammer Pemula Ketahui

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,


Suka? Ayo Bagikan konten ini Ke teman agar makin Seru!

0 Komentar

Bagaimana perasaan kamu setelah membaca konten ini?

Ngakak Ngakak
0
Ngakak
Bingung Bingung
0
Bingung
Takjub Takjub
0
Takjub
Suka Suka
0
Suka
Marah
0
Marah
Sedih
0
Sedih
channabeck

Editor in Chief di Dafunda Tekno. Mahasiswa yang sedang tertatih mengembangkan bisnis startup.

Mau Berbagi Apa Hari ini?
Artikel
Konten Original dari Kamu atau Berita Seputar Geek dan Pop-culture
Daftar / List
Daftar atau List Klasik yang Sering kamu temukan di dunia maya
Peringkat
List Peringkat yang Bisa di Upvote atau Downvote oleh Komunitas untuk menentukan Urutan Terbaik