Tutorial CSS untuk Pemula
Setelah kalian mengetahui HTML dan membaca tutorial html untuk pemula di tutorial sebelumnya. kali ini kita akan membahas tutorial CSS untuk pemula.
CSS merupakan bahasa style sheet yang digunakan untuk mendesain tampilan halaman web agar lebih indah dan menarik. Mempelajari CSS adalah hal yang penting terutama untuk pemula yang baru saja belajar HTML dan ingin menjadi web developer.
Dalam tutorial ini kita akan mempelajari apa itu CSS, sejarah CSS, dan bagaimana cara menggunakannya. Baca dan simak tutorial CSS untuk Pemula ini dengan detail agar lebih mengerti mengenai CSS.
Apa yang Dimaksud dengan CSS
Cascading Style Sheet atau yang sering disingkat CSS adalah bahasa yang digunakan untuk mengatur tampilan web agar lebih menarik seperti tata letak, font, warna, bentuk hingga animasi yang menarik.
Cara penulisan CSS dapat dibagi menjadi 3, yaitu CSS inline, CSS internal, dan CSS eksternal.
CSS Inline
CSS inline adalah cara memberikan style secara langsung ke elemen HTML menggunakan atribut style di dalam elemen tag tersebut.
Contoh:
<h1 style="background-color: skyblue;">Ini adalah contoh heading</h1>
CSS Internal
CSS internal adalah cara memberikan style dengan menulis langsung di dalam file HTML menggunakan tag <style> dan biasanya berada di dalam <head>.
Contoh:
<style>
h1{
background-color: skyblue;
}
</style>
CSS Eksternal
CSS eksternal adalah cara memberikan style dengan cara menulis menggunakan file terpisah dengan ekstensi .css lalu dihubungkan ke HTML menggunakan <link>.
Contoh untuk file HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>contoh</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Ini adalah contoh heading</h1>
</body>
</html>
Contoh untuk file CSS:
h1{
background-color: skyblue;
color: white;
}
Sejarah Perkembangan CSS
Pada awal perkembangan website yang hanya menggunakan HTML, tampilan website hanyalah terdiri dari tulisan saja dan terasa sangat membosankan.
Ide awal tentang pembuatan style sheet di mulai pada tahun 1990. Tim Berners-Lee membuat web browser bernama NeXT browser/editor yang bisa digunakan untuk membuat style sheet. Namun, sintaks style sheet tersebut tidak dipublikasikan.
CSS 1 (1996)
Pada tahun 1994, Hakon Wium Lie mengusulkan konsep CSS, lalu pada tahun 1996 W3C merilis CSS1. Versi pertama ini berfungsi untuk mengatur tampilan dasar seperti warna teks, jenis dan ukuran font, hingga background.
CSS 2 (1998)
Pada tahun 1998, W3C meluncurkan CSS 2 dengan kemampuan yang lebih banyak dibandingkan dengan CSS 1. CSS 2 mendukung positioning seperti absolute, relative, fixed, serta media types agar desain web bisa berbeda ketika ditampilkan di layar yang berbeda.
CSS 2.1 (2011)
CSS 2 diperbaiki menjadi CSS 2.1 yang lebih stabil dan sesuai dengan dukungan browser. Diresmikan pada tahun 2011, versi ini banyak digunakan oleh web developer.
CSS 3 (2001 - sekarang)
CSS 3 hadir dengan sistem modul agar pengembangannya lebih fleksibel. Banyak fitur-fitur modern yang muncul di sini seperti border-radius, box-shadow, transition, animations, flexbox, dan lain-lain. CSS 3 membuat website menjadi jauh lebih interaktif, indah, dan mobile-friendly.
Struktur Dasar CSS
Sebelum menggunakan CSS memahami struktur dasar dan sintaksnya sangat penting terutama bagi pemula yang masih awam. Struktur Dasar CSS dibagi menjadi tiga yaitu: Selektor, Blok Deklarasi, Properti dan Nilainya.
Selektor
Selektor adalah penunjuk atau kata kunci yang akan diberi style. Misalnya p, berarti kita memilih semua elemen <p>. Selektor juga bisa berbentuk taq, class, id, dan atribut. biasanya class ditandai dengan titik diawal class (.judul, .paragraf) sedangkan id diawali dengan # (#judul, #paragraf).
Blok Deklarasi
Blok deklarasi adalah bagian ditulis di dalam tanda kurung kurawal {...}. Bagian ini adalah tempat yang digunakan untuk menuliskan atribut atau properti CSS yang akan diberikan ke pada elemen yang telah diseleksi.
Properti dan Nilai
Di dalam blok deklarasi terdapat pasangan properti dan nilai. Properti menentukan aspek tampilan yang ingin diubah seperti warna teks, ukuran huruf, jarak dan sebagainya, sedangkan nilai adalah pengaturan spesifik untuk properti tersebut. Setiap properti juga harus diakhiri dengan tanda titik koma ( ; ).
Cara Penerapan CSS
Penerapan CSS kali ini akan menggunakan contoh cara menghubungkan file CSS ke HTML, merubah warna background dan merubah warna teks. Tutorial ini juga akan menggunakan CSS eksternal, simak dan ikuti tutorialnya dengan baik.
1. Membuat File HTML dan CSS
buka aplikasi kode editor (vs code, notepad, sublime text) kalian lalu buat file HTML beserta kode htmlnya serta file CSS. setelah itu simpan kedua file tersebut dan beri nama index.html untuk HTML dan styles.css untuk CSS.
2. Membuat tag link
Langkah selanjutnya yaitu membuat tag <link> yang akan digunakan untuk menghubungkan file CSS dengan HTML. Letakkan <link> di dalam <head> dan isi dengan kode berikut:
3. Menerapkan CSS
Tulis salah satu tag heading atau paragraf sebagai contoh. Lalu buat selektor untuk salah satu tag tersebut di dalam file CSS.
4. Deklarasikan dengan memberi properti dan nilai
Isi selektor yang sudah dibuat di dalam file CSS dengan properti dan nilainya.
Contoh membuat background tulisan heading menjadi berwarna biru muda:
Hasil:
Contoh jika ingin mengubah warna teks dari hitam menjadi putih:
Hasilnya warna teks akan berubah menjadi warna putih:
Tutorial CSS untuk pemula di atas hanyalah penjelasan singkat dan sederhana mengenai CSS. CSS tidak sulit dan juga tidak mudah dipelajari namun jika bersungguh-sungguh kita pasti bisa menguasainya. Pelajari juga modul dan materi lainnya agar lebih mengerti mengenai CSS.
Posting Komentar