Perbaikan CSS di HTML

pada tanggal

Kalau HTML merupakan markup language sedangkan CSS merupakan style language. CSS merupakan kependekan dari cascading style sheet yang digunakan agar struktur yang telah dibuat oleh HTML lebih nyaman dilihat oleh pelanggan. Dalam melakukan perbaikan dari tampilan HTML ada 2 jenis pendekatan yaitu responsive design dan adaptive design. Pendekatan tersebut tentu memiliki kelebihan dan kekurangannya masing-masing. Pada responsive design kekurangan yang paling terlihat adalah waktu memuat design tersebut yang lebih lama atau tidak efisien, sedangkan adaprive design memiliki kekurangan yaitu kemungkinan adanya konten yang rusak. Nah, dari berbagai selector tersebut dimungkinkan adanya kombinasi:

  1. Adjacent Sibling Selector (+)
    • Menggabungkan elemen, misalnya h1 + p {}
  2. General Sibling Selector (~)
    • Mengurutkan elemen, misalnya h1 ~ p {} , artinya elemen p diterapkan setelah h1 dilewati
  3. Child Selector (>)
    • Elemen di dalam elemen, misalnya div > p {} , artinya hanya elemen p yang berada di dalam elemen div
  4. Descendant Selector(spasi)
    • Elemen di dalam elemen namun lebih luas, misalnya div p {}, artinya elemen p yang berada di dalam div baik itu dibungkus elemen lain
  5. Pseudo Selector
    • Pseudo-class
      • Menerapkan styling jika elemen di arahkan kursor atau di klik kursor atau sebelum di klik kursor, misalnya a : visited {} atau a : hover {}, setelah elemen a di klik maka akan diterapkan styling atau ketika kursor diarahkan ke elemen a maka akan diterapkan styling
    • Pseudo-element
      • Menerapkan styling pada awal dan/atau akhir elemen, misalnya p::before {content: '"'}, pada elemen p di awalnya akan diterpkan styling " (tanda petik dua).

Konsep dalam styling sedikitnya ada 3, yaitu inheritance (elemen utama yang di styling maka elemen yang ada di dalamnya akan mengikuti), grouping selector (pilihan yang akan memilih semua selama sama), dan rule order (selector dan description). Selector basic ada 5 jenis, yaitu type selector (menggunakan elemen), class selector (menggunakan nama class (.)), id selector (menggunakan nama id (#)), attribute selector (menggunakan attribute misalnya a[href]), dan universal selector (seluruh elemen (*)). 

Yang paling esensial dari CSS adalah memahami box model, perhatikan gambar di bawah:

sumber: anonim

Setiap konten akan dibungkus oleh 3 lapis, yaitu padding-(top, right, bottom, left), border- (style, width, color), dan margin-(top, right, bottom, left). Sekarang akan coba diperbaiki file HTML yang sebelumnya sudah dibuat, ikuti langkah di bawah:

  1. Buat tag <style></style> di atas tag body pada file HTML
  2. Gunakan selector all (*) untuk membuat semua dokumen berada dalam box, perhatikan syntax:
    • <style>
    • *{
    •        box-sizing: border-box;
    • }
    • </style>
  3. Khusus di body gunakan font family, perhatikan syntax:
    • <style>
    • *{
    •        box-sizing: border-box;
    • }
    • body{
    •        font-family: Arial, Helvetica, sans-serif;
    • }
    • </style>
  4. Pada bagian header lakukan pengaturan untuk warna latar belakang, padding, perataan teks, ukuran font, dan warna huruf, perhatikan syntax:
    • <style>
    • *{
    •        box-sizing: border-box;
    • }
    • body{
    •        font-family: Arial, Helvetica, sans-serif;
    • }
    • header{
    •        background-color: #666;
    •        padding: 30px;
    •        text-align: center;
    •        font-size: 35px;
    •        color: white;
    • }
    • </style>
  5. Pada bagian section lakukan pengaturan untuk tampilannya menggunakan flex agar bisa otomatis turun boxnya jika terjadi layar yang berkurang, perhatikan syntax:
    • <style>
    • *{
    •        box-sizing: border-box;
    • }
    • body{
    •        font-family: Arial, Helvetica, sans-serif;
    • }
    • header{
    •        background-color: #666;
    •        padding: 30px;
    •        text-align: center;
    •        font-size: 35px;
    •        color: white;
    • }
    • section{
    •        display: -webkit-flex;
    •        display: flex;
    • }
    • </style>
  6. Pada bagian nav lakukan pengaturan flexible box, background color, dan padding, perhatikan syntax:
    • <style>
    • *{
    •        box-sizing: border-box;
    • }
    • body{
    •        font-family: Arial, Helvetica, sans-serif;
    • }
    • header{
    •        background-color: #666;
    •        padding: 30px;
    •        text-align: center;
    •        font-size: 35px;
    •        color: white;
    • }
    • section{
    •        display: -webkit-flex;
    •        display: flex;
    • }
    • nav{
    •        -webkit-flex: 1;
    •        -ms-flex: 1;
    •        flex: 1;
    •        background: #ccc;
    •        padding: 20px;
    • }
    • </style>
  7. Pada bagian article lakukan pengaturan flexible box, background color, dan padding, gunakan syntax:
    • <style>
    • *{
    •        box-sizing: border-box;
    • }
    • body{
    •        font-family: Arial, Helvetica, sans-serif;
    • }
    • header{
    •        background-color: #666;
    •        padding: 30px;
    •        text-align: center;
    •        font-size: 35px;
    •        color: white;
    • }
    • section{
    •        display: -webkit-flex;
    •        display: flex;
    • }
    • nav{
    •        -webkit-flex: 1;
    •        -ms-flex: 1;
    •        flex: 1;
    •        background: #ccc;
    •        padding: 20px;
    • }
    • article{
    •        -webkit-flex: 3;
    •        -ms-flex: 3;
    •        flex: 3;
    •        background-color: #f1f1f1
    •        padding: 10px
    • }
    • </style>
  8. Pada bagian footer lakukan pengaturan background color, padding, perataan teks, dan warna teks, perhatikan syntax:
    • <style>
    • *{
    •        box-sizing: border-box;
    • }
    • body{
    •        font-family: Arial, Helvetica, sans-serif;
    • }
    • header{
    •        background-color: #666;
    •        padding: 30px;
    •        text-align: center;
    •        font-size: 35px;
    •        color: white;
    • }
    • section{
    •        display: -webkit-flex;
    •        display: flex;
    • }
    • nav{
    •        -webkit-flex: 1;
    •        -ms-flex: 1;
    •        flex: 1;
    •        background: #ccc;
    •        padding: 20px;
    • }
    • article{
    •        -webkit-flex: 3;
    •        -ms-flex: 3;
    •        flex: 3;
    •        background-color: #f1f1f1
    •        padding: 10px
    • }
    • footer{
    •        background-color: #777;
    •        padding: 10px;
    •        text-align: center;
    •        color: white;
    • }
    • </style>
  9. Kemudian khusus pada navigation dan article lakukan responsive layout, perhatikan syntax:
    • <style>
    • *{
    •        box-sizing: border-box;
    • }
    • body{
    •        font-family: Arial, Helvetica, sans-serif;
    • }
    • header{
    •        background-color: #666;
    •        padding: 30px;
    •        text-align: center;
    •        font-size: 35px;
    •        color: white;
    • }
    • section{
    •        display: -webkit-flex;
    •        display: flex;
    • }
    • nav{
    •        -webkit-flex: 1;
    •        -ms-flex: 1;
    •        flex: 1;
    •        background: #ccc;
    •        padding: 20px;
    • }
    • article{
    •        -webkit-flex: 3;
    •        -ms-flex: 3;
    •        flex: 3;
    •        background-color: #f1f1f1
    •        padding: 10px
    • }
    • footer{
    •        background-color: #777;
    •        padding: 10px;
    •        text-align: center;
    •        color: white;
    • }
    • @media (max-width: 600px){
    •        section {
    •            -webkit-flex-direction: column;
    •            flex-direction: column;
    •        }
    • }
    • </style>
  10. Perbaikan dengan CSS berhasil dilakukan! (perhatikan gambar di bawah)

sumber: anonim

Perbaikan CSS ini masih dalam satu file HTML dengan tag <style></style>, untuk menerapkan perbaikan CSS bisa dilakukan melalui 3 cara, yaitu inline, internal atau embedded, dan eksternal. Cara di atas adalah perbaikan dengan internal atau embedded. Perbaikan inline dilakukan per baris kode dengan menyisipkan syntax style="", sedangkan perbaikan dengan eksternal dilakukan dengan membuat file .css kemudian dilakukan import di dalam tag <head></head> dengan syntax misalnya <link rel="stylesheet" href="styles.css">.

Cara kerja perbaikan dengan CSS itu melalui selector yang terdiri atas selector all(*), selector element (elemennya misalnya body{}), selector id (#), dan selector class (.). Seperti namanya selector all dengan syntax * digunakan untuk memilih seluruh dokumen HTML. Selector element akan memilih elemen tertentu yang ada di dalam body, misalnya elemen h1, h2, h3 dan p. Nah, disetiap element itu dimungkinkan untuk membuat id dan class, perbedaannya kalau id itu tidak boleh namanya sama pada element yang berbeda sedangkan class boleh. Lalu selector tersebut dibuat declaration atau semacam keterangan akan diperlakukan apa. Nah, kumpulan dari selector dan declaration yang telah lengkap disebut rules.

Text dan font dalam styling di CSS dibedakan. Ada 7 styling font, yaitu:

  1. font-family : menetapkan jenis font
  2. font-size : menetapkan size font (ada relative dan absolute unit)
  3. font-weight : menetapkan ketebalan font (bold yang spesifik)
  4. font-style : menetapkan tipe font (bold, italic dsb)
  5. font-variant : menggunakan gaya small caps (huruf kapital yang ditulis kecil dan merapat)
  6. font : shorthand dari font
  7. google font : pergi ke https://fonts.google.com/ > select this style > copy di bagian embed di dalam elemen style > terapkan sesuai nama font-nya
Sedangkan styling text ada 8, yaitu:
  1. line-height : mengatur jarak antargaris text atas dan bawah
  2. text-indent : mengatur jarak pada garis pertama di paragraf
  3. text-align : mengatur perataan text
  4. text-decoration : mengatur dekorasi teks seperti ada garis bawah
  5. text-transform : mengubah teks seperti menjadi kapital semua
  6. letter-spacing : mengatur jarak antarhuruf
  7. word-spacing : mengatur jarak antarkata
  8. text-shadow : memberikan bayangan pada teks
Baik text dan font jika tidak diberi warna akan terasa membosankan. Untuk menghindarinya maka ada styling warna secara numeric, name, dan opacity. Dalam memberi warna pada teks langsung diarahkan saja ke elemennya, sedangkan untuk memberi background maka menggunakan background-color. Berbicara background-color tentu tidak lepas dari konsep box di CSS. Sedikitnya ada 4 elemen dari box, yaitu content, padding (jarak antara konten dan border), margin (jarak antara border dan elemen diluarnya), dan border (garis yang membatasi). Sedangkan untuk dimensinya mirip yang lain menggunakan width dan height. 

Ukuran pada CSS ada 2 tipe, yaitu absolute dan relative. Ukuran absolute tidak akan berbuah jika ukuran layar berubah sedangkan ukuran relative akan melakukan perubahan sesuai proporsi dari layar. Ada 6 jenis ukuran absolute, yaitu cm (centimeter), mm (milimeter), in (inches), px (pixels), pt (points), pc (picas). Sedangakan untuk ukuran relative ada 9 jenis, yaitu em, ex, ch, rem, vw, vh, vmin, vmax, dan %. Penerapan ukuran ini akan dipertimbangkan untuk membuat desain dengan pendekatan responsive maupun pendekatan adaptif.

Agar konten tidak mudah untuk di copy paste bisa digunakan syntax di bawah:

  • <style>
  •     BODY {
  •     user-select:none;
  •     -moz-user-select:none;
  •     -ms-user-select:none;
  •     -khtml-user-select:none;
  •     -webkit-user-select:none
  •     }
  • </style>

Anatomi dari CSS hanya ada 3, yaitu selector, property, dan value. Biasanya untuk memudahkan dalam perbaikan CSS maka dalam perancangan HTML akan dibuat dengan tag <div></div>. Tag tersebut merupakan sebuah box yang untuk melihatnya digunakan style="border: 2px solid black", misalnya. Setiap konten agar lebih mudah akan dibungkus oleh tag div atau box tadi. Nah, kemudian pembuatan box ini masih bersifat manual, untuk membuatnya menjadi lebih flexible maka digunakan flexible box. Perhatikan gambar di bawah:

sumber: anonim

Untuk membuat box A, B, C, D berurut dan berada di tengah container maka digunakan CSS dengan style="display:flex; align-content:center; justify-content:center". Maksud dari align-content:center adalah membuat box A,B,C,D berada di tengah secara vertikal sedangkan maksud dari justify-content:center adalah membuat box A,B,C,D berada di tengah secara horizontal berdasarkan container. Untuk membuat box D turun ke bawah saat layar dikecilkan perlu lagi ditambahkan flex-wrap:wrap;. Styling yang mungkin dilakukan pada box, yaitu box-shadow : memberikan bayangan serta border-radius : membuat sudut bundar.

Untuk gambar atau foto styling yang biasa dilakukan adalah ukuran dan posisi. Agar ukurannya proporsional digunakan object-fit : cover; dan object-position : center, misalnya. Ada text, ada font, ada box, dan ada gambar maka itu semua sudah cukup untuk membuat artikel di dalam cards. Biasanya dalam elemen <article> dibuat class kemudian dengan menggunakan class selector dibuat styling minimal box-shadow dan border-radius. Posisi dari cards kadang perlu diatur dengan positioning seperti: 

  1. Relative positioning : akan mendorong bagian lainnya
  2. Absolute positioning : memungkinkan terjadinya tumpang tindih
  3. Fixed positioning : posisi absolute yang relatif dengan jendela browser
Ketiganya disebut non-static flow sehingga bisa diterapkan top, left, right, dan bottom. Terakit positioning ada juga properti float yang memungkinkan penempatan elemen di sebelah kiri (left) atau di sebelah kanan (right). Dengan floating bisa dibentuk teks mengelilingi dari gambar atau text wrapping. Namun, saat menggunakan floating maka elemen akan dikeluarkan dari induk elemennya. Untuk mengatasinya bisa menggunakan properti clear dan overflow: auto;. Properti clear bisa diterapkan sesuai float yang digunakan. Jika floatnya left maka clearnya juga left, begitu sebaliknya. Sedangkan untuk float yang menerapkan left sekaligus right maka clearnya bisa menggunakan both. Cara yang lebih praktis bisa menggunakan properti overflow dengan nilai auto, sudah cukup tanpa perlu pengaturan lain. 

Dengan menggunakan floating dan positioning maka dimungkinkan terbuat halaman yang repsonsif. Namun, perlu tambahan dengan menggunakan meta tag view port, perhatikan kode di bawah:

  • <meta name="viewport" content="width=device-width, initial-scale=1">

Selain meta tag view port ada juga media query untuk menyesuaikan device, misalnya @media screen and (max-width: 600px) {}. Jika pada website diterapkan navigasi, untuk mempermudahnya saat dibuka melalui device yang lebih kecil bisa diterapkan properti position dengan value sticky. Sampai sini sudah cukup dipelajari styling dengan css, yaitu:

  1. Content
    • Text
    • Font
    • Image
    • Color
  2. Box
    • Padding
    • Border
    • Margin
  3. Responsive
    • Floating
    • Positioning
    • View port
    • Media query

Bagi pemula potensi adanya kesalahan dalam pembuatan styling di css itu sangat besar, apalagi besarnya file dari css akan mempengaruhi kecepatan dari website. Namun, hal ini bisa diatasi dengan mengunjungi situs https://jigsaw.w3.org/css-validator/ (cek sesalahan) dan https://www.minifier.org/ (cek ukuran file).




ref:
https://www.w3schools.com/css/

Komentar

Posting Komentar