Chapter: Perkenalan
Apa itu CSS
CSS adalah teknologi yang dibutuhkan untuk menghias sebuah website. Seperti memberi warna, mengatur ukuran hingga menyajikan animasi
Skodev
Belajar coding dalam bahasa Indonesia
Diskon kelas baru hingga 25%! Masukkan kupon "lebihcepat" di kelas ini
XSkodev
Belajar coding dalam bahasa Indonesia
Referensi dan dokumentasi lengkap css dalam Bahasa indonesia. Belajar program css, dari developer untuk developer.
CSS adalah teknologi yang dibutuhkan untuk menghias sebuah website. Seperti memberi warna, mengatur ukuran hingga menyajikan animasi
CSS bisa ditulis di tiga tempat. Bersama file HTML, sebagai file terpisah CSS sendiri atau inline alias langsung pada elemen HTMLnya
Begini sturktur dari suatu kode CSS. Di mana ada selektor, atribut dan nilainya.
Ada banyak cara untuk memilih elemen HTML mana yang ingin dihias. Pelajari tentang selektor CSS
Warna adalah salah satu komponen dasar dari sebuah hiasan. Berikut cara memberi warna pada text dengan CSS
Warna adalah salah satu komponen dasar dari sebuah hiasan. Berikut cara memberi warna pada background dengan CSS
Ada banyak cara memberi nilai warna di CSS, seperti kode RGB, HEX, HSL, RGBA, HSLA atau dengan nama unik langsung
Belajar cara mengatur gambar latar belakang atau 'background gambar' di CSS.
Box model adalah istilah pada CSS yang menggambarkan secara visual posisi border, padding dan margin pada setiap elemen.
Border adalah garis batas yang bisa digunakan di setiap elemen.
Padding pada CSS adalah jarak antara garis batas (border) dengan elemennya.
Margin pada CSS adalah jarak antara garis batas (border) dengan elemen luar atau elemen lainnya.
Outline adalah batasan garis yang berada di luar border elemen
Mengatur ukuran elemen HTML, seperti tinggi bisa dengan height, sementara lebar dengan width, masing masing juga bisa diberi nilai minimal dan maksimal
Apa yang terjadi ketika isi konten melebihi ukuran dari pembungkusnya? mari kita intip kekuatan overflow
Pelajari seluk-beluk menggunakan CSS Box Sizing untuk mengatur ukuran dan layout elemen HTML.
Sebuah text bisa dihias sedemikian rupa dengan CSS. Lihat apa saja yang bisa dilakukan di CSS kepada text
Warna text dan latarnya bisa diubah pada CSS dengan properti color dan background-color
Meratakan text pada CSS menggunakan text-align, untuk membuat elemen rata kiri, tengah atau kanan
Untuk memberi baris pada text, baik itu di atas, bawah atau tengah kita bisa menggunakan text-decoration
Untuk mengubah besar/kecilnya huruf yang digunakan bisa juga melalui CSS lewat properti text-transformation
Ada properti detail masing-masing untuk mengatur jarak pada tulisan, jarak antara huruf, kata juga baris
bagaimana cara mengatur jarak di awal paragraf atau memberi indentasi pada website dengan CSS menggunakan text-indent
bagaimana cara mengatur jarak antara huruf satu ke huruf lain pada website dengan CSS menggunakan letter spacing
bagaimana cara mengatur jarak antara baris pada website dengan CSS menggunakan line height
bagaimana cara mengatur jarak antara kata pada sebuah kalimat dengan CSS menggunakan word spacing
bagaimana cara mengatur jarak antara baris kosong atau white-space dengan CSS menggunakan white space
bagaimana cara membuat efek bayangan pada text tulisan di CSS HTML
Mengubah jenis font dengan mengatur font family pada CSS
Google Fonts menawarkan variasi font yang lebih beragam, yang bisa disesuaikan dengan karakter dan jenis situs kamu
Ukuran font bisa diatur dengan menggunakan properti font size pada CSS
Variasi font seperti kemiringan dan ketebalan bisa diatur dengan CSS lewat properi font-style
Pelajari perbedaan antara display block dan inline dalam CSS, dengan contoh dan penjelasan yang mudah dipahami.
Pelajari cara menampilkan elemen dengan CSS inline-block dalam desain web.
Belajar bagaimana menggunakan properti CSS display none untuk menyembunyikan elemen dari halaman web.
Pelajari penggunaan CSS position static sambil memahami cara kerjanya dengan contoh yang mudah dipahami.
Mempelajari fungsi position relative dalam CSS serta cara menggunakannya.
Pelajari cara mengatur posisi elemen pada halaman web dengan menggunakan properti CSS 'position:absolute'.
Pelajari tentang penggunaan properti Position fixed dalam CSS untuk membuat elemen tetap berada dalam posisi tertentu di layar, tidak peduli seberapa jauh pengguna menggulir halaman.
Memahami cara kerja dari posisi sticky dalam CSS dan bagaimana menerapkannya untuk meningkatkan tata letak website.
Pelajari tentang Float dan Clear dalam CSS dan bagaimana cara menggunakannya untuk membentuk layout pada halaman web.
Artikel ini menjelaskan tentang properti z-index dalam CSS, termasuk cara kerja, penggunaan, dan contoh kode yang mudah dipahami.
Pelajari tentang overflow dalam CSS, cara kerjanya, serta bagaimana menggunakannya untuk mengontrol konten yang melebihi batas elemen.
Pelajari transformasi 2D CSS untuk memodifikasi bentuk dan posisi elemen HTML di halaman web Anda.
Belajar cara membuat halaman web anda lebih menarik dengan transisi CSS! Artikel ini akan membantu kamu memahami sintaks dan cara kerjanya.
Animasi CSS memungkinkanmu untuk membuat transisi visual yang halus antara dua atau lebih CSS-nya. Baca lebih lanjut untuk mempelajari cara kerja dan bagaimana menerapkannya dalam desain web.
Pelajari cara membuat animasi dengan keyframes CSS. Pengenalan sederhana ke konsep keyframes, cara menggunakannya, serta contoh kode.
Pelajari cara menciptakan efek transformasi 3D menggunakan CSS, lengkap dengan contoh kode dan penjelasan rinci.
Perspective dalam CSS adalah properti yang membantu menciptakan ilusi depth (kedalaman) dan jarak dalam transformasi 3D
Artikel ini menjelaskan secara detail tentang Flexbox dalam CSS, termasuk konsep dasar, penggunaan dan penjelasan tentang properti-properti yang terkait dengan Flexbox.
Pelajaran ini akan membahas tentang Container dan Item dalam Flexbox, cara kerja dan penggunaannya dalam CSS Flexbox.
Pelajari properti flex-direction dalam CSS Flexbox, yang mendefinisikan arah arus flex item di dalam kontainer.
Pelajari tentang properti CSS flex-wrap dalam tutorial ini. Baca panduan sederhana ini dan tingkatkan pengetahuan Anda tentang CSS Flexbox.
Artikel ini menjelaskan tentang properti CSS `justify-content`, bagaimana cara menggunakannya, dan berbagai nilai yang dapat diatur pada property ini dalam pengembangan web.
Pelajari bagaimana menggunakan properti CSS 'align-items' untuk mengatur posisi elemen di sepanjang sumbu lintang dalam container Fleksibel atau Kotak Kotak.
Pelajari tentang sifat flex-basis CSS dan bagaimana cara penggunaannya untuk mengontrol ukuran elemen yang fleksibel dalam desain responsif.
Pelajari tentang properti CSS flex-grow dan cara menggunakannya untuk mengontrol sejauh mana item tumbuh untuk mengisi ruang yang tersedia dalam container flex.
Artikel ini membahas secara mendalam dan berurutan mengenai bagaimana menggunakan properti CSS `align-self` dalam meratakan elemen dalam tata letak halaman web. Lengkap dengan contoh penggunaan dan penjelasan rinci.
Pelajari cara menggunakan properti flex-order dalam CSS untuk mengubah urutan tampilan elemen dalam kontainer flex.
Artikel ini menjelaskan penggunaan properti Gap dalam flexbox CSS untuk mengontrol jarak antar item.
Pelajari cara menggunakan nested flexbox dalam CSS untuk membuat layout halaman web yang responsif dan fleksibel.
Artikel ini berisi tips dan trik untuk menggunakan flexbox dalam CSS. Pelajari cara efektif menggunakan properti flexbox untuk membuat layout website yang responsif dan fleksibel.
Pelajari cara menggunakan flexbox untuk membuat layout web yang responsif dan fleksibel. Tutorial ini akan membantu Anda memahami penggunaan flexbox dalam CSS.
Pelajari tentang CSS Grid, cara kerjanya, penulisan sintaks, dan fungsi utama menggunakan contoh sederhana dengan gaya w3school.
Pelajari cara kerja container dan item grid dalam CSS dan bagaimana memanfaatkannya untuk mendesain layout website dengan lebih efisien dan mudah.
Pelajari tentang bagaimana menggunakan CSS grid template columns dan rows untuk membuat layout halaman web yang responsif dan fleksibel.
Pelajari lebih lanjut tentang Grid Column dan Grid Row dalam CSS dan cara menggunakan mereka untuk membuat layout yang lebih terstruktur dan responsif.
Pelajari tentang Grid Area dalam CSS dan bagaimana menggunakannya untuk mendesain layout situs web yang responsif dan fleksibel.
Pelajari cara menggunakan property grid-gap dalam CSS Grid untuk mengkontrol jarak antara baris dan kolom.
Pelajari cara penggunaan properti grid auto rows, columns dan flow pada CSS Grid Layout dengan penjelasan singkat dan contoh sederhana.
Pelajari cara mengatur penyejajaran item dalam CSS Grid dengan cara yang mudah dipahami dan praktis. Dapatkan pengetahuan yang anda butuhkan untuk membuat layout web anda lebih rapi dan profesional.
Kenali satuan fr pada CSS Grid. Panduan menggunakannya
Pelajari tentang Grid repeat, minmax dan autofill dalam CSS Grid untuk membuat layout halaman webmu lebih efisien dan responsif.
Artikel ini menjelaskan secara detil mengenai Grid template area dalam CSS Grid Layout, cara mendefinisikan area, dan cara merujuk area tersebut dalam kode kamu.
Pelajari cara membuat layout web dengan menggunakan teknik Grid CSS dalam tutorial ini.
Pelajari tentang website yang responsif, alasan mengapa dibutuhkan, dan bagaimana membuatnya dengan langkah-langkah mudah diterapkan serta contoh praktis.
Pelajari apa itu viewport dalam pengembangan web dan bagaimana caranya digunakan untuk mengontrol tampilan halaman web di berbagai jenis perangkat.
Pelajari tentang media query, breakpoint, dan orientasi dalam CSS dan bagaimana mereka digunakan dalam web development untuk membuat desain responsif.
Artikel ini membahas cara membuat ukuran font yang responsif di CSS menggunakan unit pengukuran yang berbeda seperti em, rem, vw, dan vh.
Pelajari cara membuat ukuran gambar responsif untuk website Anda menggunakan CSS. Langkah mudah yang memastikan tampilan gambar sempurna di semua perangkat.
Belajar cara menggunakan Flexbox untuk membuat layout responsive di CSS.
Pelajari cara menggunakan Grid CSS untuk membuat layout responsive yang dapat disesuaikan dengan berbagai ukuran layar.
Cari tahu bagaimana cara membuat website responsive dengan langkah mudah dan praktis yang disajikan dalam artikel ini. Ikuti tips berikut ini dan buat situsmu semakin menarik di berbagai perangkat.
Pelajari tentang Selektor Atribut dalam CSS, cara kerjanya, dan bagaimana menggunakannya dalam desain web.
Artikel ini menjelaskan konsep dasar Selektor Adjacent Sibling dalam CSS dengan contoh kode yang sederhana dan mudah dimengerti.
Pelajari lebih lanjut tentang kombinator CSS, termasuk jenis-jenisnya dan bagaimana cara menggunakannya untuk memilih elemen secara efisien.
Pelajari bagaimana menggunakan !important dalam CSS, kapan harus digunakan dan apa dampaknya dalam mengontrol prioritas aturan CSS.
Pelajari bagaimana cara menggunakan Pseudo-Class link dalam CSS untuk mempersonalisasi penampilan link web di tutorial ini.
Pelajari tentang Pseudo-element dalam CSS, termasuk cara kerjanya, jenisnya, dan bagaimana menggunakannya dengan contoh code snippets.
Belajar cara menggunakan pseudo-class dalam form CSS untuk memilih elemen tertentu berdasarkan status atau perilakunya pada HTML.
Pelajari tentang pseudo-class child dalam CSS, bagaimana cara kerjanya dan menggunakannya untuk meningkatkan tata letak dan desain web Anda.
Pelajari cara menggunakan pseudo-class nth-child dalam CSS untuk memilih elemen yang memiliki urutan tertentu dalam grup elemen.
Artikel ini memberikan tips dan trik sederhana tentang bagaimana merapikan struktur code CSS kamu agar lebih mudah dibaca dan dipahami.
Belajar bagaimana melakukan minifikasi CSS untuk meningkatkan kecepatan dan performa situs kamu.
Artikel ini menjelaskan tentang CSS Preprocessor, manfaatnya, dan beberapa contoh preprocessor populer seperti LESS, SASS, dan Stylus.
Pelajari cara menggunakan Prefix Vendor CSS untuk memastikan kompatibilitas browser yang lebih baik pada situs web Anda.
Pelajari bagaimana memastikan konten web kamu mudah diakses untuk semua pengguna dengan menerapkan aksesibilitas pada CSS yang efektif. Mulai dari penggunakan warna, hingga kontrol fokus, semua akan dibahas di sini.
Memahami apa itu framework CSS, fungsi dan manfaatnya dalam pengembangan web, serta beberapa contoh framework CSS paling populer.