Rumahweb Journal
Banner - Belajar CSS bagian 3 Mengenal Sintaks Dasar CSS

Belajar CSS bagian 3: Mengenal Sintaks Dasar CSS

Setelah sebelumnya kita telah belajar mengenal apa itu CSS dan penulisan CSS pada website, kali ini kita akan belajar CSS tentang sintaks dasar dan contoh penulisannya pada website.

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan atau gaya visual dari sebuah file html atau xml agar lebih menarik dan indah di lihat.

Tanpa CSS, tampilan file html dalam bentuk website akan kurang menarik. Hal ini telah kami bahas dalam artikel sebelumnya. Anda dapat mempelajarinya pada url berikut :

Belajar CSS Bagian 1: Apa itu CSS dan Cara Membuatnya Untuk Pemula
Belajar CSS Bagian 2: Penulisan CSS Pada Website

CSS memiliki aturan cara penulisan tersendiri. Apabila Anda salah dalam melakukan penulisan sintak CSS, maka tidak akan ada perubahan pada websitenya. Lalu, apa itu sintaks dan apa contohnya? Simak informasi berikut ini.

Mengenal Sintaks Dasar CSS

Sintaks adalah aturan tata cara penulisan yang digunakan untuk menulis baris kode CSS. Aturan ini menentukan bagaimana instruksi gaya ditulis dan dipahami oleh browser. Sintaks dalam CSS memiliki stuktur berikut:

Pindah Hosting ke Rumahweb Gratis

  • Selector
  • Deklarasi
  • Properti dan nilai / value

Berikut adalah format penulisan kode CSS :

selector { property: value }

Dan berikut adalah contoh format penulisan kode CSS :

Mengenal Sintaks Dasar CSS - belajar css

Untuk informasi lebih lengkapnya, mari kita bahas satu persatu.

Selector

Selector digunakan untuk memilih elemen HTML yang akan kita beri style CSS. Elemen yang digunakan dapat berupa nama tag HTML, class, id, dan atribut. Berikut contoh penulisannya.

Contoh penulisan selector dengan nama tag yang akan menampilkan warna biru pada tag H :

h1 {
    color:blue; 
}

Contoh Penulisan selector dengan nama class yang akan menampilkan warna biru pada yang menggunakan class “namaclass“:

.namaclass {
    color:blue; 
}

Contoh penulisan selector dengan nama ID yang akan menampilkan warna biru pada ID dengan nama “namaID” :

#namaID {
    color:blue; 
}

Contoh penulisan selector dengan nama atribut yang akan menampilkan warna biru pada atribut input type teks :

input[type=text]{
    color:blue;
}

Untuk informasi lebih lengkap mengenai selector, akan kami bahas pada artikel selanjutnya.

Deklarasi

Pada setiap selector, memiliki deklarasi, deklarasi merupakan blok kode yang didalamnya menyimpan property dan nilai / value dalam sebuah sintaks CSS yang akan di seleksi dalam selector.

Berikut contoh penulisan deklarasi :

h1 {
    color:blue; 
}

Blok deklarasi diawali dengan simbol kurung kurawal pembuka dan diakhiri dengan simbol kurung kurawa penutup. Dari contoh tersebut, H1 adalah selector, sedangkan {color:blue;} dari kurung kurawa pembuka hingga penutup disebut dengan blok deklarasi. Di Dalam blok deklarasi memiliki property dan value yaitu color dan blue.

Penulisan dalam sebuah deklarasi dapat digunakan lebih dari satu selector yang dipisah dengan koma. Berikut contoh penulisan deklarasi lebih dari satu selector :

h1,
h2,
h3,
h4 {
    color:blue; 
}

Dari contoh diatas, selector dengan tag html H1, H2, H3, dan H4 memiliki blok deklarasi yang sama dengan property dan value yaitu color dan blue. Sehingga ketika di testing akan menampilkan warna yang sama sesuai dengan blok pada deklarasi.

Property dan nilai / value

Property merupakan bagian dari deklarasi yang memiliki nilai, setiap properti kita dapat memberikan aturan terhadap blok deklarasi sesuai dengan selector yang digunakan. Penulisan property dan nilai diakhiri dengan simbol ; dan harus ditulis di dalam blok deklarasi. Berikut adalah format penulisan property dan nilainya :

property : “nilai”;

Berikut adalah contohnya :

color:blue; 

Terkadang nilai property diapit oleh tanda petik, yang berarti nilai pada properti tersebut memiliki spasi, berikut contohnya :

font-family: "Helvetica Neue";

Dan juga nilai properti bisa ditambahkan lebih dari satu, yang berarti nilainya adalah opsional, jika tidak ada nilai yang pertama, maka akan menggunakan nilai yang kedua, berikut contohnya :

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

Komentar

Penulisan komentar pada sintak css digunakan untuk menandai dan memberikan informasi tambahan seperti deskripsi singkat dalam sebuah file css. Hal ini sangat berguna bagi developer / pengembang aplikasi untuk menentukan bagian mana saja yang digunakan jika kode baris file css sudah sangat banyak. Seperti ketika membangun tampilan website saat ini dan mengeditnya kembali di masa mendatang.

Komentar tidak akan di eksekusi sehingga akan diabaikan oleh browser dan tidak akan ditampilkan pada tampilan website. Penulisan sintaks untuk komentar di awali dengan simbol /* lalu di akhiri dengan simbol */

Berikut contoh penulisan komentar.

/*Memberikan warna pada Heading*/
h1,h2,h3,h4,h5 {
    color:blue; 
}

/*Memberikan warna pada paragraph*/
p {
    color:blue; 
}

Selain memberikan informasi tambahan, komentar pun dapat digunakan untuk menonaktifkan selector dan property di dalam blok deklarasi, untuk penulisannya cukup memberikan simbol /* dan diakhiri dengan simbol */. Berikut contoh penulisannya :

/*
h1,h2,h3,h4,h5 {
    color:blue; 
}
*/

Dari contoh diatas, akan mengabaikan semua selector sehingga blok property dan value nya akan diabaikan oleh browser.

p {
    /* color:blue; */
    font-size:18px;
}

Dari contoh diatas, akan mengabaikan salah satu blok property dan value nya saja sehingga untuk property dan value yang lainnya akan tetap di eksekusi.

Kesimpulan

Memahami mengenai tutorial css dari pengenalan css, penulisan css, dan sintaks dasar css hingga implementasi kedalam file html website adalah salah satu hal yang penting dalam membangun sebuah tampilan website agar fungsional dan lebih menarik.

Demikian artikel belajar CSS bagian 3 tentang mengenal sintaks dasar CSS. Selanjutnya, Anda dapat belajar tentang Selector CSS yang merupakan series lanjutannya. Semoga bermanfaat.

Bermanfaatkah Artikel Ini?

Klik bintang 5 untuk rating!

Rating rata-rata 0 / 5. Vote count: 0

Belum ada vote hingga saat ini!

Kami mohon maaf artikel ini kurang berguna untuk Anda!

Mari kita perbaiki artikel ini!

Beri tahu kami bagaimana kami dapat meningkatkan artikel ini?

Cloud Hosting Terbaik Rumahweb

Dito Priwanto

banner pop up - Pindah Hosting ke Rumahweb