Contoh CSS

By Infokoding Last updated Oct 10, 2017

Sintaks CSS

Selector element
Selector id
Class Selector (untuk semua elemen)
Class Selector (hanya untuk elemen <p>)
Pengelompokan pemilih

Penjelasan CSS Syntax »

Background CSS

Mengatur warna background website
Atur warna background dari berbagai elemen
Tetapkan gambar sebagai background halaman
Cara mengulang gambar background hanya secara horisontal
Bagaimana memposisikan gambar background
Gambar background tetap (gambar ini tidak akan bergulir dengan sisa halaman)
Semua properti background dalam satu deklarasi
Contoh background yang lebih tinggi

Penjelasan Background Properties »

Borders CSS

Menetapkan lebar border dari empat sisi teks (Border Text)
Atur lebar border atas teks
Atur lebar border bawah
Atur lebar border kiri
Tetapkan lebar border kanan
Atur Style Sisi Border
Atur Style border atas
Atur Style border bawah
Atur Style border kiri
Atur Style border kanan
Atur warna dari empat sisi border
Atur warna border atas
Atur warna border bawah
Atur warna border kiri
Atur warna border kanan
Semua properti border dalam satu deklarasi
Tambahkan border bulat ke elemen
Tetapkan border yang berbeda di setiap sisi
Semua properti border atas dalam satu deklarasi
Semua properti border bawah dalam satu deklarasi
Semua properti border kiri dalam satu deklarasi
Semua properti border yang tepat dalam satu deklarasi

Penjelasan Border Properties »

Margin CSS

Tentukan margin yang berbeda untuk setiap sisi elemen
Biarkan margin kiri diwarisi dari elemen induk
Properti shorthand margin
Tetapkan margin ke auto untuk memusatkan elemen ke dalam wadahnya

Penjelasan Margin Properties »

Padding CSS

Setel padding kiri dari sebuah elemen
Atur padding elemen yang benar
Setel padding atas elemen
Setel padding bagian bawah sebuah elemen
Semua properti padding dalam satu deklarasi
Penjelasan Padding Properties »

Height/Width CSS

Tetapkan tinggi dan lebar elemen
Tetapkan lebar maksimal elemen
Tetapkan tinggi dan lebar elemen yang berbeda
Tetapkan tinggi dan lebar gambar menggunakan persen
Tetapkan lebar minimum dan lebar maksimal elemen
Tetapkan min-height dan max-height dari sebuah elemen
Penjelasan Height/Width Properties »

Box Model CSS

Mendemonstrasikan model kotak
Tentukan elemen dengan lebar total 250px
Penjelasan Box Model Properties »

Outline CSS

Buat garis di sekitar elemen (garis besar)
Atur gaya garis besar
Atur warna garis besar
Tetapkan lebar garis besar
Penjelasan Outline Properties »

Text CSS

Mengatur warna teks dari berbagai elemen
Sejajarkan teks
Hapus garis di bawah link
Hiasi teksnya
Kontrol huruf dalam teks
Teks indent
Tentukan spasi antar karakter
Tentukan ruang antar baris
Tetapkan arah teks dari sebuah elemen
Tingkatkan ruang putih di antara kata-kata
Tentukan bayangan teks untuk sebuah elemen
Nonaktifkan pembungkus teks di dalam elemen
Penyelarasan vertikal gambar di dalam teks
Penjelasan Text Properties »

CSS Fonts

Tetapkan font teks
Tetapkan ukuran font
Tetapkan ukuran font di px
Tetapkan ukuran font di em
Tetapkan ukuran font dalam persen dan em
Atur gaya font
Tetapkan varian font
Tetapkan keberanian font
Semua properti font dalam satu deklarasi
Penjelasan Font Properties »

CSS Icons

Font Awesome icon
Bootstrap icon
Google icon
Penjelasan Icon Properties »

Daftar CSS

Semua daftar item yang berbeda dalam daftar daftar
Tetapkan gambar sebagai penanda item daftar
Posisikan penanda item daftar
Hapus pengaturan daftar default
Semua daftar properti dalam satu deklarasi
Daftar gaya dengan warna
Daftar berbaris lebar penuh

Penjelasan Daftar Properties »

Tabel CSS

Tentukan batas hitam untuk elemen tabel, th, dan td
Penggunaan border-collapse
Perbatasan tunggal di sekeliling meja
Tentukan lebar dan tinggi meja
Tetapkan penyejajaran horizontal konten (text-align)
Tetapkan penyejajaran vertikal konten (vertikal-align)
Tentukan padding untuk elemen th dan td
Pemisah horisontal
Meja yang melayang
Meja bergaris
Tentukan warna batas tabel
Tetapkan posisi judul tabel
Tabel Responsif
Buat meja mewah
Penjelasan Label Properties »

Tampilan CSS

Cara menyembunyikan elemen (visibilitas: tersembunyi)
Bagaimana cara tidak menampilkan elemen (display: none)
Cara menampilkan elemen tingkat blok sebagai elemen sebaris
Cara menampilkan elemen inline sebagai elemen tingkat blok
Cara menggunakan CSS bersama dengan JavaScript untuk menampilkan konten tersembunyi
Penjelasan Tampilan Properties »

Posisi CSS

Posisikan elemen relatif ke jendela browser
Posisikan elemen relatif terhadap posisi normalnya
Posisikan elemen dengan nilai absolut
Sticky positioning
Elemen yang tumpang tindih
Tetapkan bentuk elemen
Atur tepi atas gambar menggunakan nilai piksel
Atur tepi bawah gambar menggunakan nilai piksel
Atur tepi kiri gambar menggunakan nilai piksel
Atur tepi kanan gambar menggunakan nilai piksel
Posisikan teks gambar (pojok kiri atas)
Posisikan teks gambar (pojok kanan atas)
Posisikan teks gambar (pojok kiri bawah)
Posisikan teks gambar (pojok kanan bawah)
Teks gambar posisi (terpusat)
Penjelasan Posisi Properties »

Overflow CSS

Menggunakan overflow: visible – Overflow tidak terpotong. Ini merender di luar kotak elemen.
Menggunakan overflow: hidden – Overflow terpotong, dan sisa konten tersembunyi.
Menggunakan overflow: scroll – Overflow terpotong, tapi scrollbar ditambahkan untuk melihat konten lainnya.
Menggunakan overflow: auto – Jika overflow terpotong, scrollbar harus ditambahkan untuk melihat konten lainnya.
Menggunakan overflow-x dan overflow-y.
Penjelasan Overflow Properties »

Floating CSS

A simple use of the float property
An image with border and margins that floats to the right in a paragraph
An image with a caption that floats to the right
Let the first letter of a paragraph float to the left
Create an image gallery with the float property
Turning off float (using the clear property)
Creating a horizontal menu
Creating a homepage without tables
Penjelasan Floating Properties »

CSS Aligning Elements

Pusat selaras dengan margin
Pusat menyelaraskan teks
Pusatkan gambar
Kiri / Kanan sejajar dengan posisi
Penyesuaian kiri / kanan dengan posisi – Solusi crossbrowser
Kiri / Kanan sejajar dengan float
Penyesuaian Kiri / Kanan dengan float – Crossbrowser solution Center secara vertikal dengan padding
Pusat vertikal dan horizontal
Pusat vertikal dengan garis-tinggi
Pusat vertikal dan horizontal dengan posisi
Penjelasan Floating Properties »

CSS Combinators

Descendant selector
Child selector
Adjacent Sibling selector
General Sibling selector
Penjelasan Combinators Properties »

Generated Content CSS

Masukkan URL dalam tanda kurung setelah setiap link dengan konten properti
Bagian penomoran dan sub-bagian dengan “Bagian 1”, “1.1”, “1.2”, dll.
Tentukan tanda kutip dengan properti tanda petik
Penjelasan Generated Content Properties »

Pseudo-classes CSS

Tambahkan warna yang berbeda ke hyperlink
Tambahkan gaya lainnya ke hyperlink
Use of :focus
:first-child – match the first p element
:first-child – match the first i element in all p elements
:first-child – Match all i elements in all first child p elements
Penggunaan: lang
Penjelasan Pseudo-classes Properties »

CSS Pseudo-elements

Buat huruf pertama khusus dalam teks
Buat baris pertama khusus dalam teks
Buat huruf pertama dan baris pertama spesial
Gunakan: sebelum memasukkan beberapa konten sebelum elemen
Gunakan: setelah memasukkan beberapa konten setelah elemen
Penjelasan Pseudo-elements Properties »

Opacity CSS

Membuat gambar transparan
Membuat gambar transparan – efek mouseover
Efek penggerak digerakkan terbalik untuk gambar transparan
Kotak transparan / div
Kotak transparan / div dengan nilai RGBA
Membuat kotak transparan dengan teks pada gambar latar belakang

Penjelasan Opacity Properties »

Bar Navigasi CSS

Bar navigasi vertikal bergaya penuh
Sepenuhnya bergaya navigasi horizontal bar

Penjelasan Bar Navigasi Properties »

Dropdown CSS

Teks dropdown
Menu drop down
Menu dropdown kanan-sejajar
Gambar dropdown
Panel navigasi Dropdown

Penjelasan Dropdown Properties »

Tooltips CSS

Tooltip kanan
Tooltip kiri
Tooltip teratas
Tooltip bawah
Keterangan alat dengan panah
Tooltip animasi

Penjelasan Tooltips Properties »

Galeri Gambar CSS

Galeri foto
Galeri foto responsif

Penjelasan Gallery Properties »

CSS Image Sprites

An image sprite
An image sprite – a navigation list
An image sprite with hover effect

Penjelasan Image Sprites Properties »

Atribute Selector CSS

Memilih semua elemen dengan atribut target
Memilih semua elemen dengan atribut target = “_ blank”
Memilih semua elemen dengan atribut judul yang berisi daftar kata yang dipisahkan oleh spasi, yang salah satunya adalah “bunga”
Memilih semua elemen dengan nilai atribut kelas yang dimulai dengan “top” (harus seluruh kata)
Memilih semua elemen dengan nilai atribut kelas yang dimulai dengan “top” (tidak boleh keseluruhan kata)
Memilih semua elemen dengan nilai atribut kelas yang diakhiri dengan “test”
Memilih semua elemen dengan nilai atribut kelas yang berisi “te”

Penjelasan Selector Properties »

Formulir CSS

Bidang input lebar penuh
Bidang input empuk
Bidang masukan yang dibatasi
Bidang masukan berbatas bawah
Bidang masukan berwarna
Bidang masukan fokus
Bidang masukan fokus 2
Masukan dengan ikon / gambar
Masukan pencarian animasi
Styling textareas
Styling pilih menu
Tombol input styling
Formulir dijelaskan

Penjelasan Form Properties »

Buat counter

Penghitung bersarang 1
Penghitung bersarang 2

Penjelasan Counters Properties »

Rounded Corners CSS3

Tambahkan sudut membulat ke elemen
Putarkan setiap sudut secara terpisah
Buat sudut elips

Penjelasan Rounded Corners Properties »

Gambar Perbatasan CSS3

Buat bingkai gambar di sekitar elemen, gunakan kata kunci bulat
Buat bingkai gambar di sekitar elemen, gunakan kata kunci peregangan
Batas gambar – Nilai irisan yang berbeda-beda

Penjelasan Border Images Properties »

Backgrounds CSS3

Tambahkan beberapa gambar latar belakang untuk elemen
Tentukan ukuran gambar latar belakang
Skala gambar latar belakang menggunakan “contains” dan “cover”
Tentukan ukuran beberapa gambar latar belakang
Gambar latar belakang ukuran penuh (lengkap isi area konten)
Gunakan latar belakang-asal untuk menentukan di mana gambar latar belakang diposisikan
Gunakan background-clip untuk menentukan area melukis latar belakang

Penjelasan Background Properties »

Gradien CSS3

Gradien Linear – bagian atas ke bawah
Linear Gradient – kiri ke kanan
Linear Gradient – diagonal
Linear Gradient – dengan sudut yang ditentukan
Linear Gradient – dengan beberapa warna berhenti
Linear Gradient – warna pelangi + teks
Linear Gradient – dengan transparansi
Gradien linier – gradien linier berulang
Radial Gradient – berhenti warna yang merata
Radial Gradient – berhenti warna yang berbeda
Radial Gradient – bentuknya
Radial Gradient – kata kunci ukuran berbeda
Radial Gradient – gradien radial berulang

Penjelasan Gradient Properties »

Efek bayangan CSS3

Efek bayangan sederhana
Tambahkan warna bayangan
Tambahkan efek blur ke bayangan
Teks putih dengan bayangan hitam
Cahaya lampu neon merah menyala
Cahaya cahaya neon merah dan biru
Teks putih dengan bayangan hitam, biru, dan gelap
Tambahkan kotak-bayangan sederhana ke sebuah elemen
Tambahkan warna ke kotak-bayangan
Tambahkan efek warna dan kabur ke kotak-bayangan
Buat kartu seperti kertas (teks)
Buat kartu seperti kertas (gambar polaroid)

Penjelasan Shadow Effect Properties »

Teks CSS3

Tentukan bagaimana konten yang disembunyikan dan meluap harus diisyaratkan kepada pengguna
Cara menampilkan konten yang meluap saat mengarahkan kursor ke elemen
Biarkan kata-kata panjang bisa dipatahkan dan bungkus ke baris berikutnya
Tentukan aturan melanggar baris

Penjelasan Text CSS3 Properties »

Font CSS3

Gunakan font “Anda sendiri” di @ font-face rule
Gunakan font “own” Anda di @ font-face rule (bold)

Penjelasan Font CSS3 Properties »

Transformasi 2D CSS3

translate () – memindahkan elemen dari posisi saat ini
Putar () – memutar elemen searah jarum jam
Putar () – putar elemen berlawanan arah jarum jam
skala () – meningkatkan elemen
skala () – mengurangi elemen
skewX () – mengaitkan elemen sepanjang sumbu X
skewY () – mengaitkan elemen sepanjang sumbu Y
condong () – menjepit elemen sepanjang sumbu X dan Y
matriks () – putar, skala, pindahkan, dan miringkan sebuah elemen

Penjelasan Transfrom 2D Properties »

Transformasi 3D CSS3

rotateX () – memutar elemen di sekitar sumbu X-nya pada derajat tertentu
rotateY () – memutar elemen di sekitar sumbu Y pada tingkat tertentu
rotateZ () – memutar elemen di sekitar sumbu Z pada tingkat tertentu

Transisi CSS3

Transisi – mengubah lebar elemen
Transisi – mengubah lebar dan tinggi elemen
Tentukan kurva kecepatan yang berbeda untuk transisi
Tentukan penundaan untuk efek transisi
Tambahkan transformasi ke efek transisi
Tentukan semua properti transisi dalam satu properti singkat

Penjelasan Transisi CSS3 Properties »

Animasi CSS3

Bind animasi ke elemen
Animasi – ubah warna latar belakang elemen
Animasi – ubah warna background dan posisi elemen
Tunda sebuah animasi
Jalankan animasi 3 kali sebelum berhenti
Jalankan animasi untuk selama-lamanya
Jalankan animasi dalam arah sebaliknya
Jalankan animasi dalam siklus alternatif
Kurva kecepatan untuk animasi
Properti steno animasi

Penjelasan Animasi Properties »

Gambar CSS3

Gambar bulat
Gambar yang dilingkari
Gambar kecil
Gambar kecil sebagai link
Gambar responsif
Teks gambar (pojok kiri atas)
Teks gambar (pojok kanan atas)
Teks gambar (pojok kiri bawah)
Teks gambar (pojok kanan bawah)
Teks gambar (terpusat)
Gambar polaroid
Filter gambar abu-abu
Advanced – Image Modal dengan CSS & JavaScript

Penjelasan Gambar CSS3 Properties »

Tombol CSS3

Tombol CSS dasar
Tombol warna
Ukuran tombol
Tombol bulat
Batas tombol berwarna
Tombol hoverable
Tombol bayangan
Tombol tidak aktif
Lebar tombol
Kelompok tombol
Kelompok tombol Bordered
Tombol Animasi (Efek Hover)
Tombol animasi (Ripple Effect)
Tombol Animasi (Efek Ditekan)

Penjelasan Tombol CSS3 Properties »

Pagination CSS3

Pagination sederhana
Pagination aktif dan hoverable
Bulat pagination yang aktif dan lebat
Efek transisi yang melayang
Pagination bordered
Berformat berbaris bulat
Paginasi dengan ruang antar link
Ukuran Pagination
Paginasi dengan ruang antar link
Paginasi terpusat
Remah roti

Penjelasan Pagination CSS3 Properties »

Beberapa Kolom CSS3

Buat beberapa kolom
Tentukan jarak antar kolom
Tentukan gaya aturan antar kolom
Tentukan lebar aturan antar kolom
Tentukan warna aturan antar kolom
Tentukan lebar, gaya dan warna aturan antar kolom
Tentukan berapa banyak kolom yang harus dilalui elemen
Tentukan lebar optimal yang disarankan untuk kolom

Penjelasan Kolom CSS3 Properties »

Antarmuka Pengguna CSS3

Biarkan pengguna mengubah ukuran lebar elemen
Biarkan pengguna mengubah ukuran tinggi elemen
Biarkan pengguna mengubah ukuran lebar dan tinggi elemen
Tambahkan spasi antara garis besar dan batas elemen

Penjelasan User Interface Properties »

Ukuran Kotak CSS3

Lebar elemen tanpa ukuran kotak
Lebar elemen dengan ukuran kotak
Form elements + box-sizing

Penjelasan Box Sizing Properties »

Flexbox CSS3

Flexbox dengan tiga item flex
Flexbox dengan tiga item flex – arah rtl
flex-direction – row-reverse
flex-direction – column
flex-direction – column-reverse
justify-content – flex-end
justify-content – center
Membenarkan-konten – ruang-antara
justify-content – space-around
align-item – stretch
align-item – flex-start
align-items – flex-end
align-item – center
align-item – baseline
flex-wrap – nowrap
flex-wrap – wrap
flex-wrap – wrap-reverse
align-content – center
Pesan item flex
Margin-kanan: auto;
Margin: auto; = terpusat sempurna
align-self pada item flex
Tentukan panjang item flex, relatif terhadap sisa item flex
Buat situs web responsif dengan flexbox

Penjelasan Flexbox Properties »

Media Queries CSS3

Ubah background-color menjadi lightgreen jika viewportnya lebar 480px atau lebih lebar
Tampilkan menu yang akan melayang di sebelah kiri halaman jika viewport berukuran 480px lebar atau lebih lebar

Penjelasan Media Query Properties »

Media Queries CSS3 – Contoh Lebih Banyak

Halaman HTML
Lebar dari 520 sampai 699px – Terapkan ikon email ke setiap tautan
Lebar dari 700 sampai 1000px – Kata pengantar link dengan teks
Lebar di atas 1001px – Terapkan alamat email ke link
Lebar di atas 1151px – Tambahkan ikon seperti yang kita gunakan sebelumnya
Gunakan daftar link email pada sidebar di halaman web
Penjelasan Media Queries CSS3 Properties »