css

padding padding adalah area didalam kotak(antara border dan konten) contoh penggunaan :     diatas saya sudah mempunyai html dan css, sekarang jika kita beri padding-left: 20px; maka hasilnya sebelah kiri konten ada space 20px     begitupun pada keepat sisinya jika diberi padding maka akan membuat space antara konten padding juga dapat disingkat seperti margin - padding: 10px;       artinya diberi padding 10px pada keempat sisi  - padding: 10px 20px;      artinya diberi padding atas bawah 10px dan kiri kanan 20px - padding: 10px 20px 30px;      artinya diberi padding atas 10px, bawah 20px, kiri kanan 30px - padding: 10px 20px 30px 40px;      artinya diberi padding atas 10px, kanan 20px, bawah 30px, kiri 40px (searah jarum jam) sifat padding - padding tidak bisa menggunakan nilai negatif - padding tidak mempunyai nilai auto - padding mempengaruhi nilai dari ukuran box yang telah kita buat(ukuran bo...

 - overlapping margin     margin atas dan bawah tidak akan saling menambahkan dan margin kiri dan kanan akan saling menambahkan - negativ margin     margin bisa diberi nilai negatif( akan bergerak kearah berlawanan) - auto     margin kiri kanan bisa diberi nilai auto(akan otomatis ditengah). dengan syarat margin kiri dan margin kanan harus diberi nilai auto - shorthand     margin dapat disingkat  - margin: 10px;        artinya diberi margin 10px pada keempat sisi  - margin: 10px 20px;       artinya diberi margin atas bawah 10px dan kiri kanan 20px - margin: 10px 20px 30px;      artinya diberi margin atas 10px, bawah 20px, kiri kanan 30px - margin: 10px 20px 30px 40px;      artinya diberi margin atas 10px, kanan 20px, bawah 30px, kiri 40px (searah jarum jam)

    margin adalah bagian terluar dari element  cara pakai margin     margin mempunyai 4 properti     - margin-top      - margin-right      - margin-left      - margin-bottom contoh :     Diatas saya sudah mempunyai HTML dan CSS. jika kotak satu diberi margin-top: 40px; maka kotak satu akan turun kebawah 40px     jika kotak satu ditambahkan margin-left: 100px; maka kotak satu akan bergeser kekanan 100px       jika kotak satu ditambahkan margin-bottom: 40px; maka kotak satu akan turun kebawah 40px       jika kotak satu ditambahkan margin-left: 40px; maka dalam display tidak terjadi apa-apa padahal sebenarnya ada ruang dikanan sebesar 40px.

 konsep box model - setiap elemenent di halaman berada di dalam sebuah box  - kita bisa mengatur ukuran dan posisi kotak tersebut  - kita bisa memberi warna atau gambar sebagai background kotak tersebut

    overflow memiliki 4 value visible auto hidden scroll     kita akan mengatasi konten yang melebihi pembungkusnya seperti diatas dengan menggunakan overflow visible     visible akan menampilkan konten yang melebihi pembungkusnya, visible merupakan default browser, jadi jika kita menggunakan visible hasilnya akan sama saja auto     auto akan otomatis menambahkan scroll jika kontennya tidak cukup hidden     hidden akan menyembunyikan konten yang melebihi pembungkusnya scroll     scroll akan menambah kan scroll, bahkan jika kontent tidak melebihi pembungkusnya

      Dimensi memiliki 2 property, yaitu widht(lebar) dan height(tinggi). Contoh      diatas saya sudah membuat div dengan tulisan hello world dengan backgroud biru muda, sekarang kita coba atur lebar dan tingginya     karena div default displaynya block maka div bisa di atur lebar dan tingginya seperti diatas. kita bisa menggatur lebar dan tinggi dengan px(seperti diatas), %, in, dll. jika kita hanya mengatur lebarnya maka tingginya akan mengikuti isinya dan jika kita hanya mengatur tingginya maka lebarnya akan mengikuti element pembungkusnya.      jika mengatur lebar lebih besar dari pembukusnya maka lebar element tersebut akan keluar dari pembbungkusnya dan jika jumlah isi lebih banyak dari pembungkusnya maka isi element tersebut akan melebihi pembungkusnya seperti dibawah :       kasus seperti diatas kita bisa mengatasinya dengan overflow yang akan dibahas di blog selanjutnya

      Setiap tag pada html berada didalam sebuah kotak. Property display pada CSS mengatur prilaku dari kotak tersebut.  Setiap tag pada HTML memiliki nilai default untuk property display. Tetapi kita juga dapat mengubah prilaku dari tag tersebut dengan mengganti value-nya. Display memiliki 4 value, yaitu : inline inline-block block none inline  Elemen HTML yang secara default tidak menambahkan garis baru ketika dibuat Lebar dan tingginya sebesar konten yang ada didalamnya Kita tidak dapat mengatur tinggi dan lebar dari element inline margin dan padding hanya memengaruhi element secara horizontal tidak vertikal  contoh tampilan inline inline-block Tidak ada element yang secara default memiliki property display: inline block; Kita harus ubah secara manual property tersebut Prilaku dasarnya sama dengan element inline  Perbedaannya, element inline-block dapat kita atur lebar dan tingginya contoh tampilan inline-block block Element HTML secara default mena...

      Tag pada HTML digunakan untuk memberikan magsud/arti pada sebuah konten. misalnya p untuk paragraf, h1 untuk heading utama, dll.     Tag <div> dan <span> tidak memiliki arti apapun, keduanya digunakan untuk mengelompokan tag-tag HTML dan dan memberikan informasi terhadap tag-tag tersebut. contoh  :     saya mempunyai website sederhana seperti diatas. sekarang kita kelompokan tag-tag yang kita miliki dengan div class     jika tiap class diberi warna background maka hasilnya      warna background berubah perkelompok jika hanya menggunakan tag warna background berubah hanya pada tag tersebut.     untuk span biasanya digunakan untuk memberi tanda pada text untuk diberi warna background berbeda atau diberi font-style berbeda dll. contohnya : div memiliki defaut display block, sedangkan span memiliki default display inline. penjelasan tentang display akan dibahas pada blog selanjutnya.

      CSS layouting adalah teknik CSS untuk mengantur dan meletakan/memposisikan element HTML yang telah kita buat menggunakan sytanks CSS, jadi kita bisa mengatur ukuran, posisi atau prilaku dari element-element HTML tersebut. CSS layouting dapat membuat website kita jadi lebih bagus dan menarik untuk diliat. Dalam CSS layouting kita akan mempelajari Display Dimensi Overflow Box model Float Position

      Selector digunakan pada CSS untuk mengenali sebuah element HTML yang akan diberi style.  Untuk selector kita bisa menggunakan element HTML, id, class atau complex selector. Contoh penggunaan :          D iatas saya sudah mempunyai h1, ol, ul, h2  dan 2 buah paragraf. Sekarang kita coba membuat seluruh tulisan menjadi arial. Caranya kita berikan selector body lalu berikan font-family: arial; . selector body artinya satu halaman html :     kita coba ubah warna h1 menjadi hijau, caranya kita gunakan selector h1 :     jika kita ingin merubah h2 menjadi hijau kita bisa menggunakan selector h2 lalu tulis color: green; atau kita juga bisa menggunakan separator koma lalu tulis selectornya. koma bisa diartikan sebagai dan. contohnya :     jika kita ingin merubah h2 menjadi miring kita gunakan selector h2 beri property font-style: italic; contohnya:     Sekarang kita ingin merubah ol menjadi warna oren...

Specificity      Apa itu Spesifisitas? Jika ada dua atau lebih aturan CSS yang mengarah ke elemen yang sama, pemilih dengan nilai spesifisitas tertinggi akan "menang", dan deklarasi gayanya akan diterapkan ke elemen HTML tersebut. Pikirkan kekhususan sebagai skor/peringkat yang menentukan deklarasi gaya mana yang pada akhirnya diterapkan pada suatu elemen. coming soon

      inheritance artinya pewarisan. beberapa element mewarisi beberapa nilai dari property yang dimiliki oleh element parent-nya misalnya ada orangtua yang mempunyai mata biru kecenderungannya anaknya mewarisi warna mata yang sama.     element yang diwariskan adalah contoh :     kita mempunyai halaman seperti diatas. jika kita merubah font dan warnanya      maka a nya tidak ikut berubah, agar a tersebut berubah mengikuti parentnya kita perlu menggunakan inheritance     dengan menuliskan color: inherit; maka element tersebut akan mewarisi parentnya. dari kasus datas sebenarnya kita juga bisa mengganti warna a menjadi hijau. tapi jika kita merubah warna keseluruhannya, a tersebut akan tetap menjadi warna hijau. jika kita menggunakan inherit maka warna a tersebut ikut berubah   

Pseudo          - :link {default} - :hover {ditunjuk} - :active {di klik} - :visited {pernah dikunjungi} - :first-child {elemen pembungkus} - :last-child {elemen pembungkus} - :nth-hild(*) {urutan no,2n,3n-2,even(ganjil),odd(genap)} - first-of-type {elemen ppertama} - last-of-type {terakhir}

background-color     Digunakan untuk merubah warna background. B isa menggunakan nama warna(dalam bahasa inggris), menggunakan hexadesimal atau menggunakan rgb. background-image     Digunakan untuk menambahkan gambar. cara menggunakannya dengan menuliskan bakground-image: url(); masukan nama background tuliskan formatnya dan folder background jika berbeda folder background-repeat     Digunakan untuk  mengulang gambar atau tidak :      - background-repeat: repeat; (default)     - background-repeat: repeat-x; (diulang terhadap sumbu x)      - background-repeat: repeat-y;    (diulang terhadap sumbu y)     - background-repeat: no-repeat; (background tidak diulang) background-position     Digunakan untuk mengatur posisi background dengan property:     -  top <left,center,right>     -  center <left,center,right>     -  botto...

color     Digunakan untuk mengganti warna text. bisa menggunakan nama warna(dalam bahasa inggris), menggunakan hexadesimal atau menggunakan rgb  contoh text-align     Digunakan untuk membuat posisi text :     - left (rata kiri)     - right (rata kanan)     - center (rata tengah)     - justify (rata kiri kanan) contoh text-indent     Digunakan untuk membuat jedda pada awal paragraf menggunakan format px contoh text-decoration     Digunakan untuk membuat garis :     -  underline (dibawah text)     -  overline (diatas text)     -  line-through (ditengah text)     biasanya diisi none untuk menghilangkan garis bawah pada link       contoh  text-transform      Digunakan untuk membuat text :      -  none     -  lowercase (kecil semua)      - uppercase (besar semua/kap...