Website penuh inspirasi tentang Teknologi, Komputer, Pemrograman, Games, Informasi Umum dan pengetahuan lainnya. Dibuat berdasarkan pengalaman dan ilmu yang didapat. sebagai sharing dan berbagi ilmu untuk kemajuan bangsa INDONESIA TERCINTA

Ingin pasang iklan di banner ini ? harga promo hanya 50.000/Bulan. Hubungi kami di kontak

Kamus bahasa pemrograman dasar CSS lengkap dan mudah

https://miro.medium.com/max/600/1*OFsc0SD55jhi8cjo7aCA4w.jpeg

Hai sobat inspirasi.. artikel ini melanjutkan dari tema belajar bahasa pemrograman dasar HTML dan CSS, namun di artikel ini akan membahas detail tentang penjelasan bahasa pemrograman CSS atau belajar CSS dan contoh kamus, sintak script, kodingan CSS.. baik langsung saja..

Apa itu CSS ?
CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan bahasa pemrogramanb(markup laguage). Biasanya CSS digunakan untuk mendesain sebuah halaman HTML
CSS dibuat untuk memisahkan konten utama dengan tampilan dokumen yang meliputi layout, warna dan font. Pemisahan ini dapat meningkatkann daya akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi dari sebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari pengkodingan.



1. Selector CSS

Sebelum Anda mengenal properti CSS, Anda juga perlu memahami Selector dan deklarator pada CSS. Apa itu Selector?. Selector merupakan sebuah cara untuk menghubungkan kode CSS dengan Element HTML yang ingin diberi Style.
Selektor pada CSS biasanya diambil dari nama Element pada Tag Html. Sebagai contoh, jika anda menulis Tag <p> pada dokumen Html, nama Element pada Tag tersebut adalah 'P'. Jadi, Nama Element 'P' tersebut bisa Anda jadikan sebuah Selector.
Sedangkan Deklarator pada CSS merupakan perintah untuk web browser yang akan membuat tampilan pada selector sesuai dengan perintah yang terdapat pada deklarator. deklarator terdiri dari Property dan Value


2. Property CSS dan Nilainya

Property CSS merupakan sifat yang bisa Anda terapkan pada Selector, misalnya Anda ingin memberi warna text, warna background, dan lain sebagainya. Jika terdapat Properti pada penulisan kode CSS, properti tersebut pasti juga memiliki sebuah nilai atau value.
Untuk memberi value pada property CSS, gunakan tanda titik dua ( : ) setelah penulisan property, dan diakhiri dengan titik koma ( ; ). Bagaimana cara memilih property CSS yang ingin digunakan?.
Untuk memilih property CSS yang ingin digunakan, sebenarnya cukup mudah. Karena property CSS mirip bahasa kita sehari-hari yang ditulis dengan bahasa inggris. Misalnya jika ingin memberi warna text, Anda bisa menggunakan property 'color'.


3. All Background Properties

All Background Properties atau sekumpulan properti CSS yang secara khusus digunakan untuk mengatur dan menentukan efek Latar Belakang pada elemen HTML, Latar Belakang yang ingin diatur bisa berupa gambar, warna, dsb.
Misalkan Anda ingin membuat latar belakang dari suatu elemen menjadi berwarna biru, maka Anda bisa menggunakan properti background-color untuk membuatnya menjadi biru. berikut beberapa properti CSS untuk mengatur background.
Daftar Tabel untuk All Background Properties
NoPropertiDeskripsi
1 background-colormemberi warna pada latar belakang
2background-imagememberi gambar pada latar belakang dari suatu element
3background-repeatmemberi perintah pada gambar yang ada di latar belakang untuk perulangan.
4background-positionmengatur posisi gambar pada latar belakang
5background-attachmentmengatur suatu gambar apakah jika mouse di scroll gambar ikut scroll atau tetap
6background-sizemenentukan ukuran gambar pada latar belakang
7background-clipmenentukan area lukisan pada latar belakang
8background-originmenentukan dimana sebuah gambar diposisikan
9backgroundmengatur latar belakang pada element secara luas


4. All Border Properties

All Border Properties atau sekumpulan properti css yang digunakan untuk mengatur dan membuat garis tepi pada Elemen html dengan berbagai variasi.
Anda bisa membuat garis tepi sesuai yang diinginkan. Misalnya Anda hanya ingin membuat garis tepi di-sebelah kanan, maka bisa menggunakan properti border-right.
Bahkan dengan properti border-color misalnya, Anda bisa memberi sentuhan warna pada garis tepi sesuai yang diinginkan. Berikut beberapa properti tersebut.
Daftar Tabel untuk All Border Properties
NoPropertiDeskripsi
1borderMengatur/membuat Garis tepi secara keseluruhan
2border-widthmengatur lebar dari garis tepi secara keseluruhan
3border-top-widthmengatur lebar garis atas
4border-right-widthmengatur lebar garis kanan
5border-bottom-width   mengatur lebar garis bawah
6border-left-widthmengatur lebar garis kiri
7border-colormengatur warna dari garis
8border-stylemengatur style dari garis
9border-topmembuat garis atas
10border-rightmembuat garis kanan
11border-bottommembuat garis bawah
12border-leftmembuat garis kiri
13border-radiusmembuat sudut bulat/radius pada garis


5. All Font Properties

All Font Properties berisi beberapa properti CSS yang secara khusus bisa Anda gunakan untuk menentukan jenis font, ukuran font, maupun gaya text yang nantinya akan ditampilkan di halaman web.
Coba bayangkan jika misalkan kita sedang membaca sebuah artikel web, kemudian artikel tersebut menggunakan jenis tulisan yang aneh dan susah untuk dibaca. Saya yakin, lama kelamaan kita akan pusing untuk membaca artikel tersebut.
Untuk itulah font properties ini disediakan oleh CSS untuk mengatur, agar tulisan yang akan ditampilkan bisa lebih mudah untuk dibaca. Berikut beberapa properti tersebut.
Daftar Tabel untuk All Font Properties
NoPropertiDeskripsi
1fontMengatur semua font Properties dalam satu deklarasi
2 font-weight      mengatur ketebalan dari text
3font-sizemengatur ukuran font sesuai yang diinginkan
4font-familymengatur jenis font yang ingin dipakai
5font-stylemengatur style font yang akan digunakan pada text
6font-variantmengatur font apakah menjadi huruf kecil atau tidak

6. All Margin Properties

Properti margin pada CSS digunakan untuk membuat ruang kosong atau jarak di sekitar box(elemen bagian luar) sesuai dengan yang diinginkan. Anda juga bisa mengatur margin pada sisi atas, kanan, bawah, kiri secara terpisah.
Daftar Tabel untuk All Margin Properties
NoPropertiDeskripsi
1margin-topmengatur jarak antar element bagian atas
2margin-rightmengatur jarak antar element bagian kanan
3margin-bottom    mengatur jarak antar element bagian bawah
4margin-leftmengatur jarak antar element bagian kiri
5marginmengatur jarak antar element secara keseluruhan



7. All Padding Properties

Properti padding pada CSS digunakan untuk menghasilkan ruang kosong di sekitar konten elemen bagian dalam atau di dalam batas yang ditentukan. Anda memiliki kontrol penuh untuk mengatur padding pada setiap sisi elemen (atas, kanan, bawah, dan kiri).
Daftar Tabel untuk All Padding Properties
NoPropertiDeskripsi
1padding-topmengatur ruang pada element dengan konten bagian atas
2padding-rightmengatur ruang pada element dengan konten bagian kanan
3padding-bottom    mengatur ruang pada element dengan konten bagian bawah
4padding-leftmengatur ruang pada element dengan konten bagian kiri
5paddingmengatur ruang pada element dengan konten secara keseluruhan

8. Properti Lebar & Tinggi

Merupakan properti yang bisa Anda gunakan untuk mengatur tinggi dan lebar suatu elemen. Tinggi dan lebar bisa Anda atur secara otomatis atau Anda bisa menentukan tinggi dan lebar dalam bentuk nilai seperti ukuran pixel, cm, em, persen, dsb. Berikut properti tersebut :
Daftar Tabel untuk Properti Lebar & Tinggi
NoPropertiDeskripsi
1widthMengatur lebar pada elemen
2heightMengatur tinggi pada elemen
3max-width     mengatur lebar pada elemen secara maksimum
4max-heightmengatur tinggi pada elemen secara maksimum
5min-widthmengatur lebar pada elemen secara minimum
6min-heightmengatur tinggi pada elemen secara minimum


9. All Text Properties

Properti teks merupakan properti yang bisa anda gunakan untuk mengatur atau memformat tulisan sesuai yang diinginkan. Anda bisa mengkombinasikan antara tampilan layout dengan text yang telah diformat untuk mendapatkan tampilan yang elegant. Berikut properti tersebut :
Daftar Tabel untuk All Text Properties
NoPropertiDeskripsi
1colormemberi warna pada text
2directionMenentukan arah penulisan Text
3letter-spacing   mengatur jarak spasi antar karakter/huruf
4line-heightmengatur jarak line/garis
5text-alignmengatur posisi dari text. misalnya center,left,right
6text-decorationmenentukan dekorasi yang akan ditambahkan ke Teks
7text-indentmenentukan margin/lekukan dari baris pertama dalam blok teks
8text-overflowuntuk menyembunyikan, menampilkan atau membuat scroll pada content atau gambar
9text-shadowmemberikan efek bayangan pada teks/kata
10text-transform mengontrol kapitalisasi dari teks
11unicode-bidimengontrol dan mengarahkan pada tulisan unicode
12vertical-alignmengatur perataan vertical pada element. misalnya middle,bottom
13white-spacemengatur keseluruhan spasi pada elemen(ruang putih)
14word-spacingmengatur jarak spasi antar kata/text

10. All Table Properties

All Table Properties atau sekumpulan properti css yang lebih sering digunakan untuk mengatur tampilan dari elemen tabel(<table>) pada html.
Secara default, tampilan awal dari elemen tabel sebelum diberi style akan biasa saja, hanya terlihat teks biasa dan tampak menyatu dengan elemen lainnya seperti paragraf, dsb.
Nah, dengan adanya beberapa properti kusus untuk tabel, Anda bisa membuat tampilan dari tabel menjadi lebih hidup, sehingga pembaca/user bisa memahami dan membedakan bahwa yang sedang dibaca adalah sebuah tabel dan bukan elemen lain seerti paragraf, dsb.
Daftar Tabel untuk All Table Properties
NoPropertiDeskripsi
1borderMembuat dan mengatur garis tepi secara keseluruhan
2border-collapse    Mengatur pembatas sel pada tabel apakah akan diciutkan atau tidak.
3border-spacingmenentukan jarak pembatas antar sel pada tabel
4caption-sidemengatur dan menentukan penempatan dari elemen caption pada tabel
5empty-cellsuntuk mengatur pembatas dan latar belakang pada sel yang kosong
6table-layoutmenentukan tata letak/layout untuk tabel
dari ke-6 properti diatas, sebenarnya ke-6 properti tersebut hanya properti dasar saja. Untuk lebih lengkapnya, Anda bisa mengkombinasikan atau menambahkan properti lain misal dengan tambahan properti color, background, padding, dsb, sehingga tampilan tabel diharapkan akan lebih berwarna.

11. All List Properties

All List Properties atau beberapa properti css yang digunakan untuk mengatur tampilan list yang dibuat. Terdapat 4 properti css antara lain: list-style-type, list-style-position, list-style-image, dan list-style.
Daftar Tabel untuk All List Properties
NoPropertiDeskripsi
1list-style-typemenentukan type/jenis penanda yang akan digunakan untuk daftar item.
2list-style-positionmenentukan posisi dari penanda pada daftar item.
3list-style-imagemenentukan dan merubah penanda pada daftar item dengan gambar/icon.
4list-stylemengatur secara keseluruhan untuk type/jenis, gambar/icon, dan posisi dari penanda pada daftar item.
Tampilan awal dari list yang dibuat dengan elemen atau tag html, secara default akan memiliki penanda(bullet) disetiap daftar item yang dibuat. Nah, penanda tersebut bisa Anda rubah, misal diganti dengan icon/image, huruf, angka, dihilangkan, dan lain sebagainya.
Anda juga bisa mengatur posisi dari penanda pada daftar item yang dibuat, apakah akan diposisikan berada didalam elemen atau diluar elemen (inside & outside).
Dari pengertian Kamus bahasa pemrogram dasar CSS atau belajar CSS diatas sobat bisa menerapkannya dengan membuat halaman web sederhana untuk pembelajaran praktek nya,  sobat bisa kunjungi artikel dibawah ini.
Baca juga : Tutorial Belajar HTML Langsng Bisa | Beserta contoh koding nya
Baca juga :  Membuat halaman web sederhana dengan HTML dan CSS lengkap dan mudah
Baca juga : Kamus bahasa pemrograman dasar tag-tag HTML

Mungkin itu saja artikel Kamus bahasa pemrogram dasar CSS lengkap dan mudah.
Baca juga : Tips belajar bahasa pemrograman dasar HTML CSS
dan info pelatihan GRATIS : Pelatihan pemrograman HTML, CSS, PHP dan MYSQL GRATIS di Bootcamp DumbWays
Terimakasih telah berkunjung di bintanginspirasi.com Share jika bermanfaat.

0 Response to "Kamus bahasa pemrograman dasar CSS lengkap dan mudah"

Post a Comment

Jangan Lupa tinggalkan komentar anda jika postingan ini bermanfaat :)

Bintang Inspirasi. Powered by Blogger.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel