Pengenalan CSS Dasar Untuk Pemula

CSS ini sangat penting dalam website, kenapa? karena tanpa ada CSS sudah dipastikan website terse...
Penulis
Admin
Kategori
Tutorial
Estimasi
4 menit baca
Dilihat
981
Posting
29 Jul 2022
Pengenalan CSS Dasar Untuk Pemula CSS ini sangat penting dalam website, kenapa? karena tanpa ada CSS sudah dipastikan website tersebut akan berantakan maupun dari layout, warna, ukuran font dan lainnya. Maka dari itu CSS ini sangat diperlukan dan wajib untuk dikuasai. Pengenalan CSS Dasar Untuk Pemula
2022-11-25

CSS ini sangat penting dalam website, kenapa? karena tanpa ada CSS sudah dipastikan website tersebut akan berantakan maupun dari layout, warna, ukuran font dan lainnya. Maka dari itu CSS ini sangat diperlukan dan wajib untuk dikuasai.

Bisa kamu bayangkan jika website facebook atau google tanpa mengunakan CSS ? apakah kamu selaku user ingin memakainya? tentu saja tidak kan. Yang ada malah hanya tampilan text saja yang muncul dan user akan kebingungan, oleh karena itu CSS ini sangat amat penting keberadaanya.

Kali ini kita akan bahas hal yang mendasar dari CSS, apa saja itu?

 

 

(Belajar CSS) Pengenalan CSS Dasar Untuk Pemula

 

1. Apa itu CSS (Cascading Style Sheet)

CSS atau Cascading Style Sheet merupakan sebuah bahasa atau teknologi yang mengatur website agar menjadi menarik dan indah. Dengan kata lain fungsi dari CSS ini adalah mengatur segala tata letak didalam website, font yang digunakan berserta ukurannya, warna yang ingin dipakai apakah memakai hex atau rgb.

CSS pertama kali perkenalkan oleh Hakon Wium Lie pada tahun 1994 dan memiliki berbagai versi dari tahun ketahunnya hingga saat ini, diantaranya:

  • CSS 1 (diperkenalkan pada tahun 1996)
  • CSS 2 (diperkenalkan pada tahun 1998)
  • CSS 2.1 (diperkenalkan pada tahun 2011)
  • CSS 3 (diperkenalkan pada tahun 2012)
  • CSS 4 (Saat ini dan masih dalam tahap pengembangan)

Sebelum mengunakan framework CSS seperti bootstrap, foundation, materialize maupn tailwind, sebaiknya pahami dulu fundamental atau dasarnya agar tidak kebingungan nantinya ketika sudah mengunakan framework.

 

2. Bagaimana struktur syntax CSS

Setelah memahami apa fungsi dan manfaatnya, bagaimana saya bisa membuat kode CSS sederhana? oke, sebelum kesana, kita bahas dulu penjelasan mengenai struktur kode didalam CSS sendiri.

Struktur syntax didalam CSS terdiri dari selector, deklarasi, property dan value dimana masing masing mempunyai fungsi yang berbeda. 

 

Struktur syntax pada CSS

 

1. Mengenal selector

Yang pertama selector, apa itu selector didalam syntax CSS? selector berfungsi untuk memilih elemen didalam HTML yang ingin dirubah dan atur. Selector sendiri dapat digunakan untuk berbagai macam tipe tag, class dan atribut id. Contoh syntax selector:

h1 {
 property: value;
}

Contoh syntax selector untuk merubah warna dari masing-masing tipe seperti tag, class dan atribut id:

// selector untuk merubah keseluruhan dari tag H1
h1 {
 color: blue;
}

// selector untuk merubah keseluruhan yang memiliki atribut id header-text
#header-text {
 color: blue;
}

// selector untuk merubah keseluruhan yang memiliki class color-blue
.color-blue {
 color: blue;
}

 

2. Mengenal deklarasi pada CSS

Blok deklarasi diawali dengan { dan diakhiri dengan } pada atribut yang ingin kita rubah kedalam selector yang dipilih. Misalnya:

p {
  font-size: 18px;
}

Syntax diatas jika diterjemahkan kedalam bahasa kita: pilih atribut yang memiliki tag p (yang diawali dengan deklarasi {) akan membuka property baru untuk mengatur ukuran font text didalam atribut p dengan nilai property 18 pixel (dan diakhiri dengan deklarasi }).

Maka yang terjadi adalah seluruh tag yang memiliki atribut p, text didalamnya akan berubah ukuran fontnya menjadi 18px. 

Jika komponen tidak mengunakan deklarasi sudah dipastikan tidak akan berfungsi. Mudah-mudahan paham ya, oke.. lanjut ke property.

3. Apa itu property dan value

Property dan value adalah sekumpulan komponen dan aturan yang akan diberikan kepada elemen yang dipilih dan memberikan nilai sesuai dengan keinginan kita. Contoh property dan value:

p {
 property: value;
}

Aturan didalam mengunakan property dan value harus diakhiri dengan titik koma jika memiliki lebih dari satu property didalam blok deklarasi, namun jika didalam blok deklarasi tersebut hanya memiliki satu property, tidak mengunakan titik koma pun tidak masalah. 

Dan jangan sampai menuliskan property dan value diluar blok deklarasi ya, karena akan error dan tidak berfungsi.

Penjelasan property dan value:

h1 {
  font-size: 24px;
}

Yang berarti font-size sendiri merupakan property dan 24px merupakan nilai yang diberikan kepada elemen yang dipilih.

 

3. Latihan membuat syntax CSS dengan HTML

Setelah mengetahui strukturnya seperti apa, ada 2 cara untuk mengunakan CSS kedalam dokumen HTML, yaitu dengan mengunkan inline dan external.

1. Inline CSS

Inline CSS merupakan sekumpulan syntax yang menyatu dengan tag HTML lainnya untuk mengatur halaman website tertentu.

Contoh dengan menggunakan metode Inline:

<!DOCTYPE html>
<html lang="id">
<head>
<title>Selamat datang dunia!</title>
<style type="text/css">
  p {
   color: red
  }
</style>
</head>
<body>
  <p>Selamat datang dunia!</p>
</body>
</html>

Terlihat metode inline mengunakan tag HTML style untuk mengaktifkan kode CSS, mengunakan tag style sendiri bisa digunakan didalam antara tag body atau head, namun saya sarankan jika mengunakan inline digunakan diantara tag head.

Namun ada satu kekurangan dalam pengunaan metode inline ini yaitu sulitnya untuk dimaintenance. Masalah akan terjadi jika ingin merubah elemen tertentu.

Bagaimana jika memiliki lebih dari 1 dokumen HTML ? tidak hanya index.html namun ada file lainnya seperti contact.html, about-us.html, dll. Kita harus membuka satu persatu dokumen HTMLnya untuk merubah CSS, cukup ribet ya. Nah saya sarankan untuk mengunakan metode external atau mengunakan file inti untuk menampung seluruh komponen atau kode CSS.

2. External CSS

External CSS merupakan file-file tertentu yang menampung keseluruhan komponen atau kode CSS untuk mengatur tampilan pada halaman website. file yang menampung seluruh komponen biasanya diakhiri dengan .css yang dihubungkan kedalam dokumen HTML diantara tag head, contoh pengunaan metode external:

<!DOCTYPE html>
<html lang="id">
<head>
<title>Selamat datang dunia!</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <p>Selamat datang dunia!</p>
</body>
</html>

Berbeda dengan inline, semua syntax yang sebelumnya menyatu dengan HTML kita pindahkan semua syntaxnya kedalam file khusus CSS yaitu style.css dengan tujuan untuk menyatukan keseluruhan komponen agar mudah dimaintenance. 

Atribut rel dan type mendefinisikan bahwa file yang dipanggil adalah file yang memiliki tipe stylesheet dan href merupakan lokasi file tersebut berada.

 

Kesimpulan

CSS merupakan suatu teknologi dalam website yang wajib dipelajari oleh developer pemula maupun professional sekalipun. CSS sangat penting karena sangat dibutuhkan dalam mengelola design atau tampilan pada website.

Share