CSS (Cascading Style Sheets)

CSS adalah bahasa yang mengontrol presentasi visual halaman web — tata letak, warna, font, spasi, animasi, dan desain responsif. Setiap situs web menggunakan CSS bersama HTML, dan CSS esensial untuk membuat antarmuka pengguna yang modern, aksesibel, dan menarik secara visual.

Tipe MIME

text/css

Tipe

Teks

Kompresi

Lossless

Kelebihan

+ Separates presentation from content (HTML)
+ Powerful layout systems: Flexbox, Grid, and container queries
+ Custom properties enable theming and dynamic values
+ Media queries enable responsive design for all screen sizes

Kekurangan

− Global scope can cause unintended style conflicts
− Browser compatibility differences require testing
− No native variables before custom properties (pre-2017)

Kapan Menggunakan .CSS

Gunakan CSS untuk semua styling halaman web, dari tipografi sederhana hingga tata letak dan animasi yang kompleks.

Detail Teknis

CSS menggunakan selektor untuk menargetkan elemen HTML dan blok deklarasi untuk menerapkan gaya. Aturan cascade, spesifisitas, dan inheritance menentukan gaya mana yang diutamakan. CSS modern mencakup Flexbox, Grid, custom properties (variabel), dan container queries.

Riwayat

Håkon Wium Lie mengusulkan CSS pada tahun 1994 di CERN. CSS1 diterbitkan pada tahun 1996, CSS2 pada tahun 1998, dan CSS3 memperkenalkan spesifikasi modular mulai tahun 1999. Fitur CSS modern seperti Grid, Flexbox, dan custom properties terus berkembang.

Konversi dari .CSS

.css → .html .css → .js .css → .json .css → .jsx .css → .less .css → .scss .css → .ts .css → .tsx

Konversi ke .CSS

.html → .css .js → .css .json → .css .jsx → .css .less → .css .scss → .css .ts → .css .tsx → .css

Format Terkait

.c .cpp .csv .go .java .js .json .jsx .less .py .rs .scss .sql .toml .ts .tsv .tsx .xml .yaml .yml

Istilah Terkait

Aspect Ratio (CSS) BEM Calc Cascade Color Function CSS max() CSS min() CSS Nesting Selector CSS Paint API CSS Scope Custom Properties Inheritance Data URI EPUB Keyframe Animation lab() Layer Nesting Popover Specificity Stacking Context

Learn More

CSS Units Explained: px, em, rem, vh, and When to Use Each

CSS offers over a dozen length units, each suited to different situations. Understanding the differences between absolute and relative units …

JSON vs YAML vs TOML: Choosing a Configuration Format

Configuration files are the backbone of modern applications. JSON, YAML, and TOML each offer different trade-offs between readability, complexity, and …

Flexbox vs CSS Grid: A Practical Comparison

Flexbox and CSS Grid are complementary layout systems, not competitors. This guide clarifies when to reach for each one and …

How to Format and Validate JSON Data

Malformed JSON causes silent failures in APIs and configuration files. Learn how to format, validate, and debug JSON documents to …

Base64 Encoding: How It Works and When to Use It

Base64 converts binary data into ASCII text, making it safe for transmission through text-based systems. Learn when Base64 is the …

How to Create CSS Gradients: Linear, Radial, and Conic

CSS gradients create smooth color transitions without image files. Learn to build linear, radial, and conic gradients with precise control …

Studi Kasus

T Minifying and Optimizing CSS for Production Deployment