Tata Cara dari Penulisan Dari Sintaks CSS

Setiap bahasa pada pemrograman komputer akan mempunyai aturan penulisan (sintaks) yang juga akan berbeda. Bila kalian ingin membuat program dengan menggunakan Java, kode program yang harus ditulis dengan sintaks Java. Kalian tidak akan dapat menulis program Java menggunakan sintaks dari bahasa pemrograman yang lain seperti Delphi atau menulis semua program tanpa sintaks. Bila demikian, kode pada program tidak akan bisa untuk dikenali dan tidak dapat dieksekusi oleh compiler Java yang ada.

Demikian halnya ketika kalian mulai menulis kode CSS untuk memberikan style atau gaya pada tag HTML tertentu atau untuk keseluruhan halaman pada web, CSS juga mempunyai sebuah aturan pada penulisan atau sintaks sendiri. Bila sintaks pada CSS salah, browser tidak akan dapat menterjemahkan atau akan diterjemahkan secara keliru. Karena itu, sangat penting untuk menggunakan sintaks CSS yang benar agar kode pada CSS dapat diterjemahkan oleh web browser.

Kode CSS itu sendiri ada beberapa elemen nya yaitu ada selector, property, dan juga value. Selector adalah sebuah elemen HTML yang mana saja sedangkan pada property adalah sebuah tipe atribut yang ingin kalian terapkan pada tag nya HTML dan juga value adalah nilai yang akan diberikan ke property. Adapun pada sintaks CSS adalah sebagai berikut: selector {property-name:value;}

Sebagai contoh kalian dapat memberikan style atau gaya pada paragraf atau juga pada tag <p> dengan warna biru dan juga dicetak miring maka kalian harus menuliskan nya seperti :

P {color:blue; font-style:italic;}

Dari sintaks CSS yang ada di atas, antara property-name dan juga value dipisah oleh tanda titik dua atau juga colon dan setelah value itu diakhiri oleh titik koma semicolon. Property-name dan juga value akan diletakan didalam kurung kurawal {}. Sintaks CSS mempunya dua blok yaitu ada blok selector dan juga ada blok deklarasi. Blok deklarasi adalah kurung kurawal beserta dengan property dan juga pada value yang ada di dalam nya sebegimananya.

Selector CSS tidak hanya berupa sebuah elemen HTML namun juga bisa berupa seperti pola atau pattern yang akan digunakan untuk menyeleksi elemen yang ingin kalian berikan style atau juga gaya. Pola-pola dari selector CSS benernya itu sangat banyak. Berikut ini ada beberapa macam selector pada CSS

Element Selector

Element selector adalah sebuah type selector yang sangat umum untuk digunakan dan juga mungkin ada banyak yang menemukan ketika mengedit file CSS untuk mengubah tampilan yang ada pada halaman web. Sebagai contoh kalian ini dapat memberikan style pada paragraf yaitu elemen p atau juga pada tag <p> dengan warna biru dan juga rata tengah.

P {color:blue; text-align:center;}

Universal Selector

Universal selector itu (*) yang digunakan untuk menyeleksi semua elemen yang ada di HTML. sebagai contoh kalian akan memberikan warna pada latar belakang atau pada background pink pada semua elemen HTML

*{background-color:pink;}

Descendant Selector

Descendant selector ini sudah termasuk yang umum untuk digunakan dan juga sudah banyak ditemukan di file CSS. Selector descendant akan digunakan ketika kalian ini ingin memberikan sebuah style pada elemen yang tertentu yang berada di elemen lainnya. Sebagai contoh yang ada style akan berwarna kuning ini yang hanya berlaku untuk elemen em atau juga tag <em> jika elemen atau juga pada tag <em> berada didalam p atau juga pada tag <p>

P em {color:yellow;}

Grouping Selector

Grouping selector sudah sangat umum ditemukan di file CSS. grouping selector juga digunakan untuk memberikan sebuah style pada lebih dari satu elemen HTML yang ada. Kalian hanya perlu memisahkan elemen-elemen HTML yang akan kalian berikan style sama dengan menggunakan sebuah tanda koma.

h1, h2, h3 {color:blue; font-weight:normal; text-transform:lowercase;}

Class Selector

Class selector dapat digunakan untuk menyeleksi elemen untuk menggunakan atribut class spesifik. Untuk menyeleksi elemen HTML dengan class spesifik, akan menggunakan tanda titik (.) dan juga diikuti oleh nama class. Contohnya itu semua elemen HTML dengan class=”redcenter” akan diberikan warna merah dengan rata tengah.

.redcenter {color:red; text-align:center;}

id Selector

id selector akan digunakan untuk menyeleksi elemen pada HTML dan juga menggunakan atribut id spesifik. Dalam satu halaman pada web, id yang dimiliki itu harus unik dan juga digunakan untuk menyeleksi satu elemen yang unik. Untuk menyeleksi sebuah elemen dengan id, maka kalian akan gunakan tanda pagar (#) diikuti oleh elemen. Sebagai contoh pada elemen HTML dengan id=”yellow” akan diberi warna kuning.

#yellow {color:yellow;}

Perkembangan pada CSS

  • CSS 1

Pada tanggal 17 agustus W3C atau World Wide Web Consortium menetapkan bahwa CSS sebagai bahasa pemrograman yang standar dalam pembuatan web. Tujuan nya itu untuk mengurangi pembuatan pada tag-tag yang baru oleh Netscape dan juga Internet Explorer, karena pada kedua browser tersebut sedang bersaing untuk mengembangkan tag sendiri dan juga mengatur sebuah tampilan pada web. CSS q akan mendukung pada pengaturan tampilan dalam berbagai hal seperti pada hal :

  1. Font atau jenis pada ketebalan
  2. Pada warna, pada teks, pada background dan juga pada elemen lainnya.
  3. Text attributes misalnya itu pada spasi dan juga antar baris, kata dan juga pada huruf
  4. Posisi pada teks, pada gambar, pada table dan juga pada elemen lainnya.
  5. Pada margin, pada border dan juga pada padding
  • CSS 2

Pada tahun 1998 W3C ini sudah menyempurnakan CSS pada tahap awal dengan menciptakan sebuah standard pada CSS 2 yang akan menjadi standard hingga sampai saat ini. Pada level CSS 2 ini akan dimasukan semua atribut yang ada di CSS 1 dan juga akan diperluas dengan penekanan yang ada pada International Accessibility dan juga Capability yang khususnya pada media-specific CSS. CSS 2 ini akan dikembangkan untuk memenuhi sebuah kebutuhan terhadap format dokumen yang akan bisa ditampilkan di printer.

  • CSS 3

CSS 3 adalah sebuah versi yang terbaru dari CSS yang akan mampu melakukan banyak hal dalam mendesain sebuah website. CSS 3 dapat melakukan animasi pada halaman yang ada di website, diantaranya itu akan ada animasi yang warna dan juga animasi 3D. Dengan CSS 3 desainer akan sangat dimudahkan dalam hal kompatibilitas pada websitenya pada smartphone juga akan dukungan dengan sebuah fitur yang baru yaitu media query. Selain itu juga akan ada banyak fitur yang baru pada CSS 3 yaitu : fitur Multiple background, fitur border-radius, fitur drop-shadow, fitur border-image, fitur CSS-Math dan juga CSS Object Model.

Fitur yang terbaru pada CSS 3 :

  • Akan ada animasi sehingga pada pembuatan animasi tidak lagi memerlukan sebuah program yang sejenis dengan adobe flash dan juga pada microsoft silverlight.
  • Akan ada beberapa efek pada teks, seperti akan ada efek yang berbayang, dan juga akan ada kolom koran dan Word-Wrap.
  • Akan ada beberapa efek pada kotak seperti pada kotak yang memiliki sebuah ukuran yang dapat kalian ubah-ubah, transformasi pada 2 dimensi dan juga 3 dimensi, sudut-sudut yang akan terkumpul pada bayangan yang ada.