Malay

Tutorial CSS

Tutorial CSS3

CSS Lanjutan

Rujukan CSS

CSS Responsif

Panduan Tutorial CSS3: Panduan Awal untuk Menyusun Web

Apa Itu CSS?

CSS, singkatan dari Cascading Style Sheets, adalah bahasa gaya yang kuat yang digunakan untuk mendeskripsikan presentasi dokumen yang ditulis dalam HTML atau XML. Itu seperti desainer mode dunia web, menentukan bagaimana elemen harus ditampilkan di layar, kertas, atau media lainnya.

CSS3 - Tutorial

Bayangkan Anda sedang membangun sebuah rumah. HTML akan menjadi struktur - tembok, atap, dan fondasi. CSS, kemudian, adalah segala sesuatu yang membuat rumah terlihat bagus - cat, wallpaper, kain jendela, dan furnitur. Itu apa yang mengubah halaman web yang kasar menjadi karya kesenian yang visually appealing!

Siapa yang Harus Belajar CSS?

Siapa pun yang ingin membuat website yang indah dan responsif harus belajar CSS. Ini termasuk:

  1. Pengembang web
  2. Desainer web
  3. Desainer UI/UX
  4. Marketer digital
  5. Blogger
  6. Siapa pun yang tertarik dalam teknologi web

Bahkan jika Anda pemula sepenuhnya tanpa pengalaman pemrograman sebelumnya, jangan khawatir! CSS dirancang untuk intuitif dan mudah dipelajari. Dengan sedikit latihan, Anda akan dapat menyusun website seperti seorang ahli dalam waktu singkat.

Jenis CSS

Ada tiga jenis utama CSS:

  1. CSS Inline
  2. CSS Internal
  3. CSS Eksternal

mari kitauraikan ini dengan beberapa contoh:

1. CSS Inline

CSS Inline diterapkan langsung ke elemen HTML menggunakan atribut style.

<p style="color: biru; font-size: 16px;">Ini adalah paragraf berwarna biru dengan ukuran font 16px.</p>

Metode ini cepat tapi tidak direkomendasikan untuk proyek yang besar karena itu mencampur konten dengan presentasi.

2. CSS Internal

CSS Internal ditempatkan dalam tag <style> di bagian <head> HTML.

<head>
<style>
p {
color: hijau;
font-size: 18px;
}
</style>
</head>
<body>
<p>Paragraf ini akan berwarna hijau dengan ukuran font 18px.</p>
</body>

Metode ini berguna untuk menyusun halaman tunggal tapi menjadi tidak efisien untuk website multi-halaman.

3. CSS Eksternal

CSS Eksternal disimpan dalam file .css terpisah dan ditautkan ke dokumen HTML.

<!-- Dalam file HTML Anda -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* Dalam file styles.css Anda */
p {
color: merah;
font-size: 20px;
}

Ini adalah metode yang paling efisien untuk proyek yang besar karena memisahkan konten dari presentasi dan memudahkan pemeliharaan.

Contoh Kode CSS

Ayo masuk kedalam contoh yang lebih lengkap untuk melihat CSS dalam aksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Website Saya yang Menakjubkan</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
}
.highlight {
background-color: kuning;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>Selamat Datang di Website Saya yang Menakjubkan</h1>
<p>Ini adalah paragraf dengan beberapa teks <span class="highlight">berhalo</span>.</p>
</div>
</body>
</html>

Dalam contoh ini, kita menggunakan CSS Internal untuk menyusun halaman web kita. Mari kitauraikan apa yang dilakukan setiap bagian:

  • Kita mengatur body font ke Arial dan memberikan background color abu-abu ringan.
  • Kelas .container membuat kotak putih yang terpusat dengan sedikit padding dan bayangan halus.
  • h1 ditempatkan di tengah dan berwarna abu-abu gelap.
  • Kelas .highlight membuat teks berhalo kuning.

Alasan untuk Menggunakan CSS

  1. Pemisahan konten dan presentasi
  2. Keserasian di beberapa halaman
  3. Waktu muat halaman yang cepat
  4. Pemeliharaan dan pembaruan yang mudah
  5. Kemampuan desain responsif
  6. Peningkatan pengalaman pengguna

Prasyarat untuk Belajar CSS

Untuk memulai belajar CSS, Anda akan memerlukan:

  1. Pengetahuan dasar HTML
  2. Editor teks (seperti Visual Studio Code, Sublime Text, atau bahkan Notepad)
  3. Browser web (Chrome, Firefox, atau Safari)
  4. Enthusiasm dan keinginan untuk mencoba!

Memulai Tutorial CSS

Sekarang kita telah mengetahui dasar-dasar, mari kita mulai menyusun! Kita akan membuat halaman web sederhana dan menyusunya langkah demi langkah.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Halaman Pertama yang Saya Susun</title>
<style>
/* Kita akan menambahkan CSS di sini */
</style>
</head>
<body>
<header>
<h1>Selamat Datang di Website Saya</h1>
</header>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
<main>
<h2>Tentang Saya</h2>
<p>Hallo! Saya sedang belajar CSS dan itu sangat menakjubkan!</p>
</main>
<footer>
<p>&copy; 2023 Website Saya</p>
</footer>
</body>
</html>

Sekarang, mari kita tambahkan beberapa CSS untuk membuatnya terlihat bagus!

body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}

header {
background-color: #35424a;
color: white;
text-align: center;
padding: 1rem;
}

nav ul {
background-color: #2c3e50;
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline-block;
margin-right: 10px;
}

nav ul li a {
color: white;
text-decoration: none;
padding: 5px 10px;
}

nav ul li a:hover {
background-color: #34495e;
}

main {
padding: 20px;
}

footer {
background-color: #35424a;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}

CSS ini melakukan hal-hal berikut:

  • Mengatur font dan tinggi baris yang konsisten untuk keseluruhan halaman.
  • Membuat header gelap dengan teks putih yang ditempatkan di tengah.
  • Menyusun menu navigasi dengan background gelap dan item daftar yang berjejer.
  • Menambahkan efek hover ke tautan navigasi.
  • Menambahkan padding ke area konten utama.
  • Membuat footer yang tetap di bagian bawah halaman.

Properti CSS

CSS menggunakan rentang luas properti untuk menyusun elemen. Berikut adalah tabel dari beberapa properti umum:

Properti Deskripsi Contoh
color Mengatur warna teks color: biru;
background-color Mengatur warna background background-color: #f0f0f0;
font-size Mengatur ukuran font font-size: 16px;
font-family Mengatur jenis font font-family: Arial, sans-serif;
margin Mengatur ruang luar margin: 10px;
padding Mengatur ruang dalam padding: 5px;
border Mengatur gaya border border: 1px solid hitam;
text-align Mengatur perataan teks text-align: center;
display Mengatur jenis tampilan display: flex;

CSS Tingkat Lanjut

Sekali Anda merasa nyaman dengan CSS, Anda dapat mengeksplorasi konsep tingkat lanjut seperti:

  1. Layout Flexbox dan Grid
  2. Desain responsif dengan media queries
  3. Animasi dan transisi CSS
  4. Preprocessor CSS seperti Sass atau Less
  5. Framework CSS seperti Bootstrap atau Tailwind

Ingat, kunci untuk menjadi ahli CSS adalah latihan. Jangan khawatir untuk mencoba dan membuat kesalahan - itu bagaimana kita belajar! Selamat menyusun!

Credits: Image by storyset

Tutorial Sebelumnya:
CSS - Jenis Data
Tutorial Seterusnya:
CSS - Bucu bulat