Home » CSS » Belajar CSS untuk Pemula

Belajar CSS untuk Pemula

Ditulis oleh Segi Henggana · 28 April 2019
Belajar CSS untuk Pemula

Selain harus memahami HTML, seorang web delevoper juga harus mengetahui CSS (Cascade Style Sheet). Apa saja fungsi CSS dalam pengembangan website? Fungsi CSS adalah mengatur beberapa komponen pada sebuah web, seperti layout, warna, atau font, sehingga lebih terstruktur dan seragam. Dengan menggunakan CSS, halaman landing page akan tampil lebih menarik. Template atau tema blog pun terlihat lebih enak dipandang.

Jika diumpamakan dengan Microsoft Word, CSS digunakan untuk mengatur beberapa style, seperti heading, bodytext, images, footer, dan sebagainya. Style ini dapat diaplikasikan pada beberapa dokumen. Pada umumnya, CSS digunakan pada format tampilan halaman web yang berasal dari bahasa HTML.

Mengenal Struktur Dasar CSS

Ada 3 variasi CSS yang dikenal saat ini, yaitu CSS 1, CSS 2, dan CSS 3. Setiap versi ditandai dengan penambahan dan pengurangan tertentu. CSS 1 berpusat pada format dokumen HTML. CSS 2 merupakan pengembangan yang membuat dokumen dapat tampil di printer. CSS 3 memiliki kemampuan yang lebih baik, yaitu mendukung penentuan posisi konten, tampilan pada tabel, dapat diunduh, dan sebagainya.

Sebagai versi CSS terbaru, CSS 3 juga dapat menampilkan animasi pada website, baik warna maupun 3D. Desainer juga dapat lebih mudah untuk mengatur website supaya lebih compatible dengan smartphone. Hal ini didukung oleh fitur media query. Ada lagi sejumlah fitur yang bisa dimanfaatkan, antara lain multiple background, border-image, CSS Math, dan lain-lain.

Ada 3 bagian dari struktur kode CSS yang perlu dipahami sebagai pengetahuan dasar dalam mengelola web. Pertama, selektor. Kedua, blok deklarasi. Ketiga, properti dan nilainya.

Selektor

Selektor merupakan kata kunci yang berguna untuk mengatur serta menyeleksi elemen HTML. Ada 5 macam selektor, yaitu selektor tag, selektor class, selektor ID, selektor attribute, dan selektor universal.

Supaya lebih jelas, berikut contoh dari masing-masing selektor tersebut.

Contoh Selektor Tag atau Type Selector

p {
  color: blue;
}

Ini berarti kita memilih seluruh elemen <p> dan mengatur teks menjadi warna biru.

Jika diaplikasikan dalam struktur HTML akan seperti ini:

<div>Kali ini kita akan belajar tentang CSS</div>
<p>Materi yang akan kita bahas adalah Selektor Tag</p>
<div>Selektor Tag adalah selektor yang memilih elemen HTML dari nama tag</div>

Hasilnya akan seperti ini:

Kali ini kita akan belajar tentang CSS

Materi yang akan kita bahas adalah Selektor Tag

Selektor Tag adalah selektor yang memilih elemen HTML dari nama tag

Jadi, semua elemen yang termasuk dalam tag <p> akan berwarna biru.

Contoh Selektor Class

blue {
  color: white;
  background: blue;
  paddding: 5px;
}

Selektor class memilih elemen dari nama class yang diberikan. Tandanya adalah titik pada bagian depan. Kode ini berarti selektor class bernama .blue.

Pada struktur HTML akan tampak seperti ini:

<p> Mari kita mempelajari <b class=”blue”>Selektor Class</b> di anakbit.com.</p>

Hasilnya akan tampak seperti ini:

Mari kita mempelajari Selektor Class di anakbit.com.

Contoh Selector ID

#header {
  background: teal;
  color: white;
  height: 100px;
  padding: 50px;
}

Penerapannya pada kode HTML adalah sebagai berikut:

<header id=”header”>
  <h1>Selamat Berkunjung ke Website Kami</h1>
</header>

Selektor ID tidak jauh berbeda dengan class, tetapi hanya bisa digunakan pada satu elemen. Jenis selektor ini diawali oleh tanda pagar (hash symbol).

Contoh Selektor Atribut

input [type=text] {
  background: blue;
  color: cyan;
  padding: 10px;
  border: 1px solid cyan;
}

Dalam struktur kode HTML, aplikasinya adalah sebagai berikut:

<input type=”text” placeholder=”mencari sesuatu?” />

Selektor ini memilih elemen berdasarkan atribut yang digunakan. Ini berarti kita memilih semua elemen di dalam <input> dengan atribut type="text".

Contoh Selektor Universal

* {
  color: grey
}

Jenis selektor ini berguna untuk memilih semua elemen dalam scope tertentu. Kode ini berarti semua elemen akan memiliki warna grey. Biasanya, selektor ini dipakai untuk melakukan reset CSS. Hal ini terjadi karena munculnya CSS bawaan browser pada beberapa halaman HTML. Untuk menghilangkan itu, perlu dilakukan reset dengan menggunakan selektor universal.

Blok Deklarasi

Blok deklarasi adalah tempat untuk menulis atribut-atribut CSS di dalam selektor. Contohnya:

p {
  Font-size: 18px;
}

Ini berarti ukuran font yang termasuk dalam tag <p> adalah sebesar 18px. Blok deklarasi dibuka dengan { dan ditutup dengan }.

Properti dan Nilainya

Properti adalah atribut yang diberikan kepada elemen yang akan dipilih. Contoh:

properti: "nilai";

Tanda setiap properti adalah diakhiri dengan titik koma (;). Jika kamu hanya menggunakan satu properti, tanda (;) tidak perlu digunakan. Properti harus berada di dalam blok deklarasi.

Nah, itulah pengenalan singkat mengenai CSS untuk pemula. Setelah belajar CSS dari dasar, kamu pun bisa mempraktikkannya untuk mempercantik suatu website. Selamat mencoba.

Saya masih ingat waktu pertama kali bikin layout website pas SMA, pake TABLE :facepalm:. Sekarang bekerja di Bukalapak sebagai Front End Engineer. Tidak sedang mencari pekerjaan baru.