Jika kalian tidak tahu apa itu CSS sebaiknya kalian pahami terlebih dahulu disini
Pengertian CSS dan Fungsinya .karena belajar bukan hanya dari perakteknya saja tapi kalian harus tahu juga pengertianya dan apa maksud tujuan tersebut. Jika sudah paham boleh langsung kalian peraktekanya langsung diproject kalian.
Aturan Penulisan CSS
Syntax CSS dibagi dalam 3 bagian :
selector {property : value;}
- selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
- property : atribut yang akan diubah (color, font-size, dll)
- Property dan nilai dipisahkan dengan titik dua (:) dan nilai diakhiri dengan titik koma (;) Property dan nilai diapit dalam kurung {}
Contoh property dan values pada background
| Property | Values | Keterangan |
| Background-image | Url | Alamat gambar yang sudah di uploud |
| Background-repeat | Repeat | Gambar diulang dalam halaman |
| Repeat-y | Gambar diulang dalam sumbu y |
| Repeat-x | Gambar diulang dalam sumbu x |
| no-Repeat | Gambar tidak diulang hanya muncul 1 gambar |
Contoh property dan values pada font
| Property | Values | Keterangan |
| font-family | Arial; | Jenis font adalah arial |
| Font-size | small; | kecil |
| medium; | menengah |
| large; | besar |
| 12px; | besar 12 pixel (Bisa diganti 12pt) |
| Font-style | Normal; | Font normal |
| Italic; | Font miring |
| Font-weight | Normal; | Ketebalan font normal |
| Bold; | Font Tebal |
| 100-900 | Ketebalan font dengan nilai dari 100-900 |
Contoh Property Dan Value pada Text
| Property | Values | Keterangan |
| Text-decoration | none; | Menampilkan text asli |
| Underline; | Menampilkan Text bergaris bawah |
| Overline; | Menampilkan text bergaris atas |
| line-through; | Menampilkan text tercoret |
| blink; | Menampilkan text berkedip |
| Text-transform | uppercase; | Menampilkan text huruf besar |
| Text-align | left; | Text rata kiri |
| right; | Text rata kanan |
| center; | Text rata tengah |
| justify; | Text rata kanan kiri |
Contoh Selector Pada Link
| Selector | Keterangan |
| a:link | Keadaan awal link |
| a:hover | Keadaan link saat dikenai mouse |
| a:active | Keadaan link saat di klik |
| a:visited | Keadaan link setelah dikunjungi |
Contoh property dan value pada position
| Property | Values | Keterangan |
| Position | Static; | Elemen render dalam rangka, seperti yang muncul dalam aliran dokumen |
| Absolute; | Unsur diposisikan relatif terhadap posisi pertama (tidak statis) |
| Fixed; | Unsur diposisikan relatif terhadap jendela browser |
| Relative; | elemen diposisikan relatif terhadap posisi normal, sehingga "left: 20" menambahkan 20 pixel ke posisi KIRI elemen |
| Inherit; | Nilai dari properti posisi diwariskan dari elemen induk |
Contoh Property dan Value pada Border
| Property | Values | Keterangan |
| Border | 1px solid #000; | ukuran border bisa diubah dalam ukuran pixel. Border-style (contoh solid;dotted) merupakan style pada border setiap style tampilan berbeda. Border-color bisa menggunakan warna RGB juga Desimal. Property border bisa diganti dengan border-left; border-right; border-top; border-bottom; |
| 2px dotted #ff0000; |
| 3px double blue; |
| 5px groove #3300ff; |
| 5px ridge #3300ff; |
| 5px inset #3300ff; |
| 5px outset #3300ff; |
Contoh property dan value pada border-radius
| Property | Values | Keterangan |
| Border-radius | 10px; | Garis melemgkung disemua sisi dengan ukuran 10px |
| border-top-left-radius | 2em 0.5em; | Garis melengkung pada sisi atas dan kiri dengan ukuran berbeda |
| border-top-right-radius | 3em 2.5em; | Garis melengkung pada sisi atas dan kanan dengan ukuran berbeda |
| border-bottom-right-radius | 1em 2em; | Garis melengkung pada sisi bawah dan kanan dengan ukuran berbeda |
| border-bottom-left-radius | 2em 1em; | Garis melengkung pada sisi bawah dan kiri dengan ukuran berbeda |
| border-bottom-left-radius | 2em; | Garis melengkung pada sisi bawah dan kiri dengan ukuran sama |
Margin dan Padding
- Margin adalah kode yang mengatur seleksi batas jarak luar, seperti misal memberi jarak antara header blog dengan batas atas, bawah, kanan dan kiri dari kontent yang ada pada struktur header di sekitarnya.
- Padding adalah kode yang mengatur seleksi batas jarak dalam seperti memberi jarak pada header dengan batas tepi header misalnya padding:5px; jadi jarak header dengan batas tepinya 5px ke dalam.
Contoh property dan value pada margin dan padding
| Property | Values | Keterangan |
| margin | 10px 5px 0px 5px; | atas 5, kanan 5, bawah 0, kiri 10 |
| margin-top | 10px; | karak atas 10px |
| margin-right | 5px; | jarak kanan 5px |
| margin-bottom | 2em; | jarak bawah 2em |
| margin-left | 3em; | jarak kiri 3en |
| padding | 2em; | atas, kanan, kiri dan bawah 2em |
Contoh property dan value pada display
| Property | Values | Keterangan |
| DISPLAY | None; | Berfungsi untuk menghilangkan atau menyembunyikan elemen yang diberi kode tersebut |
| Block; | Berfungsi untuk memberi blok baru atau baris baru seperti kode
|
| Inline; | Berfungsi sama seperti kode span, yang memberi desain background berbeda hanya pada elemen tersebut |
| Inline-block; | jika layar tidak muat maka secara otomatis membuat baris baru. |
Source
Share this
EmoticonEmoticon