Belajar CSS Part 1 - Mengenal CSS dan Sintaks Dasar CSS

Assalamu'alaikum warohmatullaahi wabarokaatuh.

Selamat datang di Seri Belajar CSS BatWeber. Kali ini kita akan mulai mempelajari CSS. Untuk mempelajari CSS ini, disarankan Anda harus mengenal HTML terlebih dahulu. Jika Anda ingin mempelajari HTML terlebih dahulu, Anda bisa mulai mencarinya di sini. 

Sebelumnya, kami juga pernah membahas tentang kombinasi HTML dengan CSS. Disarankan Anda memahami artikel tersebut terlebih dahulu.

Ok, kita langsung saja.

A. APA ITU CSS?

• CSS merupakan singkatan dari Cascading Style Sheet
• CSS berfungsi untuk mengatur bagaimana sebuah file HTML ditampilkan pada sebuah halaman web
• Ekstensi dari sebuah file CSS adalah .css

B. SINTAKS DASAR CSS

Sintaks dasar CSS terdiri dari selector dan  declaration atau bisa didefinisikan sebagai berikut :

selector {declaration}



Declaration itu sendiri terdiri dari dua komponen yaitu property dan value. Berikut sintaks lengkapnya :

selector {property:value;}

• Selector adalah elemen yang dipilih dari HTML untuk diatur tampilannya
• Declaration adalah pengaturan tampilan yang akan kita terapkan pada selector
• Property adalah properti yang akan diubah dari selector (misal : lebar, warna, dsb)
• Value adalah nilai yang diberikan terhadap property (misal : hijau atau merah untuk warna, dsb)

Contoh penggunaannya adalah sebagai berikut :

h1 {color:blue;background-color:red;} 

Script di atas berarti :

• h1 sebagai selector 
• color:blue; dan background-color:red; sebagai declaration
• color dan background-color sebagai property
• blue dan red sebagai value

Dengan menggunakan script di atas dalam file CSS kita, maka setiap file HTML yang memuat file tersebut akan memiliki elemen <h1> dengan teks berwarna biru dan background berwarna merah.

atau Anda juga bisa mencoba langsung  :

Coba sendiri di sini

Demikian Pengenalan CSS dan Sintaks Dasar CSS. Semoga artikel ini bermanfaat.

Terima kasih, wassalamu'alaikum warohmatullaahi wabarokaatuh.