Tagged: css

0

Membuat Border Text CSS

Contoh Membuat Border Text CSS <!DOCTYPE html> <html> <head> <style> p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; } p.three { border-style: dotted; border-width: 2px; } p.four { border-style:...

Background CSS 1

Background CSS

Properti latar belakang CSS digunakan untuk menentukan efek latar belakang pada elemen. Property Background CSS: background-color background-image background-repeat background-attachment background-position Warna latar belakang Properti warna latar belakang menentukan warna latar belakang elemen. Warna latar...

0

Contoh Advanced Background CSS

Contoh Advanced Background CSS <!DOCTYPE html> <html> <head> <style> body { margin-left: 200px; background: #5d9ab2 url(https://www.infokoding.com/wp-content/uploads/2017/10/img_tree.png) no-repeat top left; } .center_div { border: 1px solid gray; margin-left: auto; margin-right: auto; width: 90%; background-color: #d0f0f6;...

0

Background Properties Dalam Satu Deklarasi

Contoh Background Properties Dalam Satu Deklarasi <!DOCTYPE html> <html> <head> <style> body { background: #ffffff url(https://www.infokoding.com/wp-content/uploads/2017/10/img_tree.png) no-repeat right top; margin-right: 200px; } </style> </head> <body> <h1>Hello World!</h1> <p>Sekarang gambar latar belakang hanya ditampilkan satu...

1

Fixed Background Image CSS

Contoh Membuat fixed background image (image background tetap) <!DOCTYPE html> <html> <head> <style> body { background-image: url(https://www.infokoding.com/wp-content/uploads/2017/10/img_tree.png); background-repeat: no-repeat; background-position: right top; margin-right: 200px; background-attachment: fixed; } </style> </head> <body> <h1>Hello World!</h1> <p>Gambar latar...

1

Memposisikan Gambar Backgorund Pada Website

Contoh Cara Memposisikan Gambar Backgorund Website <!DOCTYPE html> <html> <head> <style> body { background-image: url(https://www.infokoding.com/wp-content/uploads/2017/10/img_tree.png); background-repeat: no-repeat; background-position: right top; margin-right: 200px; } </style> </head> <body> <h1>Hello World!</h1> <p>background no-repeat, contoh set posisi.</p> <p>Sekarang...

1

Repeat Background Image Horizontal

Contoh Cara mengulang gambar background secara horizontal <!DOCTYPE html> <html> <head> <style> body { background-image: url(https://www.infokoding.com/wp-content/uploads/2017/10/gradient_bg.png); background-repeat: repeat-x; } </style> </head> <body> <h1>Hello World!</h1> <p>Di sini, gambar latar belakang diulang secara horizontal!</p> </body> </html>...

1

Syntax dan Selector CSS

Sintaks CSS Aturan CSS terdiri dari pemilih dan blok deklarasi: Pemilih menunjuk ke elemen HTML yang ingin Anda gaya. Blok deklarasi berisi satu atau lebih deklarasi yang dipisahkan oleh titik koma. Setiap deklarasi mencakup...

Menetapkan Gambar Sebagai Background Halaman Website 1

Menetapkan Gambar Sebagai Background Halaman Website

Contoh Menetapkan Gambar Sebagai Background Halaman Website <!DOCTYPE html> <html> <head> <style> body { background-image: url(https://www.infokoding.com/wp-content/uploads/2017/10/bg-color.jpg); } </style> </head> <body> <h1>Hello World!</h1> <p>Halaman ini memiliki gambar sebagai latar belakang!</p> </body> </html> Coba Layout Editor...

1

Mengatur Warna Background Dari Berbagai Elemen CSS

Contoh Mengatur Warna Background Dari Berbagai Elemen CSS <!DOCTYPE html> <html> <head> <style> h1 { background-color: green; } div { background-color: lightblue; } p { background-color: yellow; } </style> </head> <body> <h1>Contoh latar belakang...

1

Mengatur Warna Background Website

Contoh Mengatur Warna Background Website <!DOCTYPE html> <html> <head> <style> body { background-color: lightblue; } </style> </head> <body> <h1>Hello World!</h1> <p>Halaman ini memiliki warna latar belakang yang terang!</p> </body> </html> Coba Layout Editor »

1

Grup Selector CSS

Contoh Grup Selector CSS <!DOCTYPE html> <html> <head> <style> h1, h2, p { text-align: center; color: red; } </style> </head> <body> <h1>Hello World!</h1> <h2>Judul yang lebih kecil!</h2> <p>Ini adalah paragraf!</p> </body> </html> Coba Layout...

1

Class Selector CSS Hanya Untuk Element

Contoh Class Selector CSS Hanya Untuk Element <p> <!DOCTYPE html> <html> <head> <style> p.center { text-align: center; color: red; } </style> </head> <body> <h1 class=”center”>Judul ini tidak akan terpengaruh</h1> <p class=”center”>Paragraf ini akan berwarna...

1

Class Selector CSS

Contoh Class Selector CSS Untuk Semua Element <!DOCTYPE html> <html> <head> <style> .center { text-align: center; color: red; } </style> </head> <body> <h1 class=”center”>Merah center-aligned heading</h1> <p class=”center”>Merah and center-aligned paragraf.</p> </body> </html> Coba...