Apa Itu CSS (Cascading Style Sheets)?
adalah bahasa pemrograman styling yang digunakan untuk mengatur tampilan halaman web berbasis seperti warna, layout, font, jarak, animasi, hingga responsivitas.
CSS memungkinkan pemisahan antara struktur (HTML) dan desain (CSS), sehingga pengembangan web menjadi lebih rapi, efisien, dan mudah dikelola.
Dalam pengembangan modern, CSS menjadi fondasi utama dalam UI/UX web dan digunakan hampir di semua framework seperti React, Vue, dan Laravel Blade.
Fungsi Utama CSS dalam Web Modern
CSS memiliki peran penting dalam pengembangan website, di antaranya:
- Membuat tampilan website lebih menarik dan profesional
- Memisahkan struktur HTML dan desain visual
- Memudahkan maintenance website skala besar
- Mempercepat loading halaman karena kode lebih efisien
- Mendukung desain responsif (mobile-first design)
- Terintegrasi dengan JavaScript dan framework modern
Evolusi CSS Hingga 2026
CSS saat ini sudah berkembang jauh dari versi awalnya:
- CSS2 → dasar layout
- CSS3 → animasi, flexbox, grid
- CSS4 (modern concept) → selektor lebih kuat, variabel, dan modular styling
- Utility-first CSS (seperti Tailwind CSS)
Saat ini, standar industri web 2026 lebih banyak menggunakan:
- Flexbox
- CSS Grid
- Container Queries
- Variable CSS (
--custom-property) - Dark mode native support
Struktur Umum Layout Website
Dalam desain web modern, struktur halaman biasanya terdiri dari:
- Header → logo, judul, navigasi
- Navigation Menu → menu utama website
- Content → isi utama (artikel, produk, dll)
- Sidebar (opsional) → tambahan informasi
- Footer → copyright & informasi tambahan
Metode Layout CSS Modern
1. Flexbox (Paling Populer 2026)
Digunakan untuk layout satu dimensi (horizontal atau vertikal).
2. CSS Grid
Digunakan untuk layout dua dimensi (baris & kolom).
3. Positioning
Masih digunakan untuk elemen tertentu seperti popup, sticky header, dll.
Jenis position:
static→ defaultrelative→ posisi relatifabsolute→ bebas dalam parentfixed→ tetap di layarsticky→ gabungan scroll + fixed
Konsep Penting dalam CSS
Margin, Padding, dan Border
- Margin → jarak antar elemen
- Padding → jarak isi dalam elemen
- Border → garis tepi elemen
Konsep ini disebut sebagai Box Model CSS dan menjadi dasar layout modern.
Cara Penulisan CSS (3 Metode)
1. External CSS (REKOMENDASI 2026)
Metode terbaik dan paling digunakan.
<link rel="stylesheet" href="style.css">
Keunggulan:
- mudah dikelola
- bisa dipakai banyak halaman
- lebih cepat di browser
2. Internal CSS
<style>
.header {
background: #333;
color: white;
}
</style>
3. Inline CSS (tidak direkomendasikan)
<div style="color:red;">Text</div>
Contoh Layout CSS Modern (Flexbox)
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
display: flex;
justify-content: space-between;
padding: 20px;
background: #222;
color: white;
}
.container {
display: flex;
}
.sidebar {
width: 30%;
background: #f2f2f2;
padding: 20px;
}
.content {
width: 70%;
padding: 20px;
}
</style>
</head>
<body>
<div class="header">
<div>Logo</div>
<div>Menu</div>
</div>
<div class="container">
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>
</body>
</html>
Selector CSS dan Kelas (Class & ID)
class→ digunakan berulangid→ unik untuk satu elemen
Contoh:
#header {
background: black;
}
.title {
font-size: 20px;
}
CSS Font Modern (Best Practice 2026)
Gunakan fallback font agar kompatibel di semua browser:
body {
font-family: "Inter", "Roboto", Arial, sans-serif;
}
Styling Link (Hyperlink CSS)
CSS modern tetap mendukung pseudo-class:
a {
text-decoration: none;
color: blue;
}
a:hover {
color: red;
text-decoration: underline;
}
a:visited {
color: purple;
}
CSS Modern Features 2026
Beberapa fitur terbaru yang banyak digunakan:
- CSS Variables (
--primary-color) - Dark Mode (
@media (prefers-color-scheme)) - Container Queries
- Smooth animation (
transition,keyframes) - Modern layout system (Flexbox + Grid)
Kesimpulan
adalah teknologi inti dalam pengembangan web modern yang berfungsi untuk mengatur tampilan dan layout website secara fleksibel, efisien, dan scalable.
Di tahun 2026, CSS tidak hanya digunakan untuk styling sederhana, tetapi juga menjadi bagian penting dalam:
- UI/UX modern
- Framework frontend
- Responsive design
- Web performance optimization