BELAJAR CSS - PENGERTIAN, KURIKULUM DAN CARA BELAJAR

Daftar Isi:

Apa Itu CSS?
Contoh sederhana file CSS
Apa fungsi CSS?
Kenapa Harus Belajar CSS?
Sejarah CSS
Bagaimana Cara Belajar CSS
Belajar Singkat cara menggunak...
Kurikulum belajar CSS

Kamu tertarik untuk belajar CSS? i sini, kita akan ngobrol soal apa sih itu CSS, kenapa CSS itu penting, darimana asal-usul CSS, dan tentu saja, bagaimana cara belajar CSS dengan cara yang menyenangkan.

Apa Itu CSS?

CSS adalah bahasa stylesheet yang digunakan untuk mendeskripsikan tampilan dan format dokumen yang ditulis dalam HTML atau XML (termasuk berbagai dialek XML seperti SVG, MathML atau XHTML). CSS mendeskripsikan bagaimana elemen struktur harus ditampilkan pada layar, di kertas, dalam pidato, atau pada media lain.

Kalau HTML itu kerangkanya, CSS ini adalah cat dan hiasannya. CSS bikin website kita jadi lebih cantik dan menarik untuk dilihat.

CSS merupakan singkatan dari Cascading Style Sheets

Contoh sederhana file CSS

Kode CSS di bawah ini akan membuat background halaman menjadi biru dan tulisan menjadi navy.

```css
body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Apa fungsi CSS?

CSS itu ibarat penata gaya dari sebuah website. CSS mengatur warna, font, ukuran, jarak antar elemen, layout, dan lain-lain. Pokoknya, semua tentang tampilan website itu diatur oleh CSS.

Kenapa Harus Belajar CSS?

Sebagai salah satu bagian penting dalam web development, CSS ini penting banget untuk dipelajari. Kalau kamu bisa CSS, website yang kamu buat bisa jadi lebih keren dan enak dilihat. Bahkan, kalau kamu jago CSS, kamu bisa jadi web designer atau front-end developer, loh!

CSS memungkinkan Kamu mengendalikan berbagai aspek tampilan suatu elemen, seperti:

• Warna latar belakang atau teks
• Lebar dan jarak elemen
• Gaya dan ukuran font
• Posisi elemen di halaman
• Transisi atau animasi

Salah satu keuntungan utama menggunakan CSS adalah pemisahan konten (HTML atau XML) dari presentasi (CSS). Ini membantu menjaga konten dan desain situs web menjadi modular, yang pada gilirannya membuat desain situs web lebih mudah dikelola dan dirawat.

Kamu juga bisa menggunakan CSS untuk membuat tampilan yang berbeda untuk berbagai perangkat (misalnya, desain yang berbeda untuk layar desktop, tablet, dan smartphone).

Sejarah CSS

CSS ini pertama kali dibuat oleh Håkon Wium Lie dan Bert Bos. Versi pertama CSS dirilis pada Desember 1996. Dari situ, CSS berkembang menjadi bahasa yang sangat penting dalam pengembangan web.

Bagaimana Cara Belajar CSS

Mau tau cara belajar CSS yang asyik? Berikut beberapa tipsnya:

1. Pelajari Dasar-dasarnya: Mulailah dengan mempelajari selectors, properties, dan values.
2. Praktekkan: Coba aplikasikan CSS ke halaman HTML yang kamu buat.
3. Belajar dari Internet: Banyak tutorial online yang bisa kamu ikuti, seperti W3Schools, CSS-Tricks, dan Codecademy.
4. Pelajari CSS3: Setelah paham dasar-dasarnya, coba deh pelajari fitur-fitur CSS3 seperti flexbox, grid, dan animasi.
5. Buat Proyek Sendiri: Praktek adalah cara terbaik untuk belajar. Buatlah proyek sendiri seperti website portofolio atau situs web untuk bisnis fiktif.

Nah, itulah beberapa hal yang perlu kamu ketahui tentang CSS. Semoga artikel ini bisa membantu kamu dalam perjalanan belajar CSS. Selamat belajar dan semoga sukses!

Belajar Singkat cara menggunakan CSS

Saat ada rumah makan dengan tampilan yang sama dilihat dari luar, kedua tempat makan ini tidak punya kelebihan yang bisa membuat pengunjung memilih makan di tempatnya. Sama seperti itu, saat website kamu tidak ada bedanya dengan website lain, kamu tidak punya keuntungan.

Untung saja ada CSS, dengan skill ini, kamu bisa menghias website kamu menjadi berbeda dari yang lain. Mulai dari memberi warna, menentukan ukuran, mengubah posisi sampai membuat animasi! Kalau kamu penasaran, CSS adalah singkatan dari Cascading Style Sheets.

Referensi lain:

• Referensi CSS bahasa Indonesia

Struktur dasar CSS

Kamu bisa menggunakan CSS, dengan memilh html apa yang mau dihias, ditambah dengan nama property dan nilainya. Analoginya seperti memilih bagian si Budi (tag HTML) lalu rambutnya (property) hias dengan warna kuning (nilanya). Penulisannya di css seperti ini:

p {
  color: red;
  text-align: center;
}

P berarti, element tag p di HTML, color adalah property untuk warna, text-align adalah property untuk posisi dari tulisannya, dan di sebelah kanan : adalah nilainya masing-masing.

Contoh dasar menggunakan CSS

//mengubah background halaman menjadi warna biru

body {
  background-color: blue;
}

//mengubah text h1 menjadi warna putih dan di tengah

h1 {
  color: white;
  text-align: center;
}

//mengganti ukuran pada tag p

p {
  font-size: 20px;
}

Ada beberapa cara untuk mengimplementasikan CSS di file HTMl kamu

Cara menggunakan CSS di HTML 1. internal CSSKamu bisa menulis css langsung di dalam HTML, dengan menaruh di dalam tag style

<html>
<head>
<style>
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>

2. inline CSS

menulis langsung style css di tag html masing-masing

<h1 style="color:black;text-align:right;">This is a heading</h1>

3. file css

membuat file css sendiri, dan menghubungkannya dengan html

bikin file dengan nama apa saja dengan ekstensi .css

nama.css

h1 {
  color: red;
}

p {
 font-size: 12px;
}

lalu hubungkan dengan htmlnya

<head>
<link rel="stylesheet" type="text/css" href="nama.css">
</head>

Bersama HTML, kamu bisa membuat website yang khas dan menarik. Kamu bisa melihat kelas dibawah untuk dasar dasar dari CSS, setelah itu bisa melanjutkan ke CSS3

Kurikulum belajar CSS

Daftar kurikulum Kelas Belajar CSS dari dasar

Link: Belajar HTML dan CSS dari dasar

CSS tidak boleh dilewatkan saat belajar mengembangkan website, dengan CSS website yang dibuat akan jauh lebih cantik dan menarik. Belajar bagaimana cara menggunakan css di sini

Apa itu css

Bekenalan dengan css, bahasa yang digunakan untuk menghias website. Kalau sudah belajar html sebelumnya, css jadi bumbu pelengkap hidangan website kita!

Menghubungkan css dan html

Bagaimana cara menghubungan css dan html? Ada tiga cara, inline, internal dan external, temukan jawabannya di video ini

Struktur dasar CSS

Belajar struktur dasar dari css, lihat bagaimana cara penulisannya

Selektor pada CSS

Bagaimana cara kita menentukan elemen html mana yang mau dihias? untuk itu kita akan belajar selektor, memilih tag, id ataupun kelas

Background color

Bagaimana cara mengubah warna background pada css

Background Gambar dan komentar

Bukan hanya warna, kita juga bisa menambahkan gambar sebagain background pada css. Belajar juga apa itu komentar dan penggunannya di css

Text pada css

Text adalah media yang paling penting dan paling banyak dikonsumsi di dunia website. Belajar cara menghias text dengan css

Font pada css

Selain text yang bisa kita hias, jenis font tulisannya pun bisa kita atur dengan css

Menghias link

Link punya style yang automatis datang saat dibuat, disini kita akan melihat bagaimana cara mengubah dan menghias link yang ada pada website

Dimensi element

Sangat penting untuk mengetahui pengaturan dimensi pada CSS, pelan pelan kita akan melihat tentang display, boxmodel, margin, border dan padding.

Display inline, block dan inlineblock

Mengatur display elemen elemen html, mulai dari melihat apa itu inline, block dan juga inlineblock, pelajari perbedannya di sini.

Menghilangkan elemen

Ada dua cara biasa untuk menghilangkan elemen dengan css, bisa kita sembunyikan atau kita hapus keberadaanya, apa bedanya? lihat disini

Box model dan margin

Penting untuk mengetahui apa itu boxmodel, konsep dasar dari pengetahuan seputar tinggi dan lebar konten pada css, ada juga margin yang akan menjadi pembuka

Padding dan border

Selain margin, ada padding dan border yang mempengaruhi pengaturan lebar dan tinggi suatu konten, lihat perbedaan dan cara menggunakannya

Posisi relative dan posisi static

Pengaturan posisi pada css tidak boleh dilewatkan, kita akan mulai belajar perbedaan posisi relative dan static di sini.

Posisi absolute

Belajar apa itu posisi absolute pada css dan bagaimana cara menggunakan posisi absolute

Posisi fixed

Belajar apa itu posisi fixed pada css dan bagaimana cara menggunakan posisi fixed

Posisi parent element

Posisi parent atau pembungkus suatu element sangat berpengaruh pada isinya. Belajar bagaimana cara mengatur posisi parent pada css

Z-index pada CSS

Kita bisa mengatur posisi elemen pada koordinat z, atau seakan-akan suatu elemen berada di atas elemen lainnya dengan z-index

Float dan clear

Float dan clear akan sangat sering ditemukan pada pembuatan struktur website. Kemampuannya memang bisa dimanfaatkan untuk banyak hal, termasuk mengatur layout dasar suatu website

Masih tentang float

Float tidak cukup kita pelajari di satu video, lanjutkan belajar float dan kuasai cara menggunakannya

Selektor bagian kedua

Selain selektor dasar, seperti memilih tag, id atau class, ada juga cara lain yang membuat pemilihan element html jauh lebih fleksibel

Referensi selektor

Temukan informasi lebih banyak tentang selektor yang bisa kita gunakan disini referensi CSS w3school dan onlastblog css cheatsheet

Hover dan focus

Membuat website lebih menarik dengan efek hover dan focus. User akan mendapatkan feedback dari aktivitasnya

Latihan dan latihan

Belajar CSS dasar selesai! terus latihan dan belajar untuk menguasainya. Setelah ini kita bisa belajar html5 atau CSS3