Pengenalan Dasar CSS

 Setelah belajar HTML, bahasa berikutnya yang harus kita pelajari agar menjadi web developer adalah CSS.

Pemahaman tentang CSS sangat penting, jika kamu ingin fokus pada front-end web development.

Tugas front-end developer biasanya akan membuat halaman web berdasarkan desain dari desainer.

Tanpa menggunakan CSS, kita tidak mungkin akan bisa membuat web berdasarkan desain yang ditentukan desainer.

Karena itu, belajar CSS sangatlah penting.

Apa itu CSS?

CSS (Cascade Style Sheet) adalah sebuah bahasa untuk mengatur tampilan web sehingga terlihat lebih menarik dan indah.

Dengan CSS, kita dapat mengatur layout (tata letak), warna, font, garis, background, animasi, dan lain-lain.

Contoh:

Tanpa CSS, website terlihat jelek dan tidak tertata. Sedangkanjika menggunakan CSS, tampilannya jadi lebih bagus dan rapi.

Perkembangan Versi CSS

Sejak awal dirilis, CSS memiliki beberapa versi:

1. CSS 1 (1996): adalah versi pertama (17 Desember 1996)
2. CSS 2 (1998): adalah versi ke-2 (Mei 1998)
3. CSS 2.1 (2011): dirilis pada 7 juni 2011
4. CSS 3 (2012): versi yang banyak digunakan saat ini.

Tips Belajar CSS

Ada beberapa tips yang ingin saya bagikan untuk membantumu belajar CSS:

Tips #1: Cara Menghafal Kode CSS

Ada ratusan properti CSS yang harus diingat.

Apakah kita mampu menghafal semuanya?

Tergantung…

Jika kamu sering mengetik kode CSS tanpa copas, bisa jadi ingatanmu terhadap kode atau properti CSS akan semakin kuat.

Saya sendiri tidak bisa menghafal semua properti CSS, tetapi saya ingat properti yang sering dipakai.

Kalau tidak ingat ya, tinggal googling aja atau manfaatkan Inspect Element.

Tips #2: Gunakan Inspect Elemen

Inspect elemen ada di setiap browser. Bisa dibuka dengan Klik kanan, lalu pilih Inspect Element.

Di inspect elemen, kita bisa menulis kode CSS secara langsung dan hasilnya pun bisa kita lihat secara langsung.

Inspect elemen bisa kamu gunakan sebagai tempat eksperimen.

Jadi, daripada ngoding CSS-nya di teks editor. Coding aja dulu inspect element. Nanti kalau udah jadi, baru deh dicopas ke teks editor.

Tips #3: Gunakan VS Code

Selain coding CSS di Inspect element, saya merekomendasikan menggunakan teks editor VS Code.

Mengapa?

Karena teks editor mendukung kode CSS dengan sangat baik.

Misalnya, saat kita memilih warna.. VS Code memberikan beberapa saran serta tampilan visual warnanya.

Tips #4: Gunakan Cheat Sheet

Cheat Sheet adalah halaman yang berisi contekan kode CSS.

Struktur Dasar CSS

Struktur kode CSS terdiri dari tiga bagian:

1. Selektor;
2. Blok Deklarasi;
3. Properti dan nilainya.

Format penulisannya seperti ini:

1. Selektor

Selektor adalah kata kunci untuk memilih elemen HTML yang akan kita beri style.

Contohnya:

h1 {
    color: red;
}

Artinya: Kita memilih semua elemen <h1>, lalu diberikan warna teks red (merah).

Selektor dapat berupa nama tag, class, id, dan atribut.

Contoh:

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

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

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

/* Selektor dengan Atribut */
input[type=text]{
    background: yellow;
}

Pembahasan lebih mendalam tentang selektor akan kita bahas di: Memahami Selektor pada CSS.

2. Blok Deklarasi

Blok deklarasi adalah tempat kita menuliskan atribut atau properti CSS yang akan diberikan ke pada elemen yang telah diseleksi.

Contoh:

p {
    font-size: 18px;
}

Artinya, kita akan mengatur ukuran font dari tag <p> sebesar 18px.

Blok deklarasi dimulai atau dibuka dengan tanda kurung { lalu ditutup dengan }.

Satu blok deklarasi, bisa dipakai oleh lebih dari satu selektor.

Contohnya:

h1, h2, h3, h4, h5, h6 {
  color: teal;
}

Ini artinya kita memberikan warna sama untuk semua tag <h1> sampai <h6>.

Bisa juga ditulis seperti ini:

h1,
h2, 
h3, 
h4, 
h5, 
h6 {
  color: teal;
}

Intinya, selektor dipisah dengan koma.

3. Properti dan Nilainya

Properti adalah sekumpulan aturan yang akan diberikan kepada elemen yang dipilih.

Format penulisan properti seperti ini:

properti: "nilai";

Setiap properti harus diakhiri dengan titik koma (;). Apabila hanya terdapat satu properti, boleh tidak menggunakan titik koma.

Properti harus ditulis di dalam blok deklarasi.

Contoh: ✅

blockquote {
    background: pink;
}

Jangan tulis seperti ini: ❌

background: pink;

p {

}

Nilai untuk properti kadang diapit tanda petik, kadang juga tidak.

Biasanya yang diapit dengan tanda petik adalah nilai yang berupa teks.

Contohnya:

font-family: "Times new roman";

Mengapa ini diapit dengan tanda petik?

Karena ada spasi di nama Times new roman.

Nilai properti juga bisa kita berikan lebih dari satu.

Contoh:

font-family: "Times new roman", Georgia, Roboto;

Ini bisanya kita pakai untuk memberikan nilai opsional. Misalnya font Times new roman tidak ada maka yang akan dipakai adalah Georgia, begitu juga seterusnya.

Penulisan Komentar di CSS

Komentar biasanya dipakai untuk memberikan informasi tambahan di kode CSS.

Cara menulis komentar di CSS dilakukan dengan tanda /* dan diakhiri dengan */.

Contoh:

/* ini adalah komentar */

/*
  ini juga komentar
  yang ditulis lebih dari
  satu baris
*/

Selain untuk memberikan informasi tambahan, kita juga bisa menggunakan komentar untuk menaonaktifkan beberapa kode tertentu.

Contoh:

p {
  /* color: red; */
  font-family: "Times new roman";
}

Properti color: red tidak akan dipakai, karena dia berada di dalam komentar.

Ada tiga cara menulis CSS di HTML:

1. Internal CSS –> ditulis di dalam tag <style>;
2. Inline CSS –> ditulis di atribut elemen HTML;
3. External CSS –> ditulis di file CSS terpisah dengan HTML.

1. Internal CSS

Internal CSS adalah kode CSS yang ditulis di dalam tag <style>. Internal CSS juga dikenal dengan sebutan Embedded CSS.

Tag <style> bisa ditulis di dalam tag <head>, bisa juga ditulis di dalam tag <body>. Namun kebanyakan orang menulisnya di dalam <head>.

Contoh:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Internal CSS</title>
  <!-- penulisan internal css dalam tag head -->
  <style type="text/css">
    p{
      font-family: serif;
      line-height: 1.75em;
      font-size: 18px;
    }
    i { 
      font-family: sans;
      color: orange;
    }
  </style>
</head>

<body>
  <!-- penulisan internal css dalam tag body -->
  <style type="text/css">
    h2 { 
      font-family: sans;
      color: #333;
    }
  </style>
  <h2>Ini judul artikel</h2>
  <p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>

Hasilnya:

Penulisan css di dalam tag <head> akan lebih dahulu dibaca dibandingkan di <body>. Karena lebih dahulu dibaca, style yang akan dipakai adalah yang terakhir.

Misalnya kita punya style seperti ini di dalam <head>:

p { color: red }

Lalu di body kita buat lagi seperti ini:

p { color: blue }

Maka yang akan dipakai adalah yang terakhir, yakni yang color: blue.

Karena itu, biar konsisten dan tidak bentrok.. sebaiknya tulis CSS hanya dalam satu tempat saja. Misal di <head> saja.

2. Eksternal CSS

Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML. Eksternal CSS ditulis di dalam file khusus yang berekstensi .css.

Contoh:

Kita akan membuat sebuah file bernama style-ku.css yang di dalamnya berisi kode CSS.

Berikut ini isinya:

p {
    font-family: serif;
    line-height: 1.75em;
}

i {
    font-family: sans;
    color: orange;
}

h2 {
    font-family: sans;
    color: #333;
}

Untuk menggunakan CSS ini, kita harus menghubungkannya dengan HTML.

Ada dua cara yang bisa kita lakukan:

1. Menggunakan tag <link>
2. Menggunakan @import

Contoh:

Cara 1: menggunakan tag <link>

<link rel="stylesheet" type="text/css" href="style-ku.css">

Cara 2: menggunakan @import

<style type="text/css">
@import "style-ku.css";
</style>

Jika kita menggunakan Cara 1, maka kode lengkap HTMLnya akan menjadi seperti ini:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Eksternal CSS</title>
    <link rel="stylesheet" type="text/css" href="style-ku.css">
</head>

<body>
    <h2>Ini judul artikel</h2>
    <p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>

Hasilnya:

CSS eksternal biasanya digunakan saat kita ingin menggunakan kembali style yang sudah dibuat.

Misalnya ada lima halaman HTML, dan semua halaman ini membutuhkan CSS yang sama. Maka sebaiknya kita menggunakan eksternal CSS agar tidak menulis ulang kode CSS di setiap file HTML.

Eksternal CSS di dalam Folder

Jika file eksternal CSS berada di dalam folder yang berbeda, maka kita bisa tulis alamat path-nya di tag <link>.

Contoh:

Misalnya kita punya struktur folder project seperti ini.

File style.css akan kita pakai di index.html, tapi dia berada di dalam folder css.

Maka kita bisa tuliskan seperti ini:

<link rel="stylesheet" href="css/style.css" />

Namun, sekarang gimana kalau file HTML-nya berada di folder yang berbeda.

Misalnya strukturnya seperti ini:

Gimana cara pakai style.css di about.html?

Gampang.

Kita hanya perlu naik satu level dengan ../ kemudian menuliskan css/style.css setelahnya.

Contoh:

<link rel="stylesheet" href="../css/style.css" />

Jika file HTML-nya berada di dalam folder lagi, dan di dalam folder lagi, dan di dalam folder lagi, dan di dalam folder lagi.. 😄 gimana tuh?

Ya tinggal naik beberapa level, misalnya dia berada di dalam folder level ke 3, maka nainya 3 level seperti ini:

<link rel="stylesheet" href="../../../css/style.css" />

Perhatikan ../ artinya naik satu level, karena ada tiga ../ maka kita naik 3 level.

Bingung?

Tenang, tidak perlu khawatir.

Jika kamu paham sistem path di Linux, maka kamu akan mudah memahami ini.

Oh iya, selain cara ini, kita bisa juga menggunakan / untuk mewakili root folder dari project atau nama domain.

Contoh:

<link rel="stylesheet" href="/css/style.css" />

Ini akan membuatnya konsisten, karena / nantinya akan mewakili nama domain.

Jadi di mana pun kita akan menggunakan file CSS-nya tidak perlu ribet naik level.

Eksternal CSS dari Internet (CDN)

Selain menggunakan eksternal CSS yang ada di satu folder dengan project, kita juga bisa gunakan CSS yang sudah ada di internet atau domain lain.

Contoh:

Misalnya file CSS-nya berada di:

https://www.petanikode.com/css/style.css

Maka kita bisa menggunakannya di HTML seperti ini:

<link rel="stylesheet" href="https://www.petanikode.com/css/style.css" />

3. Inline CSS

Inline CSS adalah kode CSS yang ditulis langsung pada atribut style di elemen HTML.

Kode CSS ditulis langsung tanpa menggunakan kurung kurawal{ ... }. Kemudian properti tetap dipisah dengan titik koma.

Contoh:

<h2 style="color:red; font-family: sans;">Ini judul artikel</h2>

Contoh lengkap:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Inline CSS</title>
</head>

<body>

  <h2 style="color:red;font-family:sans">Ini judul artikel</h2>
  <p style="color:maroon">Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>

Hasilnya:

Inline CSS biasanya digunakan untuk memberikan style pada satu elemen saja. CSS pada inline akan lebih diprioritaskan dibandingkan dengan internal dan eksternal.

Akan tetapi, Inline CSS jarang digunakan pada proyek-proyek besar, karena cukup menyulitkan mengelola kode jika sudah terlalu banyak menggunakan inline.

LATIHAN CSS:

HASIL CODING

CODING YANG DIKETIK

simpan dengan nama: index.html

simpan dengan nama: index.css