Pengertian CSS
atau CSS adalah bahasa yang digunakan untuk mengatur tampilan (style) dokumen web seperti dan PHP. CSS berfungsi untuk memisahkan antara struktur (HTML) dan tampilan (desain), sehingga pengembangan website menjadi lebih rapi, efisien, dan mudah dikelola.
Dalam dunia desain web modern, CSS berperan penting dalam pengaturan layout, warna, font, jarak, animasi, hingga responsivitas tampilan website.
Pentingnya CSS dalam Pengembangan Web
CSS merupakan salah satu teknologi utama dalam pengembangan web karena:
- Memisahkan struktur HTML dan desain
- Mempermudah pengelolaan website skala besar
- Mempercepat proses pengembangan UI/UX
- Membuat tampilan website lebih konsisten
- Mendukung semua browser modern
Kesalahan dalam pengaturan CSS dapat menyebabkan tampilan website tidak konsisten di berbagai browser.
Perbedaan Dukungan Browser
Setiap browser memiliki engine rendering yang berbeda. Hal ini menyebabkan perbedaan interpretasi CSS.
Browser modern seperti Chrome, Firefox, dan Edge sudah mendukung CSS secara penuh. Namun pada versi lama seperti Internet Explorer, banyak fitur CSS tidak didukung dengan baik sehingga sering terjadi masalah layout.
Metode Layout dalam CSS
Dalam pengembangan web, terdapat dua metode layout utama:
1. Metode Table (Lama)
Digunakan pada era awal web, namun saat ini sudah tidak direkomendasikan karena tidak fleksibel.
2. Metode Div (Modern)
Menggunakan elemen <div> dengan CSS untuk membuat layout yang lebih fleksibel dan responsif.
Manfaat Menggunakan CSS
Penggunaan CSS memberikan banyak keuntungan:
- Kode HTML menjadi lebih sederhana
- Ukuran file lebih kecil sehingga loading lebih cepat
- Perubahan desain cukup dilakukan di satu file CSS
- Dapat digunakan bersama JavaScript
- Didukung hampir semua browser modern
Struktur Umum Website
Dalam desain web, biasanya terdapat 4 bagian utama:
- Header → judul atau logo website
- Menu → navigasi utama
- Content → isi utama website
- Footer → informasi tambahan atau copyright
Properti Layout CSS
1. Position (Posisi Elemen)
static→ posisi defaultrelative→ posisi relatif terhadap posisi normalabsolute→ posisi berdasarkan parent atau browserfixed→ posisi tetap saat scroll
2. Float dan Clear
float: left→ elemen ke kirifloat: right→ elemen ke kananclear: left→ menghindari elemen di kiriclear: right→ menghindari elemen di kananclear: both→ menghindari semua float
Box Model CSS
Dalam CSS, setiap elemen memiliki model kotak yang terdiri dari:
- Margin → jarak luar antar elemen
- Border → garis tepi elemen
- Padding → jarak antara isi dan border
Konsep ini sangat penting dalam pengaturan layout modern.
Contoh Dasar CSS
<html>
<head>
<style type="text/css">
#header {
width: 900px;
height: 50px;
border: 1px solid #640404;
}
#headerLeft {
width: 400px;
background-color: #CCCCCC;
height: 50px;
float: left;
text-align: center;
}
#headerRight {
width: 450px;
background-color: #999999;
height: 50px;
float: right;
text-align: center;
}
</style>
</head>
<body>
<div id="header">
<div id="headerLeft">Header Left</div>
<div id="headerRight">Header Right</div>
</div>
</body>
</html>
Cara Penerapan CSS dalam HTML
1. External CSS (REKOMENDASI)
File CSS terpisah:
<link rel="stylesheet" type="text/css" href="style.css">
2. Internal CSS
<style>
.header {
background: #333;
color: white;
}
</style>
3. Inline CSS
<div style="background-color:#999; text-align:center;">
Inline CSS
</div>
Penggunaan Class dan Selector
CSS menggunakan selector untuk mengatur elemen:
class→ dapat digunakan berulangid→ unik hanya satu elemen
Contoh:
.title {
font-size: 24px;
}
#main {
width: 100%;
}
Font Family dalam CSS
Untuk kompatibilitas browser, gunakan fallback font:
<h1 style="font-family: 'Times New Roman', Times, serif;">
Serif Font
</h1>
Styling Link dengan CSS
CSS memungkinkan pengaturan tampilan link secara lengkap:
a.link1:link {
font-weight: bold;
font-size: 12px;
color: #C87C28;
text-decoration: none;
}
a.link1:hover {
text-decoration: underline;
}
a.link2:link {
font-weight: bold;
font-size: 12px;
color: #663300;
text-decoration: underline;
}
a.link2:hover {
color: #ff6600;
text-decoration: underline overline;
}
Kesimpulan
adalah teknologi penting dalam pengembangan website modern yang digunakan untuk mengatur tampilan, layout, dan pengalaman pengguna.
Dengan CSS, pengembang dapat:
- Membuat website lebih profesional
- Mengatur desain secara terpusat
- Mempercepat pengembangan web
- Membuat tampilan responsif di semua perangkat
CSS saat ini menjadi standar utama dalam industri web development dan digunakan di hampir semua website modern di dunia.