Catatan Belajar TamaAndy: CSS Website Design – BuildwithAngga.com

/
CSS website design

Catatan:

  1. Singkatan CSS: Cascading Style Sheets,
  2. Pengertian CSS: membantu membuat website lebih menarik lagi daripada website yang hanya menggunakan html,
  3. Pembahasan Internal CSS: adalah CSS yang di tempelkan di dalam dokumen html, tepatnya di <head> </head> dan harus ada dalam syntax <style> </style>, agar lebih mudah untuk menemukan saat mencari bagian css bisa dengan menandai dengan tanda <!– Internal CSS –> <!– Internal CSS –>
    1. kalau class memakai titik .[nama class] namun untuk id memakai tagar #
    2. sehingga digunakan coding seperti ini ,
    3. dan css .fitur ini digunakan untuk styling bagian div dengan modifikasi div seperti berikut <div class=”fitur”>
    4. sehingga akan seperti ini hasilnya
  4. Pembahasan Inline CSS: adalah CSS yang ditempelkan langsung di div masing-masing codingnya seperti ini : dan penampilannya seperti ini
    1. Perbedaan dari internal dan inline css sangat terasa saat banyak div yang akan dibuat stylenya lalu ingin diubah,
    2. jika satu document html menggunakan cara inline css untuk masing-masing divnya maka untuk mengubah harus satu persatu tidak bisa masal,
    3. jika menggunakan internal css, untuk mengubah style dari class (.) yang sama akan sangat mudah, hanya sekali ganti di dalam css internalnya maka semua div yang menggunakan class terkait juga akan berubah.
  5. Pembahasan CSS Eksternal: adalah file CSS yang terpisah dengan file .html. CSS eksternal berguna untuk menamage style dari banyak halaman .html sekaligus.
    1. CSS Eksternal berupa file bukan script yang didalamnya berisi kumpulan class[.] untuk nantinya dipanggil atau digunakan oleh masing-masing file .html,
    2. buat folder “style” dan didalamnya ada file main.css,
    3. kita pindahkan internal css class sebelumnya ke dalam file main.css seperti ini ,
    4. lalu di masing-masing file htmlnya internal css kita ganti menjadi <link rel=”stylesheet” href=”styles/main.css”/> atau seperti ini ,
    5. sehingga mulai sekarang, selama menggunakan css eksternal management style untuk setiap halaman class di masing-masing .htmlnya bisa dengan mengedit class di dalam file main.css.
  6. Pembahasan “weight and height”: kita bisa menggunakan css untuk menentukan besarnya suatu elemen pada html sebagai contoh kita akan menentukan “weight dan height” untuk header seperti ini ,
    1. jika script css dari class header hanya seperti .header {    width: 500px;    height: 70px;} maka hasilnya akan seperti ini ,
    2. untuk memperjelas batasnya kita bisa tambahkan background namun tetap saja karena heightnya lebih kecil dari pada text di dalam header maka hasilnya sepert ini ,
    3. solusi, jangan gunakan height tapi justru gunakan overflow: hidden; maka hasilnya akan seperti ini ,
    4. Selanjutnya, kita mencoba membuat tampilan header penuh dari sisi kiri ke sisi kanan sehingga kita menggunakan percent % pada widthnya sehingga tampilannya seperti ini
  7. Padding and Margin; padding jarak object pada background elementnya sedangkan margin itu jarak antar element, contoh jarak antar <div>
    1. padding ada padding-left, padding-right, padding-top, padding-bottom, cara mengisinya adalah dengan memberikan angka satuan px, maka tampilannya akan seperti ini . jika padding tanpa ditambah padding-(left, right, top atau bottom) maka akan berlaku ke semua arahnya,
    2. margin juga ada margin-left, margin-right, margin-top dan margin-bottom, cara mengisinya adalah dengan memberikan angka satuan px, contoh penggunaan margin sehingga tampilannya menjadi
  8. Float adalah fungsi dari css untuk membuat 2 element menjadi sejajar saling mengisi kosongnya area sebagai contoh sepert ini :
    1. ada float: none; , float: left; , float: right;
    2. untuk mempraktekkan tentang float ini kita butuh memberikan class=”logo” dan class=”navigation” seperti ini
    3. di main.css kita tinggal mengedit layout dengan format .header .logo {    font-size: 32px;    float: left;} atau sesuai gambar ini ingat class .logo itu adalah bagian dari class .header jadi harus ditulis .header .logo begitu juga dengan .header .navigation,
    4. selanjutnya adalah dengan menambahkan fungsi css float: left; dan ini yang terjadi secara tampilannya , logo membesar karena fungsi font-size: 32px; ,
    5. selanjutnya adalah untuk navigation , sehingga tampilannya akan menjadi seperti ini ,
    6. Namun tampilannya jadi berjauhan dan berantakan, terlalu mentok, ke kiri dan terlalu mentok ke kanan. Idealnya mereka seharusnya bisa bisa lebih ke tengah, sehingga kita gunakan fungsi class container lalu kita set di main.css nya sebagai berikut sehingga tampilannya menjadi seperti ini ,
    7. Tapi tampilannya kurang ke tengah sehingga menggunakan fungsi margin: auto; sehingga tampilannya menjadi seperti ini
  9. Mensejajarkan menu navigation atau CSS navigation menjadi horizontal dari yang tadinya vertical
    1. caranya adalah dengan menambahkan script di main.css seperti ini .header .navigation li {    float: right;} , yaitu dengan menambahkan “li” karena menu navigation memang tersusun dari li yang ada di class .header .navigation, sehingga hasilnya seperti ini ,
    2. karena posisi susunannya terbalik justru login yang harusnya ada di paling kanan malah paling kiri maka float harusnya float: left; sehingga menjadi seperti ini ,
    3. karena tampilannya masih berantakan jadi harus dirapikan dengan memberikan margin-left; 20px: sehingga tampilannya menjadi seperti ini ,
    4. Kita edit juga font size dari menu navigation menjadi 18px dengan script font-size: 18px; ,
    5. tanda titik dari <ul> juga ingin kita hilangkan dengan cara script display: block; ,
    6. kita juga ingin membuat menu navigation rata atas bawahnya, di center diposisi garis merah. kita bisa pakek margin-top: 40px; tapi bukan di <li> nya tapi cukup di .navigationnya, sehingga dia sedikit turun lebih ke tengah.
    7. selanjutnya kita ganti warna navigasinya kita bisa buat script seperti ini dengan mentarget a hrefnya seperti ini ,
    8. untuk menghilangkan underlinenya kita bisa pakai text-decoration: none;
  10. Pseudo-Classes
    1. Kita akan membuat menu navigation memiliki effect hover caranya begini ,
    2. Kalau ingin efek yang telah dikunjungi bisa pakek
  11. Local fonts menggunakan google font,
    1. Karena local font kita butuh untuk pilih dan download file nya dan diletakkan di folder fonts
    2. Lalu di main.css ditambahkan kode ini
    3. Dibagian .header .logo kita tambahkan sehingga .header .logo menjadi seperti ini
  12. Font URL Google adalah solusi untuk tidak perlu upload file .tff di hosting kita sehingga akan menghemat storage dari website kita, dengan cara sebagai berikut,
    1. Pergi ke google fonts lalu pilih salah satu fonts lalu klik select this style ,
    2. Setelah itu kita copy disini terlihat kalau 2 font bisa dalam 1 script dan script ini wajib ditempatkan di <head> </head> seperti ini ,
    3. Selanjutnya kita bisa gunakan fontnya di cssnya seperti ini misal untuk .header .nav li a , finalnya setelah di utak-atik akhirnya menggunakan font ini ,
  13. Border radius, selanjutnya kita akan membuat isi content dibawah header.
    1. Kita hapus dulu semua contentnya terlebih dahulu, sehingga menjadi seperti ini
    2. Kita akan membuat ikon kelas berupa object dalam body setelah header
    3. Kita buat dulu di main.css-nya terlebih dahulu dengan script ini
    4. Lalu kita buat script html di index.htmlnya seperti berikut sehingga akan terbentuk object seperti ini
    5. sya juga menambahkan properties css untuk .parent .container seperti berikut sehingga tampilannya menjadi seperti ini ,
    6. agar tampilan object lebih menarik, ditambahkan juga border-radius agar sudut2nya bisa lebih melengkung sehingga tampilan menjadi seperti ini ,
    7. Jika ingin membuatnya bulat bisa memakai satuan % bukan pixel sehingga kita bisa memakai 50% seperti ini ,
  14. Background Image kita bisa menambahkan file gambar (images) sebagai background image, dengan menambahkan script berikut di main.css dengan hasil gambar yang tidak penuh, butuh script lain lagi,
    1. Dengan menambahakn background-size: cover; kita bisa membuat gambarnya menjadi seperti ini ,
    2. Kalau kita pengen full bisa dengan edit ukuran width dan height .icon-kelas seperti ini ,
  15. Gradient background kita akan mencoba memberi gradient pada .header,
    1. kita tambahkan height pada .header di main.css sebesar 550 px agar benar-benar keliatan gradientnya ,
    2. dan di .header .logo kita tambahkan warna ,
    3. selanjutnya di .header kita tambahkan ,
    4. kita bisa mengganti dari linear ke radial gradient ,
    5. kita bisa menentukan arah dari linear-gradient dengan menambahkan to left, to right, to top dan to bottom seperti ini
    6. kita juga bisa menggunakan hex color atau rgb pada linear-gradient seperti ini

Additional:

  • Kenapa ada jarak di bagian atas header, semacam margin, , bisa di find out dari body dengan menggunakan fungsi inspect element yang ada di browser seperti ini sehingga kita bisa override dengan cara menempatkan body {    margin: 0;} pada main.css sehingga tampilannya menjadi seperti ini

Leave a Comment