Iklan bawah header

Belajar CSS : Pengertian dan Pengenalan Dasar CSS (Tips Belajar CSS)

Belajar CSS

CSS atau Cascade Style Sheet adalah bahasa pemrograman yang sangat penting untuk dipelajari bagi seorang Web Developer terutama Web Designer. Pengetahuan tentang CSS sangatlah penting bagi seorang web developer, karena dengan CSS kita bisa membuat Halaman landing page yang menarik, membuat template atau tema blog, mengubah PSD (Desain web) menjadi HTML dan sebagainya.

Pada artikel kali ini kita akan membahas sejarah singkat CSS, pengertian CSS, Struktur kode atau sintaks dasar CSS, cara menulis kode CSS dalam HTML, dan tips untuk belajar CSS.

Sejarah Singkat CSS

Awal muncul CSS setelah munculnya SGML (Standard Generalized Markup Language) pada tahun 1970an, dan pada tanggal 17 Desember 1996 W3C (World Wide Web Consortium) Meresmikan CSS sebagai standard dalam pembuatan dokumen web.

Setelah diresmikan oleh W3C, CSS level 1 resmi dipublikasikan di akhir tahun 1996. Proyek CSS level 1 juga didukung oleh programmer dari perusahaan Microsoft yang bernama Thomas Reardon.

CSS level 1 atau CSS-1 dikembangkan dengan berpusat pada pemformatan dokumen HTML. Kemudian pada tahun 1998, standard CSS-2 diciptakan oleh W3C guna menyempurnakan CSS-1. Tidak lama setelah CSS-2 muncul, sektar tahun 2000 CSS-3 hadir. Dengan kehadiran CSS-3 tersebut diharapkan bisa lebih baik dari versi yang pertama dan kedua.

Pengertian CSS

CSS merupakan kependekan dari Cascading Style Sheet yang merupakan aturan untuk mengatur tampilan pada sebuah web. Dengan CSS, kita dapat mempercantik tampilan html pada Web browser, seperti menentukan warna, font, garis, layout dan lainnya.

Variasi atau Versi CSS

Sejak awal munculnya CSS memiliki beberapa variasi:

  1. CSS-1 merupakan versi pertama (17 Desember 1996)
  2. CSS-2 merupakan versi kedua (mei 1998)
  3. CSS-2.1 (7 juni 2011)
  4. CSS-3 (2012)
  5. CSS-4 masih dalam pengembangan

Struktur Kode atau Sintaks Dasar CSS

Struktur kode pada CSS terdiri dari 3 bagian yaitu Selektor, Blok Deklarasi, Properti dan nilainya. Untuk lebih jelasnya, bisa kalian lihat contoh di bawah ini:

Selector

Selector adalah bagian CSS untuk merujuk elemen HTML yang akan dikenakan style. Selector dapat berupa nama tag, id, class dan atribut.

Contoh:


/* Selektor dengan nama tag */
h2 {
	color: yellow
}

/*selektor dengan class*/
.bg-yellow {
	background-color: blue;
}

/*selektor dengan ID elemen*/
#header {
	background: red;
}

/*selektor dengan atribut*/
input[type=text]{
	background: yellow;
}

Blok Deklarasi

Blok Deklarasi merupakan tempat untuk menuliskan atribut-atribut CSS yang nantinya akan diberikan ke pada selektor. Blog deklarasi dibuka dengan tanda kurung { dan ditutup dengan }.

Contoh:


p {
	font-size: 12px;
}

Dari contoh diatas berarti kita akan mengatur ukuran font pada tag <p> sebesar 12px.

Properti dan Nilainya

Properti merupakan atribut yang akan diberikan kepada elemen yang dipilih. Setiap properti harus memiliki akhiran titik koma (;). Kecuali hanya terdapat satu properti saja, maka boleh untuk tidak menggunakan titik koma.

Contoh:


blockquote {
	background: grey;
}

Cara Menulis kode CSS dalam HTML

Untuk menuliskan kode CSS di HTML dapat dilakukan di dalam tag <style>. Penempatan tag style dapat di tulis dalam tag <head> atau tag <body>.

Contoh:


<DOCTYPE html>
<html>
<head>
<title>Cara menulis kode CSS</title>
<style type="text/css">
	p{ color: blue}
</style>
</head>
<body>
	<p>Contoh paragraf yang sudah di beri style oleh CSS<p>
</body>
</html>

Untuk hasilnya, Elemen <p> akan berwarna kuning. Bisa kalian lihat pada gambar di bawah ini.

Selain dengan cara diatas, ada dua cara lagi yang bisa digunakan yaitu menggunakan Inline CSS dan Eksternal CSS.

Tips Belajar CSS

Yang terakhir ada beberapa tips yang ingin saya bagikan untuk membantu teman-teman dalam belajar CSS:

  1. yang pertama, kalian harus sering berlatih membuat sebuah halaman web sendiri, dan dengan begitu kemampuan kalian akan semakin meningkat dan kalian akan semakin kreatif.
  2. Kalian juga bisa menggunakan plugin atau tools tambahan pada code editor.
  3. Selain itu, kalian juga bisa menggunakan Cheat Sheets CSS yang sudah ada di google.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel