CSS Background

Pengertian Background

Background adalah salah satu komponen desain yang merupakan salah satu komponen desain yang cukup penting guna memberi dekorasi visual terhadap sebuah elemen yang akan mengakibatkan peningkatan suatu konten.

Pada bagian ini kita akan membahas tentang penggunaan background image, background repeat, teknik sprite.

Contoh disini akan ada html namun hanya backgroundnya diganti

Apabila menginginkan background gambar maka perintahnya berikut

Dan hasilnya akan seperti ini

Apabila hanya mengingkan warna polosan maka perintahnya berikut:

Tampilan nya akan seperti ini

Sebenarnya masih bisa banyak lagi namun cukup sekian dari saya.

CSS Placement

Apa itu CSS Placement?
Placement artinya penempatan. Placement di Css digunakan untuk mengatur posisi sebuah elemen html. Biasanya kita dalam membuat website menginginkan penempatannya bisa diatur. Di property ini lah kita bisa menggunakannya.
Adapun beberapa property css yang digunakan untuk menentukan posisi sebuah elemen yaitu:
1. Static
Property ini merupakan property default semua elemen. Dengan ini elemen akan menempatkan posisi mengikuti alur halaman.
2. Relative
Property ini hampir sama dengan static namun jika kita tambahkan value akan tetap berfungsi. Di static tidak berfungsi. Property relative bergantung dengan elemen yang ada diatasnya. Namanya aja relative pasti akan tidak berkepastian.
3. Absolute
Property ini jika digunakan maka elemen akan tertimpa dengan elemen yang lain.

Untuk pemahaman yang Absolute penulis beri contoh

Hasilnya akan tertindih seperti diatas. Yang lain tidak saya beri contoh karena saya rasa cukup mudah dan hampir sama.


Meski merasa lelah janganlah anda menyerah
@enjie_press~

CSS Font Styling

Font merupakan desain untuk serangkaian karakter. Font adalah kombinasi dari jenis huruf dan kualitas lainnya. Misalnya, Times New Roman adalah jenis huruf yang menentukan bentuk setiap karakter. 

Di CSS dalam pengeditan font juga banyak variannya 

1. Font, berfungsi  menentukan metode untuk mengatur font pada suatu elemen. Tanda koma diberikan untuk mengatur font. Contoh {font: 12pt, arial}

2. Font-style, berfungsi menentukan model file yang akan digunakan ditampilkan dalam browser. font style yang sering digunakan normal, italic, dan oblique. Untuk italic dan oblique sebenarnya hampir sama hanya saja  oblique tidak terlalu miring.

3. Font-variant, berfungsi untuk menentukan apakah teks ditampilkan dalam small-capital atau tidak. Nilai yang dapat diberikan adalah normal dan small-caps

4. Font-synthesis, berfungsi untuk menyatukan dua atau lebih elemen yang ada untuk menghasilkan hasil baru.

5. Font-weight, berfungsi untuk memberikan efek ketebalan atau biasa dikenal dengan bold. 

6. Font-size, berfungsi untuk menentukan ukuran font dalam suatu elemen. 

7. Font-kerning, berfungsi untuk mengatur spasi karakter agar lebih seragam dan menarik untuk dibaca.

8. Font-family, berfungsi untuk menentukan jenis font pada suatu elemen.

9. Font-variant-caps, berfungsi untuk membuat suatu text menjadi huruf kapital semua tapi ukurannya tidak sebesar kapital biasanya.

10. Font-variant-position, berfungsi untuk menentukan apakah teks ditampilkan dalam small-capital atau tidak.

11. Font-variant-numeric, berfungsi untuk mengubah dalam wujud angka atau sistem angka

12. Font-size-adjust, berfungsi untuk menyesuaikan ukuran teks 

13. Font-variant-alternates, berfungsi untuk mengontrol penggunaan mesin terbang alternatif.

14. Font-variant-ligatures, berfungsi untuk mengatur property yang ligatures dan bentuk kontekstual elemen yang berlaku.

15. Font- feature- settings, berfungsi untuk mengontrol properrty css fitur canggih tipografi dalam font opentype.

Sebenarnya masih banyak lagi yang lainnya namun penulis hanya bisa menjabarkan itu saja. semoga bermanfaat

Jangan mengenal kata lelah dalam menuntul ilmu

@enjie_press~

BOX MODEL CSS

Margin
Property ini digunakan untuk memberikan jarak antar elemen html. misalnya jarak antar <div> dan tag-tag lainnya.
Supaya lebih memahami langsung ke contoh:

Lalu tambahkan tag style dalam tag head, dan ketikan kode css berikut:

Maka akan muncul tampilan seperti dibawah ini:

Jarak antar box agak berjauhan karena kita memberi margin-bottom sebesar 50 px. Namun bagaimana cara text yang ada dalam box berposisi di tengah? Dengan Padding kita bisa mengatur nya. Padding adalah sebuah elemen yang digunakan untuk mengatur atau memberikan jarak antara konten elemen dengan elemen trsebut. 

Pada koding anda sebelumnya tinggal diberi tambahan padding 

Dan hasilnya akan seperti ini

Setelah diberi padding maka ada perbedaan text dalam box gambar ke 1 dan kedua. Dan ukuran box yang  telah diberi padding juga akan berubah karena telah ketambahan besar padding nya. Misal anda membuat box dengan size 100 px dan anda beri padding sebesar 30 px maka besar box akan menjadi 130 px. 

Malaslah pada waktunya, dan Rajinlah pada waktunya

@enjie_press~

Anatomy CSS

Css memiliki aturan tersendiri dalam penulisan sintaks. Penulisan sintaks terbagi menjadi 3 bagian yaitu:

1. Selector: bagian html yang digunakan untuk mengatur style. Nama-nama yang diberikan untuk style-style yang berbeda baik style internal maupun external. Berupa kelas dan ID. 

2. Property: aturan dalam css yang mengubah selector yang dipilih. Property yang mempunyai nilai disebut value.  Property ditandai dengan tanda { }.

3. Value: merupakan nilai yang ingin kita berikan pada property.

Format penulisan bagian-bagian dari Css dapat dituliskan
Selector{property : value; }
Contoh:
H1{colour : blue; }
↕️   ↕️       ↕️
Selector.      Value
      Property

Jika sesuatu dianggap penting maka tiada alasan yang bisa menghalanginya
@enjie_press~

Pengenalan CSS

Pengertian Css
Css adalah singkatan dari Cascading Style Sheet. Biasa digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa mark up. Css digunakan untuk mengontrol format tampilan sebuah halaman web yang dituliskan dengan menggunakan penanda (markah). Css juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style dengan menggunakan metode pembawaan yang berbeda beda pula.

Tujuan Css
Css dikembangkan untuk membedakan antara konten dengan style/tampilan konten. Dengan adanya css maka design konten akan mudah dibedakan. Maka dari itu, waktu pembuatan konten dapat diminimalisir dan dapat dengan mudah melakukan pengulangan style yang sama pada konten tertentu.

Fungsi Css
Css digunakan untuk mendesain, merancang, merubah dan membentuk halaman web lebih menarik dan sederhana sesuai fungsinya.

Cara Kerja Css
Pembuatan Css ini sebenarnya mudah caranya. Ketika anda membuat halaman html tinggal klik new page dengan ekstensi .css dan pada htmlnya di beri link menuju halaman cssnya. Pada css kita dapat merubah style sesuai yang diinginkan.