Indonesia

Tutorial CSS

Tutoriak CSS3

CSS Tingkat Lanjut

Referensi CSS

CSS Responsif

Panduan Tutorial CSS3: Panduan Untuk Pemula dalam Menyusun Web

Apa Itu CSS?

CSS, singkatan dari Cascading Style Sheets, adalah bahasa penulisan yang kuat digunakan untuk menggambarkan presentasi dokumen yang ditulis dalam HTML atau XML. Hal ini mirip dengan desainer mode dunia web, menentukan bagaimana elemen harus ditampilkan pada 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, dan furnitur. Itu yang membuat halaman web yang kasar menjadi karya seni yang menarik!

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感兴趣 dalam teknologi web

Bahkan jika Anda adalah 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-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: blue; font-size: 16px;">Ini adalah paragraf 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: green;
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: red;
font-size: 20px;
}

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

Contoh Kode CSS

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Website Menakjubkan Saya</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: yellow;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>Selamat Datang di Website Menakjubkan Saya</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 latar belakang abu-abu pucat.
  • Kelas .container membuat kotak putih yang terpusat dengan beberapa padding dan bayangan halus.
  • h1 diletakkan di tengah dan berwarna abu-abu gelap.
  • Kelas .highlight membuat teks berhalo kuning.

Alasan untuk Menggunakan CSS

  1. Pemisahan konten dan presentasi
  2. Keseragaman di banyak halaman
  3. Waktu muatan 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. Semangat dan kesediaan untuk percobaan!

Panduan 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 Disusun Saya</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 konsisten untuk keseluruhan halaman.
  • Membuat header gelap dengan teks putih yang diletakkan di tengah.
  • Menyusun menu navigasi dengan latar belakang gelap dan item daftar dalam baris.
  • 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: blue;
background-color Mengatur warna latar belakang 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 batas border: 1px solid black;
text-align Mengatur perataan teks text-align: center;
display Mengatur jenis tampilan display: flex;

CSS Tingkat Lanjut

Sekarang Anda merasa nyaman dengan CSS, Anda dapat menjelajahi 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. Kerangka CSS seperti Bootstrap atau Tailwind

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

Credits: Image by storyset

Tutorial Sebelumnya:
CSS - Tipe Data
Tutorial Selanjutnya:
CSS - Sudut yang Bulat