CSS (Cascading Style Sheets) adalah bahasa desain yang digunakan untuk mengatur tampilan dan tata letak elemen HTML di halaman web. Dengan CSS, kita bisa memisahkan konten dari presentasi, membuat desain lebih fleksibel dan mudah dikelola.
CSS mengontrol bagaimana elemen HTML ditampilkan di layar, kertas, atau media lainnya.
1. Dasar-dasar CSS
Apa itu CSS?
CSS mengontrol bagaimana elemen HTML ditampilkan di layar, kertas, atau media lainnya.
Cara Menyisipkan CSS
- Inline CSS
CSS:<p style="color: red;">Teks berwarna merah</p>
- Internal CSS
CSS:<style> p { color: blue; } </style> - External CSS
CSS:<link rel="stylesheet" href="style.css"> [/LIST]Selektor CSS
- Selektor Tag: p { color: red; }
- Selektor Class: .judul { font-weight: bold; }
- Selektor ID: #utama { font-size: 24px; }
- Selektor Universal: * { margin: 0; }
- Selektor Grup: h1, h2, h3 { color: navy; }
Properti dan Nilai
Contoh:
CSS:body { background-color: #f4f4f4; font-family: Arial, sans-serif; }
2. Properti CSS Umum
Warna dan Latar
CSS:color: red; background-color: #fff;Teks dan Font
CSS:font-size: 16px; font-family: 'Roboto', sans-serif; text-align: center;
Margin dan Padding
CSS:margin: 20px; padding: 10px 5px;Border dan Box
CSS:border: 1px solid black; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
3. Tata Letak dan Posisi
Display
- block, inline, inline-block, none, flex, grid
Position
- static, relative, absolute, fixed, sticky
Flexbox (Contoh)
CSS:.container { display: flex; justify-content: space-between; align-items: center; }CSS Grid (Contoh)
CSS:.grid { display: grid; grid-template-columns: 1fr 2fr; }
4. Responsif dan Media Queries
Media Queries
CSS:@media (max-width: 768px) { body { font-size: 14px; } }Satuan CSS
- Relative: em, rem, %, vw, vh
- Absolute: px, pt, cm
5. Animasi dan Transisi
Transisi
CSS:.button { transition: background-color 0.3s ease; }Animasi Keyframes
CSS:@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } .element { animation: slideIn 0.5s ease-in-out; }
6. Pseudo-class dan Pseudo-element
Pseudo-class
CSS:a:hover { color: green; } input:focus { border-color: blue; }Pseudo-element
CSS:p::first-letter { font-size: 200%; }
7. Variabel dan Custom Property
CSS::root { --primary-color: #3498db; } button { background-color: var(--primary-color); }
8. CSS Modern dan Lanjutan
Dark Mode
CSS:@media (prefers-color-scheme: dark) { body { background-color: #222; color: #fff; } }Layered CSS dan @layer
CSS:@layer reset, base, components, utilities;
CSS Nesting (didukung modern browser)
CSS:.card { color: #333; &:hover { background: #eee; } }
9. Best Practice dan Tips
- Gunakan class, hindari ID berlebihan.
- Gunakan sistem naming konvensi (BEM).
- Pisahkan file CSS dari HTML.
- Gunakan alat preprocessor seperti SCSS.
- Gunakan auto-prefixer dan minifier untuk produksi.
10. Alat dan Sumber Daya
- DevTools di browser (Chrome, Firefox)
- Framework CSS: Bootstrap, Tailwind CSS
- Preprocessor: SASS/SCSS, LESS
- Utility Tools: PostCSS, Autoprefixer
- Dokumentasi Resmi:
- MDN CSS Docs
- W3Schools CSS
- Can I use
Penutup
CSS adalah pondasi penting dalam pengembangan web modern. Dengan memahami dasar hingga fitur canggih CSS, Anda dapat menciptakan website yang tidak hanya fungsional, tapi juga indah, responsif, dan interaktif.
