Belajar Dasar Menulis Syntax CSS untuk Pemula


Belajar Dasar Menulis Syntax CSS untuk Pemula – CSS singkatan dari Cascading Style Sheet, atau jika diterjemahkan yaitu Bahasa Lembar Gaya. CSS merupakan bahasa yang digunakan untuk mengatur tampilan/desain suatu halaman web. CSS sama halnya dengan styles pada aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).

 

Dengan kata lain, Cascading Style Sheet adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website. Singkatnya dengan menggunakan metode CSS ini mudah mengubah secara keseluruhan warna dan tampilan yang ada pada website. Dengan CSS, temen-temen dapat lebih mempercantik tampilan web. baik dari style text, button, textfield, table, dan lain-lain.

 

Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. Sebagai contoh, perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf), colors (warna), margins (ukuran), background (latar belakang), font size (ukuran font) dan lain-lain. Elemen-elemen tersebut disebut juga dengan styles.

Bagaimana cara menulis syntax CSS?

CSS memiliki syntax yang sederhana dan menggunakan sejumlah kata kunci berbahasa Inggris untuk menentukan nama-nama berbagai properti. CSS memiliki dua aturan utama, yaitu Selector dan Declaration. Untuk lebih jelasnya, lihat cara penulisan serta komponen yang terdapat pada CSS berikut :

syntax css

  • Dalam kode CSS, ada 2 bagian yang terpisah, yaitu Selector dan Declaration.
  • Selector biasanya merupakan elemen HTML atau tag dimana berbagai properti diberi suatu nilai.
  • Setiap Declaration terdiri dari Property dan Value.
  • Untuk penulisan Declaration harus menggunakan tanda kurung kurawal {…}
  • Property adalah atribut style yang ingin dirubah, misalnya color, background, margin, dll.
  • Setiap Property memiliki Value (nilai) sesuai dengan jenis property-nya.

 

contoh penulisan syntax css

body {
    background-color: lightblue;
}

h1 {
    color: white;
    text-align: center;
}

p {
    font-family: verdana;
    font-size: 20px;
}

Contoh penerapan css selector untuk element html

Seperti yang dilihat pada contoh di atas, salu selector dapat memiliki beberapa property. Jika terdapat beberapa selector yang memiliki property yang sama, dapat dilakukan pengelompokan selector. Lihat contoh berikut :
– Syntax CSS
h1, body, p, ul { color: blue; }
– Syntax HTML
<body>
<h1>Warna Biru</h1>
Contoh teks
</body>
Pada contoh di atas, elemen header, body, paragraph, dan unordered list berada pada group yang sama. Semua elemen tersebut nantinya akan memiliki teks berwarna biru.

contoh penerapan css selector untuk id dan class

Untuk memahami tentang ID dan Class, dapat melihat contoh kode CSS berikut :
/* ini selector id */

#identitas {
   font-size: 20px;
   color: #FF0000;
   background-color: #000;
}
/* ini selector class */
.kelas {
   font-size: 30px;
   color: #12FF34;z
   background-color: #FFFFFF;
}

/* ini selector class dalam element tertentu contoh <p> */

p.center {
    text-align: center;
    color: red;
}
  • Selector ID menggunakan tanda pagar (#) sebagai penandanya, sedangkan Selector Class menggunakan tanda titik (.).
  • Penamaan pada selector ID dan Class dapat dibuat secara bebas, tetapi sebaiknya disesuaikan dengan nama kelompok yang terkait untuk mempermudah pengeditan.
  • Perbedaan antara ID dan Class pada CSS adalah pada tingkat penggunaannya. ID sebaiknya digunakan sebagai identitas yang unik seperti Logo, Header, Footer, Sidebar.
  • Sedangkan Class digunakan untuk menandai atribut yang lebih spesifik seperti ketebalan border (garis pinggir), kode warna, paragraph, jenis font, ukuran font, dll.
  • Class dapat digunakan untuk mengatur tampilan atau atribut dari suatu kelompok data HTML, baik yang memiliki ID tertentu atau tidak.
  • ID digunakan untuk memberikan identifikasi atau atribut pada kelompok data atau elemen HTML yang lebih besar.

Bagaimana cara menulis komentar di dalam CSS?

Komentar digunakan untuk menjelaskan kode Anda, dan dapat membantu Anda ketika Anda mengedit kode sumber di kemudian hari. Komentar diabaikan oleh browser.

Sebuah komentar CSS diawali dengan “/ *”, dan diakhiri dengan “* /”, seperti ini:

/*This is a comment*/
p {
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}