Contents

Styling lebih Dalam

Pada sub-modul sebelumnya kita sudah mengenal apa itu CSS. Lalu, bagaimana ia bekerja, cara penulisan sintaksnya, hingga mengetahui konsep yang ada seperti inheritance, grouping selector, dan rule order.

Pada sub-modul ini kita akan berkenalan lebih dalam lagi dengan CSS, kita akan mengenal berbagai macam tipe selector, formatting text, bermain dengan warna, mengenal apa itu box model, positioning, hingga penyusunan layout pada website menggunakan teknik floating.

Untuk menerapkan materi yang kita pelajari pada sub-modul ini juga terdapat beberapa latihan dalam menerapkan styling pada halaman profil, tentunya pada akhir sub-modul ini kita dapat membuat halaman profil tampak seperti ini:


Selector Basic, Type Selector, dan Class Selector


More about Selector

Ada banyak jenis selector untuk menargetkan aturan ke elemen tertentu dalam dokumen HTML. Pada sub-modul sebelumnya, kita sudah mengetahui salah satu cara dasar dalam menggunakan selector. Sekarang, mari kita bahas lebih detail mengenai macam macam selector yang ada.


Selector Basic

Pada sub-modul sebelumnya kita sudah mengetahui apa itu selector, dan menggunakannya. Yang kita gunakan tersebut merupakan selector basic. Sebenarnya terdapat beberapa macam dari selector basic, yakni:

  • Type Selector
  • Class Selector
  • ID Selector
  • Attribute Selector
  • Universal Selector

Mari kita bahas satu persatu tipe selector basic yang ada.


Type Selector

Type Selector menggunakan nama elemen sebagai target untuk diterapkannya rule. Dengan kata lain, ketika menggunakan selector ini tentu rule akan diterapkan pada seluruh elemen target yang ada pada dokumen HTML. Contohnya sebagai berikut: 

           1
           2
           3
           4
           5
           6
           7
           8
           9
          10
          11
          12
          13
          14
          15
          16
          17
 
<!doctype html>
          <html lang="en">
          <head>
             <title>Judul Dokumen</title>
             <style>
                /* Semua elemen span */
                 span {
                     color: red;
                 }
             </style>
          </head>
          <body>
          <span>Ini merupakan sebuah teks yang berada pada elemen span. Seharusnya elemen ini ditampilkan dengan warna teks merah.</span>
          <p>Ini merupakan sebuah teks yang berada pada elemen paragraf, teks ini tidak seharusnya tidak akan terpengaruh oleh rule.</p>
          <span>Ini merupakan sebuah teks yang berada pada elemen span lainnya. Seharusnya elemen ini ditampilkan dengan warna teks merah juga.</span>
          </body>
          </html>

Jika berkas tersebut dibuka pada browser, maka teks yang berada pada setiap elemen <span> akan berwarna merah.


Class Selector

Class selector menetapkan target elemen berdasarkan nilai dari atribut class yang diterapkan pada elemennya. Untuk penulisan selector, awali dengan tanda titik (.) kemudian lanjutkan dengan nama class-nya. Contoh: 

           1
           2
           3
           4
           5
           6
           7
           8
           9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          25
          26
 
<!doctype html>
          <html lang="en">
          <head>
             <title>Judul Dokumen</title>
             <style>
                 .red {
                     color: red;
                 }
           
                 .skyblue-bg {
                     background-color: skyblue;
                 }
           
                 .fancy {
                     font-weight: bold;
                     text-shadow: 4px 4px 3px #77f;
                 }
             </style>
          </head>
          <body>
          <p class="red">Paragraf dengan teks berwarna merah</p>
          <p class="skyblue-bg">Paragraf dengan background berwarna biru langit</p>
          <p class="fancy">Paragraf dengan gaya fancy</p>
          <p>Paragraf yang menampilkan teks dengan warna standar tanpa menerapkan styling</p>
          </body>
          </html>

Jika berkas tersebut dibuka pada browser, maka akan nampak seperti ini:


Class bersifat shareable, sehingga dapat diterapkan pada banyak elemen dengan tipe elemen yang berbeda-beda. Misalkan sebuah class red dapat diterapkan pada elemen paragraf dan juga heading untuk menampilkan teks berwarna merah. 

          1
          2
 
<h1 class="red">Heading dengan teks berwarna merah</h1>
          <p class="red">Paragraf dengan teks berwarna merah</p>

Tidak hanya itu, sebuah elemen juga mungkin memiliki banyak nilai class, sehingga kita dapat menerapkan lebih dari satu rule atau gabungan rule pada elemen target. Untuk menggunakannya, pada atribut class kita cukup tuliskan nama kelasnya dan pisahkan tiap nilai kelasnya dengan spasi. 

          1
          2
 
<h1 class="red skyblue-bg">Heading dengan teks berwarna merah dan background biru langit</h1>
          <p class="red fancy">Paragraf dengan teks berwarna merah dan bergaya fancy</p>

Kita juga bisa menargetkan elemen secara spesifik yang memiliki sebuah class. Bagaimana jika kita ingin menerapkan gaya yang berbeda ketika menggunakan kelas bergaya keren alias fancy pada sebuah paragraf? untuk melakukannya, pada selector kita tuliskan nama elemen target diikuti dengan titik (.) kemudian nama kelasnya. Perhatikan contoh berikut: 

           1
           2
           3
           4
           5
           6
           7
           8
           9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
 
<!doctype html>
          <html lang="en">
          <head>
             <title>Judul Dokumen</title>
             <style>
                 .fancy {
                     font-weight: bold;
                     text-shadow: 4px 4px 3px #77f;
                 }
           
                 p.fancy {
                     text-shadow: 4px 4px 3px #00c8eb;
                 }
             </style>
          </head>
          <body>
          <h1 class="fancy">Heading dengan teks bergaya fancy</h1>
          <p class="fancy">Paragraf dengan teks bergaya fancy</p>
          </body>
          </html>

Jika berkas tersebut dibuka pada browser, maka gaya fancy yang diterapkan pada elemen heading dan elemen paragraf akan berbeda.


ID Selector, Attribute Selector, dan Universal Selector


ID Selector

ID selector menetapkan target elemen berdasarkan nilai dari atribut id yang diterapkan pada elemennya. Sama seperti class, atribut id dapat diterapkan pada seluruh elemen HTML, dan kebanyakan atribut ini digunakan untuk memberikan sebuah arti pada generic element seperti <div> dan <span>. Namun atribut id ini tidak bersifat shareable, yang artinya nilai id ini harus unik dan digunakan pada satu elemen saja.

Untuk menetapkan selector dengan menggunakan id, kita gunakan tanda octothorpe (#) atau lebih familiar disebut dengan hash. Berikut contohnya: 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
 
<!doctype html>
      <html lang="en">
      <head>
         <title>Judul Dokumen</title>
         <style>
            #special {
                background-color: skyblue;
            }
         </style>
      </head>
      <body>
      <div id="special">
         <p>Ini merupakan konten di dalam sebuah div yang diberi id special.</p>
      </div>
      <div>
         <p>Ini merupakan konten di dalam sebuah div biasa.</p>
      </div>
      </body>
      </html>

Jika kode di atas dibuka pada browser, maka tampilan akan tampak seperti ini:


Yang harus kita perhatikan kembali adalah id ini bersifat unik. Jika kita ingin menerapkan sebuah rule pada banyak elemen, sebaiknya gunakan atribut class, bukan dengan id. 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
 
<!doctype html>
      <html lang="en">
      <head>
         <title>Judul Dokumen</title>
         <style>
            #special {
                background-color: skyblue;
            }
         </style>
      </head>
      <body>
      <div id="special">
         <p>Ini merupakan konten di dalam sebuah div yang diberi id special.</p>
      </div>
      <div id="special"> <!-- ini merupakan contoh yang salah dalam penerapan id -->
         <p>Ini merupakan konten di dalam sebuah div biasa.</p>
      </div>
      </body>
      </html>

Attribute Selector

Attribute selector merupakan cara menetapkan target elemen berdasarkan sebuah atribut yang digunakan atau bahkan bisa lebih spesifik dengan nilainya. Contohnya sebagai berikut: 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
 
<!doctype html>
      <html lang="en">
      <head>
         <title>Judul Dokumen</title>
         <style>
             /* <a> element yang menerapkan href attribut */
             a[href] {
                 color: blue;
             }
       
             /* <a> element yang menerapkan nilai pada href dengan awalan "#" */
             a[href^="#"] {
                 background-color: gold;
             }
       
             /* <a> element yang menerapkan nilai pada href yang mengandung teks "example" */
             a[href*="example"] {
                 background-color: silver;
             }
       
             /* <a> element yang menerapkan nilai pada href yang mengandung teks "insensitive" tidak mementingkan huruf kapital*/
             a[href*="insensitive" i] {
                 color: cyan;
             }
       
             /* <a> element yang menerapkan nilai pada href dengan akhiran ".org" */
             a[href$=".org"] {
                 color: red;
             }
         </style>
      </head>
      <body>
      <ul>
         <ul>
             <li><a href="#internal">Internal link</a></li>
             <li><a href="http://example.com">Example link</a></li>
             <li><a href="#InSensitive">Insensitive internal link</a></li>
             <li><a href="http://example.org">Example org link</a></li>
         </ul>
      </ul>
      </body>
      </html>

Jika kode di atas dibuka pada browser, maka tampilan akan tampak seperti ini:


Dari kode di atas terlihat banyak sekali kondisi yang dapat diterapkan pada atribut selector. Supaya lebih mudah untuk dipahami, mari kita rangkum dalam sebuah tabel berikut.

Syntax Description
[attr] Menargetkan elemen yang menerapkan atribut attr.
[attr=value] Menargetkan elemen yang menerapkan atribut attr dengan nilai value.
[attr~=value] Menargetkan elemen yang menerapkan atribut attr dengan salah satu nilainya adalah value.
[attr^=value] Menargetkan elemen yang menerapkan atribut attr yang nilainya diawali dengan nilai value.
[attr$=value] Menargetkan elemen yang menerapkan atribut attr yang nilainya diakhiri dengan value.
[attr*=value] Menargetkan elemen yang menerapkan atribut attr yang nilainya mengadung value.

Universal Selector

Universal selector digunakan untuk diterapkan pada seluruh elemen. Tetapi selector ini juga bisa secara spesifik menargetkan sebuah elemen dengan menggabungkan bersama selector yang lainnya. Berikut ini contohnya: 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
 
<!DOCTYPE html>
      <html lang="id">
      <head>
        <title>Judul Dokumen</title>
        <style>
          /* Menargetkan seluruh tipe elemen */
          * {
            color: green;
          }
          
          /* Menargetkan seluruh tipe elemen yang mengandung nilai "en" pada atribut lang */
          *[lang^=en] {
            font-style: italic;
          }
          
          /* Menargetkan seluruh tipe elemen yang memiliki nilai "warning" pada atribut class */
          *.warning {
            color: red;
          }
          
          /* Menargetkan seluruh tipe elemen yang memiliki nilai "content" pada atribut id */
          *#content {
            border: 1px solid blue;
            padding: 20px;
          }
        </style>
      </head>
      <body>
        <p>
          Ini merupakan paragraf biasa atau tidak menerapkan atribut apapun. Maka teks pada paragraf ini akan berwarna hijau
        </p>
        <p lang="en-us">
          This is an English paragraph contains en-us value of lang attribute, so this text will be green and
          italic.
        </p>
        
        <h1>Ini merupakan sebuah header biasa</h1>
        <h1 lang="en-us">This is an English Header</h1>
        
        <p class="warning">
          Perhatikan paragraf ini! Paragraf ini merupakan paragraf yang memiliki kelas bernilai warning,
          sehingga teks dari paragraf ini akan berwarna merah
        </p>
        
        <div id="content">
          <p>
            Ini merupakan sebuah teks di dalam sebuah div yang memiliki id bernilai "content", seharusnya paragraf ini
            dibungkus dalam border yang memiliki padding 20px
          </p>
        </div>
      </body>
      </html>

Hasilnya:


Combinators: Adjacent Sibling Selector dan General Sibling Selector


Combinators

Kita sudah mengetahui beberapa basic selector yang ada pada CSS. Tidak hanya sampai disitu, CSS Selector dapat berisi lebih dari satu basic selector. Di antara basic selector, kita dapat menyertakan sebuah kombinator.

Ada empat kombinator yang dapat kita gunakan yaitu: Adjacent Sibling Selector, General Sibling Selector, Child Selector, dan Descendant Selector.


Adjacent Sibling Selector (+)

Adjacent Sibling Selector menggabungkan dua buah basic selector dengan menggunakan tanda + di antara keduanya. Contohnya seperti ini: 

        1
        2
        3
 
img + p {
           color: green;
        }

Adjacent Sibling Selector terdiri dari dua buah target elemen, namun hanya elemen kedua yang menerapkan rule selama elemen tersebut dituliskan langsung setelah elemen pertama pada berkas HTML. Selain itu kedua elemen tersebut harus berada di dalam induk elemen yang sama. Pada contoh di atas rule akan diterapkan pada elemen paragraf yang berada tepat setelah elemen gambar. Berikut contoh penerapannya: 

         1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
        12
        13
        14
        15
        16
        17
        18
 
<!doctype html>
        <html lang="en">
        <head>
           <title>Judul Dokumen</title>
           <style>
               /* Rule akan diterapkan pada elemen paragraf yang berada tepat setelah elemen img */
               img + p {
                   color: green;
               }
           </style>
        </head>
        <body>
        <p>Ini merupakan paragraf pertama. Rule styling tidak akan diterapkan pada elemen paragraf ini.</p>
        <img src="https://i.imgur.com/cs2BJzw.jpg" alt="Dicoding logo" width="400px">
        <p>Ini merupakan paragraf kedua dan ditetapkan setelah elemen gambar. Maka paragraf ini seharusnya menerapkan rule dengan menampilkan teks berwarna hijau.</p>
        <p>Ini merupakan paragraf ketiga. Letaknya memang setelah elemen gambar, namun tidak diletakkan persis setelahnya, sehingga rule tidak akan diterapkan pada elemen ini.</p>
        </body>
        </html>

Jika berkas di atas dijalankan pada browser, maka akan menghasilkan tampilan seperti berikut:


General Sibling Selector (~)

Mirip seperti Adjacent Sibling Selector namun rules akan diterapkan pada seluruh elemen kedua yang berada setelah elemen pertama. Dengan catatan, induknya sama, walaupun posisi dari elemen kedua tidak berada tepat setelahnya. General Sibling Selector menggunakan tanda ~ untuk menetapkan elemenya. Contohnya seperti berikut: 

        1
        2
        3
 
img ~ p {
           color: green;
        }

Rule di atas akan diterapkan pada elemen paragraf yang berada setelah elemen img selama masih di dalam induk yang sama. 

         1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
 
<!doctype html>
        <html lang="en">
        <head>
           <title>Judul Dokumen</title>
           <style>
               /* Rule akan diterapkan pada elemen header yang berada tepat setelah elemen img */
               img ~ p {
                   color: green;
               }
           </style>
        </head>
        <body>
        <p>Ini merupakan paragraf pertama. Rule styling tidak akan diterapkan pada elemen paragraf ini.</p>
        <img src="https://i.imgur.com/cs2BJzw.jpg" alt="Dicoding logo" width="400px">
        <p>Ini merupakan paragraf kedua dan ditetapkan setelah elemen gambar. Maka paragraf ini menerapkan rule dengan menampilkan teks berwarna hijau.</p>
        <div>
           <p>Ini merupakan paragraf ketiga, letaknya setelah elemen gambar, namun paragraf ini dibungkus di dalam div sehingga paragraf ini tidak akan menerapkan rule styling karena tidak memiliki induk yang sama.</p>
        </div>
        <p>Ini merupakan paragraf empat. Letaknya memang setelah elemen gambar dan memiliki induk yang sama seperti elemen gambar, sehingga elemen ini akan menerapkan rule dengan menampilkan teks berwarna hijau.</p>
        </body>
        </html>

Jika berkas di atas dijalankan pada browser, maka akan menghasilkan tampilan seperti berikut:


Combinators: Child Selector dan Descendant Selector


Child Selector (>)

Child Selector menggabungkan dua buah basic selector dengan menggunakan tanda greater than (>) di antara basic selector-nya. Contohnya sebagai berikut: 

      1
      2
      3
 
div > p {
         background-color: yellow;
      }

Pada contoh di atas, rule akan diterapkan pada seluruh elemen paragraf yang berada di dalam elemen div secara langsung. Dalam arti lain, elemen paragraf merupakan anak dari elemen div secara langsung. Untuk lebih jelas, perhatikan contoh penerapannya berikut: 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
 
<!doctype html>
      <html lang="en">
      <head>
         <title>Judul Dokumen</title>
         <style>
             /* Rule akan diterapkan pada elemen paragraf yang merupakan child dari elemen div */
             div > p {
                 background-color: yellow;
             }
         </style>
      </head>
      <body>
      <div>
         <p>Paragraf pertama. di dalam div.</p>
         <p>Paragraf kedua. di dalam div.</p>
         <section><p>Paragraf ketiga. di dalam div namun bukan sebagai anak elemen secara langsung.</p></section>
         <p>Paragraf keempat. di dalam div.</p>
      </div>
      <p>Paragraf kelima. di luar div.</p>
      <p>Paragraf keenam. di luar div.</p>
      </body>
      </html>

Jika berkas di atas dijalankan pada browser, maka akan menghasilkan tampilan seperti berikut:


Descendant Selector (space)

Descendant Selector mirip seperti child selector namun hierarkinya lebih luas, karena rule akan diterapkan pada seluruh elemen yang menjadi turunannya walaupun secara tidak langsung. Basic selector pertama yang dituliskan pada selector ini menjadi induknya dan basic selector yang kedua merupakan elemen yang akan menerapkan rule. Selector ini menggunakan spasi dalam menggabungkan dua basic selector. Contohnya sebagai berikut: 

      1
      2
      3
 
div p {
         background-color: yellow;
      }

Pada contoh di atas rule akan diterapkan pada seluruh elemen paragraf yang merupakan turunan dari elemen div. Berikut contoh penerapannya: 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
 
<!doctype html>
      <html lang="en">
      <head>
         <title>Judul Dokumen</title>
         <style>
             /* Rule akan diterapkan pada elemen paragraf yang merupakan turunan dari elemen div */
             div p {
                 background-color: yellow;
             }
         </style>
      </head>
      <body>
      <div>
         <p>Paragraf pertama. di dalam div.</p>
         <p>Paragraf kedua. di dalam div.</p>
         <section><p>Paragraf ketiga. di dalam div walaupun bukan sebagai anak elemen secara langsung, namun termasuk dalam turunannya.</p></section>
         <p>Paragraf keempat. di dalam div.</p>
      </div>
      <p>Paragraf kelima. di luar div.</p>
      <p>Paragraf keenam. di luar div.</p>
      </body>
      </html>

Jika berkas di atas dijalankan pada browser, maka akan menghasilkan tampilan seperti berikut:


Pseudo Selecor

Selain beberapa selector yang sudah kita pelajari, CSS masih memiliki dua selector lagi yang dapat kita manfaatkan membantu menyeleksi elemen dalam menerapkan sebuah rule, yakni Pseudo-class dan Pseudo-element.

Sebelum menjelaskan lebih detail tentang kedua selector tersebut, perlu kita ketahui pseudo selector berbeda dari selector yang sudah dibahas sebelumnya, selector ini menargetkan elemen pada bagian yang “tidak terlihat” seperti sifat pada elemen, sehingga untuk menetapkannya, kita tidak bisa menggunakan selector biasa. Salah satu contoh yang paling sering kita terapkan adalah :hover, Pseudo Selector tersebut kita gunakan untuk menetapkan rule ketika cursor diarahkan ke target elemen. 

    1
    2
    3
 
a:hover {
       color: blue;
    }

Contoh kode di atas merupakan salah satu pseudo-class selector dimana elemen anchor akan menerapkan warna biru ketika kursor diarahkan pada elemen tersebut.

Mari kita bahas lebih detail mengenai pseudo-class selector dan pseudo-element selector.


Pseudo-class Selector

Pseudo-class merupakan sebuah class “semu” yang sebenarnya ada pada tiap elemen HTML. Pada contoh sebelumnya kita sudah mengetahui salah satu pseudo-class selector, dengan menggunakan selector ini kita dapat memilih elemen berdasarkan class yang tidak nampak pada dokumen. Kita bisa menetapkan rule hanya ketika sebuah tautan telah dikunjungi (:visited) atau ketika sebuah elemen diarahkan dengan kursor (:hover).

Untuk menggunakan pseudo-class kita gunakan tanda titik dua (:) pada basic selector kemudian diikuti dengan pseudo-class nya. Berikut contoh penerapan beberapa pseudo-class pada sebuah elemen anchor: 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
 
/* rule akan diterapkan pada sebuah tautan yang belum pernah dikunjungi */
      a:link {
         color: red;
      }
       
      /* rule akan diterapkan pada sebuah tautan yang sudah pernah dikunjungi */
      a:visited {
         color: green;
      }
       
      /* rule akan diterapkan pada sebuah tautan ketika diarahkan dengan kursor */
      a:hover {
         color: pink;
      }
       
      /* rule akan diterapkan pada sebuah tautan ketika ditekan */
      a:active {
         color:orange;
      }

Maka hasilnya akan seperti ini:


Tidak hanya yang dicontohkan di atas, ada banyak sekali class semu yang menjadi standar pseudo-classes dalam CSS. Kita pun bisa melihat indeks standar yang ada pada pseudo-class pada tautan resmi Mozilla berikut: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes


Pseudo-elemen Selector

Sama seperti pseudo-class, pseudo-elemen merupakan sebuah elemen “semu” yang sebenarnya ada tetapi tidak tampak secara tertulis pada berkas HTML. Selector ini biasa digunakan ketika kita ingin menambahkan sebuah konten tepat sebelum dan setelah sebuah elemen paragraf. Alhasil kita tidak perlu menuliskan struktur elemen tersebut pada berkas HTML. Cukup manfaatkan pseudo-elemen ::before dan ::after kemudian tuliskan konten tersebut cukup pada CSS. Contohnya kita ingin menambahkan tanda kutip sebelum dan sesudah elemen blockquote. Seperti ini cara menuliskannya: 

      1
      2
      3
      4
      5
      6
      7
 
blockquote::before,
      blockquote::after {
         content: '"';
         font-size: 24px;
         font-style: italic;
         font-weight: bold;
      }

Dengan menuliskan rule tersebut, elemen <blockquote> memiliki tanda kutip pada awal dan akhir elemennya. 

1
 
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eius error explicabo ipsum molestiae necessitatibus nesciunt possimus reprehenderit sed voluptates. Aliquam aspernatur autem est nobis officia praesentium quas recusandae rem.</blockquote>

Tampilan yang dihasilkan:


Untuk menggunakan pseudo-elemen kita gunakan dua buah tanda titik dua (::) kemudian diikuti dengan pseudo-elemen nya. Sebenarnya kita bisa menggunakan satu buah tanda tanda titik dua (:) namun kita perlu membedakannya dengan pseudo-class. Karena itulah baiknya ketika menggunakan pseudo-elemen, gunakanlah dua buah titik dua (::).

Pseudo-element tidak hanya ::before dan ::after. Dengan pseudo-elemen kita juga dapat menentukan rule pada awal karakter konten elemen. 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
 
<!doctype html>
      <html lang="en">
      <head>
         <title>Judul Dokumen</title>
         <style>
             /* Rule styling akan diterapkan pada karakter pertama disebuah paragraf */
             p::first-letter {
                 font-size: 32px;
                 font-weight: bold;
                 color: saddlebrown;
             }
         </style>
      </head>
      <body>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto deserunt, dicta laudantium quae quam sequi
         soluta vitae! A, architecto beatae, consequuntur et eveniet fuga laudantium molestias praesentium temporibus, unde
         velit.</p>
      </body>
      </html>

Tampilan yang dihasilkan:


Untuk mengetahui lebih lengkap mengenai apa saja pseudo-element yang dapat kita manfaatkan, kita bisa melihat dokumentasi resmi yang diberikan Mozilla pada tautan berikut: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements


Formatting Text (Text and Font Styling)

Setelah kita tahu bagaimana menerapkan CSS pada berkas HTML, mengetahui struktur penulisan CSS, dan menggunakan selector sesuai dengan kebutuhan, apa berikutnya? Kita akan fokus mempelajari secara detail bagaimana menerapkan styling pada sebuah teks.

Perlu kita ketahui, CSS memisahkan styling untuk font dan teks. Kita harus tahu kapan seharusnya menetapkan styling pada font atau menetapkannya pada teks. Mengapa kedua hal tersebut dipisah? Padahal teks dan font merupakan satu kesatuan, di mana setiap teks pasti menggunakan font untuk menampilkannya, bukan? Sebabnya, CSS sendiri mempunyai properti untuk kedua hal tersebut secara masing-masing

Jika kita ingin menetapkan styling pada tampilan teks itu sendiri, gunakanlah properti font. Contohnya properti font dapat mengatur tipe font, ukuran, ketebalan, dan lainnya. Sedangkan properti teks digunakan untuk mendukung hal lainnya dalam menampilkan teks seperti, menetapkan text alignment, dekorasi, spacing, dan masih banyak lagi. Karena dua hal ini dipisah, mari kita bahas satu persatu.


Memilih Jenis dan Ukuran Font


Font Styling

Ketika kita membuat sebuah dokumen teks, termasuk dokumen cetak, langkah awal kita biasanya adalah menentukan jenis font yang akan digunakan. Pada pengembangan website pun demikian. Dalam CSS, font ditentukan dengan menggunakan beberapa paket properti font. Kita bisa atur tipe font, ukuran, ketebalan, dan gaya. Berikut ini merupakan properti font yang akan kita pelajari antara lain:

  • font-family : Menetapkan jenis font yang akan diterapkan pada target.
  • font-size : Menentukan ukuran pada teks.
  • font-weight : Menentukan ketebalan pada teks.
  • font-style : Menetapkan styling yang diterapkan pada teks.
  • font-variant : Menentukan teks untuk menggunakan gaya small caps (huruf kapital kecil).
  • font : Shorthand dari properti font yang ada.

Mari kita bahas properti tersebut satu persatu secara mendetail.


font-family

Pada sub-modul pengenalan CSS kita sudah mencoba menggunakan font properties ini untuk mengubah standar font yang ditampilkan pada browser dengan menggunakan font-family pada elemen <body>. 

        1
        2
        3
 
body {
           font-family: sans-serif;
        }

Sehingga menghasilkan tampilan:


Pada rule tersebut kita mengubah standar font yang digunakan browser dengan font ‘sans-serif’. Sebenarnya untuk nilai dari properti ini dapat lebih dari satu (dikenal sebagai font stack). Tujuannya adalah sebagai fallback jika terjadi kegagalan dalam menggunakan font yang kita gunakan.

Untuk menuliskan lebih dari satu nilai font, berikut aturan yang harus kita perhatikan:


  • Seluruh nilai font yang bukan merupakan generic font families harus dituliskan secara kapital. Contohnya “Arial” bukan dituliskan “arial”.
  • Gunakan tanda koma (,) untuk memisahkan antar nilai font yang digunakan.
  • Selalu tanda kutip (“) untuk membungkus nilai font yang memiliki spasi pada namanya (Contohnya “Open Sans”).

Mungkin kita bertanya-tanya mengapa perlu memberikan lebih dari satu nilai pada font-family? Hal tersebut penting karena tidak semua browser mendukung semua jenis font. Memberikan lebih dari satu nilai font dapat menawarkan alternatif tampilan font pada browser. Terutama jika font utama yang diterapkan tidak didukung oleh browser yang digunakan.

Bagaimana urutan prioritasnya? Mulai dari jenis font yang pertama dituliskan. Jika font pertama didukung oleh browser, maka browser akan menggunakannya. Namun jika tidak, maka browser akan memeriksa nilai font yang kedua dan menggunakannya (jika didukung), demikian dan seterusnya.

Pastikan untuk menggunakan generic font families pada akhir nilai properti font-family, karena nilai ini dipastikan didukung oleh seluruh browser saat ini. Lantas apa saja nilai dari generic font families ini? Berikut nilai-nilai generic font families yang dapat kita gunakan untuk fallback mechanism:

  • serif : jenis font yang memiliki runcing pada garis akhir karakternya. Times New Roman merupakan salah satu jenis serif font.
  • sans-serif : jenis font yang tidak meruncing pada garis akhir karakternya. Contohnya “Open Sans”, “Fira Sans” dan lainnya.
  • monospace : jenis font yang memiliki nilai lebar tiap karakternya sama. Consolas merupakan salah satu jenisnya.
  • cursive: jenis font yang tampak seperti handwriting atau hasil tulisan tangan.
  • fantasy : jenis font yang merepresentasikan karakteristik yang menyenangkan.
  • system-ui : jika menerapkan nilai ini maka font yang diterapkan akan sama seperti font yang digunakan pada sistem operasi kita.
  • math : jenis font yang digunakan untuk penulisan rumus-rumus matematika.
  • emoji : jenis font yang digunakan untuk menampilkan emoji.
  • fangsong : jenis font yang menampilkan gaya penulisan Chinese.

Dalam memilih jenis font terdapat istilah yang dinamakan web safe font. Web safe font adalah jenis font yang umumnya sudah pasti tersedia di sebagian besar komputer. Sehingga dapat dipastikan bahwa website akan terlihat sebagaimana mestinya pada browser. Berikut merupakan beberapa contoh font yang masuk ke kategori ini.

  • Arial (sans-serif)
  • Verdana (sans-serif)
  • Helvetica (sans-serif)
  • Tahoma (sans-serif)
  • Trebuchet MS (sans-serif)
  • Times New Roman (serif)
  • Georgia (serif)
  • Garamond (serif)
  • Courier New (monospace)
  • Brush Script MT (cursive)

font-size

Mengubah nilai font pada sebuah dokumen adalah hal yang sangat wajar terjadi, begitu pula pada website. Untuk menetapkan ukuran font, kita perlu menerapkan properti font-size. Kita bisa menetapkan nilai dari properti ini dengan menuliskan langsung nilai dan satuannya. Contohnya seperti ini: 

        1
        2
        3
 
h1 {
          font-size: 1.5em;
        }

Pastikan bahwa saat menuliskan nilai dan satuannya, tidak ada jarak (spasi). 

        1
        2
        3
        4
 
/* Rule tidak akan diterapkan pada target karena kesalahan penulisan nilai properti */
        h1 {
          font-size: 1.5 em;
        }

Satuan dalam menetapkan ukuran font terdapat dua jenis. Yang pertama relative, yakni satuan yang nilainya tergantung pada sesuatu hal, contohnya ukuran dari viewport, induk elemen ataupun ukuran teks standar. Dan yang kedua adalah absolute, yakni satuan yang nilainya telah ditentukan atau digunakan dalam dunia nyata.

Berikut merupakan nilai satuan yang dapat kita manfaatkan dalam menetapkan ukuran font beserta fungsinya:

Relative unit

Satuan Relative to Fungsi
em Font size Satuan relatif terhadap ukuran font yang sedang digunakan pada elemen (contohnya, 2em berarti 2 kali lebih besar dari ukuran font seharusnya).
ex Font height Satuan relatif terhadap tinggi font saat ini, satuan ini sangat jarang sekali digunakan
rem Font size Mirip seperti em, tetapi rem merupakan satuan relatif terhadap ukuran font dari root element.
ch Font width Satuan relatif terhadap lebar dari karakter “0” nol.
vw Viewport width Satuan relatif terhadap 1% lebar viewport. Contoh 1vw = 1% dari lebar viewport. Satuan ini tidak didukung pada browser IE8 ke bawah.
vh Viewport height Satuan relatif terhadap 1% tinggi viewport. Contoh 1vh = 1% dari tinggi viewport. Satuan ini tidak didukung pada browser IE8 ke bawah.

Absolute unit

Satuan Fungsi
px Menetapkan nilai font berdasarkan ukuran pixel
pt Menetapkan nilai font berdasarkan points (1/72 inch di CSS2.1)
pc Menetapkan nilai font berdasarkan picas (1 pica = 12 point)
mm Menetapkan nilai font berdasarkan millimeters
cm Menetapkan nilai font berdasarkan centimeters
in Menetapkan nilai font berdasarkan inches

Selain dengan menetapkan nilai dan satuannya secara langsung, untuk mengatur ukuran font kita juga bisa gunakan nilai persentase. 

        1
        2
        3
        4
        5
        6
 
body {
          font-size: 16px;
        }
        h1 {
          font-size: 150%; /* 150% dari 16 = 24px */
        }

Pada contoh ini ukuran font dari elemen <h1> seharusnya memiliki ukuran 16px karena mewarisi dari induk elemennya (body). Namun, di bawahnya terdapat rule yang menargetkan secara spesifik untuk elemen <h1> untuk menerapkan ukuran font sebesar 150% dari ukuran induknya sehingga elemen <h1> akan nampak 50% lebih besar dari elemen lain yang ada di dalam <body>.


Dan yang terakhir kita juga bisa menentukan ukuran font dengan menuliskan kata kunci secara spesifik yang tersedia pada CSS. Kata kunci tersebut adalah: xx-small, x-small, small, medium, large, x-large, dan xx-large.

Kata kunci tersebut tidak ada kaitannya dengan pengukuran tertentu (bukan ukuran yang absolute) tetapi nilainya diubah secara konsisten satu sama lain.


Pada gambar di atas kita bisa lihat bahwa standarnya browser menampilkan teks dengan nilai medium. Properti font-size dapat diaplikasikan ke seluruh elemen yang ada di HTML dan nilainya dapat diturunkan pada elemen turunannya.

Font Weight, Font Style, Font Variant dan Shorthand


font-weight

Setelah mengenal font families dan font size, selanjutnya ada juga font-weight yang digunakan untuk mengatur ketebalan dari font yang ditampilkan. Nilai dari properti ini dapat ditentukan dengan menggunakan numeric values (100 sampai 900) atau dengan menggunakan descriptive terms (normal, bold, bolder, dan lighter).


Properti font-weight dapat diaplikasikan ke seluruh elemen yang ada di HTML dan nilainya dapat diturunkan pada elemen turunannya.


font-style

Properti selanjutnya adalah font-style. Properti ini digunakan untuk menentukan postur dari teks yang ditampilkan, apakah bentuknya vertikal (normal) atau miring (italic dan oblique).


Italic dan oblique keduanya menampilkan teks yang miring. Perbedaanya adalah italic menerapkan tipe miring (italic font version) dari suatu font sedangkan oblique adalah font normal yang hanya dibuat miring.

Properti font-style dapat diaplikasikan ke seluruh elemen yang ada di HTML dan nilainya dapat diturunkan pada elemen turunannya.


font-variant

Kita yang terbiasa dengan aplikasi document editor (rich text) seperti Microsoft Word, tentu tahu atau sudah mencoba fitur small caps. Fitur ini dapat membuat teks menjadi kapital tetapi dituliskan secara kecil dan merapat, seperti ini:


Untuk membuat tulisan seperti gambar di atas, kita bisa memanfaatkan properti font-variant dengan nilai small-caps pada propertinya.

Properti font-variant dapat diaplikasikan ke seluruh elemen yang ada di HTML dan nilainya dapat diturunkan pada elemen turunannya.


Shorthand

Menspesifikasikan masing-masing nilai properti font akan menghasilkan banyak sekali kode repetitif. Dengan begitu CSS memberikan suatu “jalan pintas” untuk menuliskan properti-properti tersebut ke dalam satu properti yaitu font.

Dengan menggunakan properti font kita dapat menuliskan beberapa properti hanya dalam satu properti pada satu rule.


Nilai dari properti font merupakan nilai dari seluruh properti dari font yang sudah kita bahas. Tiap nilai dipisahkan menggunakan spasi. Pada properti ini urutan nilai merupakan hal yang penting, sehingga jangan sampai salah urutan dalam menuliskannya. Kesalahan penulisan atau urutan menyebabkan seluruh struktur rule menjadi tidak valid.

Walaupun begitu kita bisa tidak menuliskan seluruh nilai properti yang ada, tetapi nilai dari properti font-size dan font-family wajib ada ketika menggunakan properti ini. Berikut contohnya penulisan minimal ketika kita menggunakan properti font: 

        1
        2
        3
 
p {
           font: 1em sans-serif;
        }

Text Styling: Line Height, Text Indent, dan Text Alignment


Text Styling

Pembahasan sebelumnya kita terfokus pada formating bentuk karakter yang ditampilkan dengan menggunakan beberapa properti font yang ada. Sekarang kita akan mempelajari bagaimana seorang developer bisa memberikan formatting pada keseluruhan teks yang ada pada baris paragraf, seperti menetapkan indent, jarak antar baris, kata dan huruf, dan sebagainya. Maka dari itu, mari kita bahas satu persatu.


Line Height

Properti line-height digunakan untuk mengatur jarak minimal dari garis dasar ke garis dasar dalam menampilkannya teks pada halaman. Jika kita terbiasa dengan software document editor (rich text) seperti Microsoft Word, properti ini mirip dengan fungsi line and paragraph spacing.


Pada penjelasan diatas disebutkan “minimal”, karena jika terdapat sebuah karakter yang tinggi atau besar dalam sebuah baris, maka tinggi dari baris pun akan menyesuaikan agar jarak tetap mengakomodirnya.

Berikut merupakan contoh tiga cara berbeda dalam menerapkan tinggi baris dua kali lebih tinggi dari ukuran font: 

        1
        2
        3
        4
        5
        6
        7
        8
        9
 
p {
           line-height: 2;
        }
        p {
           line-height: 200%;
        }
        p {
           line-height: 2em;
        }

Cara pertama merupakan cara yang paling mudah digunakan, karena kita dapat menentukan nilai hanya dengan satu angka, di mana angka tersebut nantinya dikalikan dengan nilai font-size sebelum diterapkan pada nilai properti line-height. Contohnya, ukuran font standar pada paragraf adalah 16 pixel. Kita definisikan properti line-height dengan nilai 2, maka nilai properti line-height seharusnya adalah 16 pixel * 2 = 32 pixel (dua kali lebih besar dari ukuran font).

Properti line-height dapat diaplikasikan ke seluruh elemen yang ada pada HTML dan nilainya dapat diturunkan pada elemen turunannya.


Text Indent

Dalam membuat sebuah dokumen tidak jarang kita membutuhkan jarak/lekuk di awal paragraf. Hal tersebut dapat dilakukan pada website dengan menerapkan properti text-indent. Kita dapat menentukan nilai properti ini melalui perhitungan panjang dalam px, em, dan in atau bisa menggunakan nilai persentase (%). Nilai persentase dihitung berdasarkan lebar dari induk elemen. Berikut merupakan contoh penggunaannya: 

         1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
 
p#first {
           text-indent: 2em;
        }
         
        p#second {
           text-indent: 25%;
        }
         
        p#third {
           text-indent: -35px;
        }

Jika elemen menerapkan rule tersebut, akan tampak seperti ini:


Pada contoh ke-tiga kita bisa melihat bahwa pada nilai properti ini dapat diberikan nilai negatif. Jika kita menggunakannya, maka baris pertama pada paragraf akan keluar dari batas elemen yang menampungnya (biasa disebut hanging indent).

Perlu diingat kembali, properti ini hanya berpengaruh pada awal baris paragraf. Jika kita ingin menetapkannya untuk seluruh baris kita dapat gunakan margin atau padding, keduanya akan dibahas pada materi box model.


Text Alignment

Kita bisa mengatur text alignment (perataan teks) pada website seperti kita melakukannya pada aplikasi Microsoft Word dengan menggunakan properti text-align. Untuk asalnya, properti ini bernilai left atau biasa kita sebut rata kiri. Namun jika kita ingin mengubah perataan teks ini berada di posisi lainnya, maka kita dapat mengubah value-nya menjadi value yang sesuai dengan keinginan kita.

Berikut ini nilai yang dapat digunakan pada properti text-align:

Nilai Properti Fungsi
text-align: left Membuat perataan teks pada ujung kiri
text-align: right Membuat perataan teks pada ujung kanan
text-align: center Membuat perataan teks secara menengah
text-align: justify Membuat perataan teks yang setara pada ujung kiri dan kanannya

Bagaimana? Pasti kita sudah familiar dengan nilai-nilai tersebut? Berikut contoh penggunaan dari properti text-align: 

         1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
        12
        13
        14
        15
 
p#first {
            text-align: left;
        }
         
        p#second {
            text-align: right;
        }
         
        p#third {
            text-align: center;
        }
         
        p#fourth {
            text-align: justify;
        }

Jika elemen menerapkan rule tersebut, akan tampak seperti ini:


Text Stylinig : Text Decoration, Text Transform, Text Spacing, dan Text Shadow


Text Decoration

Properti ini paling populer digunakan ketika kita ingin membuat garis bawah atau underline pada teks. Tapi tak hanya itu, ada beberapa nilai lain yang dapat kita gunakan untuk properti ini. Detailnya sebagai berikut:

Nilai properti Fungsi
text-decoration: underline Memberikan garis bawah (underline) pada teks
text-decoration: overline Memberikan garis atas (overline) pada teks
text-decoration: line-through Memberikan efek tulisan dicoret (strikethrough)
text-decoration: none Menghilangkan dekorasi teks yang ada pada elemen

Dengan menggunakan text-decoration, kita dapat menghilangkan efek underline pada link yang ditampilkan dengan memberikan nilai text-decoration: none pada elemen <a>.


Text Transform

Pasti kita pernah mencoba fitur pada document editor yang dapat mengubah kapitalisasi pada teks, bukan? Fitur ini sangat membantu di kala kita ingin mengubah kapitalisasi tanpa harus menuliskan kembali teksnya. Pada CSS juga terdapat fitur serupa, yaitu dengan menggunakan properti text-transform. Ketika kita menerapkan properti text-transform pada elemen teks, maka kapitalisasi akan berubah ketika halaman di-render tanpa harus mengubahnya pada dokumen HTML.

Properti ini dapat berisikan nilai sebagai berikut:

Nilai Properti Fungsi
text-transform: none Teks yang ditampilkan sama seperti yang dituliskan
text-transform: capitalize Membuat huruf pertama besar pada tiap katanya
text-transform: lowercase Membuat seluruh teks menggunakan huruf kecil
Text-transform: uppercase Membuat seluruh teks menggunakan huruf besar

Seperti ini contoh tampilan ketika menerapkan properti dan nilai di atas


Word and Letter Spacing

Properti selanjutnya yang bisa kita gunakan untuk formating teks adalah letter-spacing dan word-spacing. Seperti namanya, properti ini digunakan untuk mengatur spasi atau jarak pada teks. Properti letter-spacing digunakan untuk mengatur jarak antar huruf, sedangkan word-spacing digunakan untuk mengatur jarak antar kata. Berikut contohnya: 

      1
      2
      3
      4
      5
      6
 
p#letter {
         letter-spacing: 4px;
      }
      p#word {
         word-spacing: 1.5em;
      }

Berikut contoh tampilan jika menerapkan rule di atas:


Kedua elemen ini dapat diaplikasikan ke seluruh elemen yang ada pada HTML dan nilainya dapat diturunkan pada elemen turunannya.


Text Shadow

Memberikan bayangan pada teks telah menjadi hal yang umum digunakan meskipun tidak memiliki dukungan di semua browser. Pada CSS untuk membuat bayangan pada teks (atau biasa disebut drop shadow) kita dapat gunakan properti text-shadow.

Nilai dari properti ini cukup rumit karena membutuhkan tiga buah nilai dan satu buah nilai warna sehingga membutuhkan empat nilai dalam satu properti untuk menentukan bayangannya.

  • Nilai pertama : menunjukkan seberapa jauh ke kiri atau kanan (horizontal) bayangan harus ditampakkan.
  • Nilai kedua : menunjukkan jarak ke atas atau ke bawah (vertical) bayangan harus ditampakkan.
  • Nilai Ketiga (opsional) : menentukan tingkat keburaman yang harus diterapkan pada bayangan.
  • Nilai Keempat : menentukan warna yang digunakan pada bayangan.

Berikut ini contoh penggunaan dari properti drop shadow:

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
 
p#one {
         text-shadow: 1px 1px 0px #000000;
         background-color: #eeeeee;
         color: #666666;
      }
       
      p#two {
         text-shadow: 1px 1px 3px #666666;
         background-color: #dddddd;
         color: #666666;
      }
       
      p#three {
         text-shadow: 2px 2px 7px #111111;
         background-color: #cccccc;
         color: #ffffff;
      }
       
      p#four {
         text-shadow: -1px -1px #666666;
         background-color: #cccccc;
         color: #bbbbbb;
      }

Berikut contoh tampilan jika menerapkan rule di atas:


Menerapkan Font Styling pada Halaman Profil

Sejauh ini kita sudah mengenal banyak sekali properti yang dapat mengatur formatting text, kita juga sudah mengetahui bahwa CSS memisahkan properti styling untuk font dan text. Nah, sekarang saatnya kita terapkan beberapa properti yang sudah kita pelajari pada halaman profil yang sudah kita buat.

Pada latihan kali ini juga, kita akan belajar bagaimana menerapkan font yang bersumber dari Google Font, sehingga kita bisa menampilkan tipe font selain hanya generic font families.

Sudah siap? Lanjutkan ke materi berikutnya, ya!


Menggunakan Font dari Google Font

Kita sudah mengetahui bagaimana cara mengubah font pada website dan juga mengetahui tipe font standar yang tersedia pada browser. Berbicara tentang tipe font, ketika kita menjelajah beberapa website yang ada di internet tidak jarang kita menemukan website yang menggunakan font yang unik atau font yang tidak dimiliki pada komputer kita. Lantas bagaimana cara font tersebut dapat ditampilkan?

Untuk hal ini, CSS memiliki fitur yang digunakan untuk memasukkan font external ke dalam CSS, yakni menggunakan @font-face. Berikut contoh penulisan @font-face pada CSS: 

    1
    2
    3
    4
 
@font-face {
       font-family: "Dicoding Font";
       src: url('FILE-FONT.TTF');
    }

Kode tersebut berfungsi untuk mendefinisikan custom font, dengan nama “Dicoding Font”. Ketika mendefinisikan custom font, kita juga membutuhkan berkas font, bisa dilihat berkas font pada contoh adalah ‘FILE-FONT.TTF”.

Setelah mendefinisikan font-face, maka font-family dengan nama “Dicoding Font” siap diterapkan pada elemen HTML. 

    1
    2
    3
 
p {
       font-family: "Dicoding Font";
    }

Pada kelas ini kita tidak akan membahas secara detail mengenai @font-face. Jika ingin mempelajarinya, Anda bisa mengunjungi dokumentasi Mozilla pada tautan berikut: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face. Mengapa kita tak mempelajari hal ini secara detail? Karena sekarang terdapat cara yang lebih mudah dan sering digunakan oleh web developer, yakni menggunakan font dari Google Font.

Google Font, layanan Google untuk memudahkan kita mendesain font pada website. Google Font banyak menyediakan tipe font gratis yang dapat kita manfaatkan. Saat materi ini ditulis, Google Font memiliki jenis font sekitar 1.364.

Perlu jadi catatan bahwa Google Font hanya dapat digunakan ketika komputer dalam keadaan online. Jika kita sedang mengembangkan website dalam keadaan offline, sebaiknya gunakan pendekatan @font-face.

Untuk menggunakan font yang disediakan Google Font, langkah awal yaitu mengunjungi website google font pada tautan berikut: https://fonts.google.com/.


Saat ini kita akan mencari font dengan nama “Quicksand.” Lakukan pencarian font tersebut pada search bar yang tersedia pada website tersebut.


Jika sudah menemukan font yang dicari, maka klik pada font pilihan kita dan akan diarahkan ke halaman berikutnya.


Tekan tombol “+ Select this style” untuk memilih font dengan ukuran yang diinginkan. Di sini kita contohkan dengan memilih font ukuran Regular 400. Ketika menekan tombol tersebut, Google Font akan menyimpannya sebagai selected families (pilih tombol pada pojok kanan atas untuk melihat selected families).


Kita juga bisa memilih ketebalan fontnya. Yuk, pilih juga versi tebalnya (Bold 700) dan masukan kembali ke dalam collection.


Setelah selesai memilih font yang dicari, maka tampilan dari selected families akan tampak seperti ini:


Selanjutnya klik pada tab embed dan pilih tulisan @import. Salin kode @import beserta URL-nya. 


1
 
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700&display=swap');

Kemudian buka kembali berkas style.css pada project kita dan sisipkan kode tersebut pada baris paling awal. Sehingga keseluruhan kode pada berkas style.css seperti ini: 

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
 
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700&display=swap');
     
     
    body {
       font-family: sans-serif;
    }
     
     
    h2, h3 {
       color: #00a2c6
    }
     
     
    footer {
       padding: 20px;
       color: white;
       background-color: #00a2c6
    }

Untuk menerapkan font-nya, kita ubah nilai properti font-family pada body dengan menambahkan nilai ‘Quicksand’ sebelum generic font sans-serif. 

    1
    2
    3
 
body {
       font-family: 'Quicksand', sans-serif;
    }

Dengan begitu tampilan font pada halaman website akan menggunakan Quicksand.


Bagaimana? Mudah kan? Sebenarnya google font menggunakan teknik yang sama, yakni menggunakan @font-face. Jika kita coba buka URL yang ada pada script @import tadi pada browser, hasilnya adalah sebuah kode CSS di mana terdapat banyak @font-face dituliskan disana.


Dengan fungsi @import pada CSS, seolah-olah kode tersebut dituliskan pada berkas style.css yang kita buat.


Menetapkan ukuran, ketebalan, dan alignment teks pada Halaman Profil

Setelah menentukan tipe font baru dalam menampilkan teks, selanjutnya kita percantik lagi teksnya dengan mengatur ukuran, ketebalan, dan alignment pada teks. Jika Anda sudah menutup berkas style.css pada text editor, silakan buka kembali dan ikuti langkah - langkah berikut.

Langkah pertama kita atur ukuran font menjadi 18px pada teks yang berada di elemen <a> yang merupakan turunan dari elemen <nav>. Silakan tambahkan rule dibawah ini. 

    1
    2
    3
 
nav a {
       font-size: 18px;
    }

Kemudian kita atur juga ketebalan teksnya menjadi 400 dan hilangkan garis bawah pada elemen tersebut sehingga block rule-nya menjadi seperti ini: 

    1
    2
    3
    4
    5
 
nav a {
       font-size: 18px;
       font-weight: 400;
       text-decoration: none;
    }

Sehingga jika kita preview pada browser, maka ukuran teks pada navigasi akan tampak lebih besar dan tidak memiliki garis bawah.


Selain itu, kita juga bisa memberikan efek tebal pada teks ketika salah satu item navigasi disorot menggunakan kursor. Tambahkan rule baru dengan memanfaatkan pseudo-class :hover pada elemen <a>. 

    1
    2
    3
 
nav a:hover {
       font-weight: bold;
    }

Sehingga tampilan menjadi seperti ini:


Selanjutnya teks pada header aside akan kita buat menjadi rata tengah dengan menggunakan properti text-align. Sebelum itu, untuk memudahkan menetapkan selector, berikan attribute class pada elemen <article> yang berada di dalam elemen <aside> dengan nilai profile. 

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
 
<aside>
         <article class="profile">
              <header>
                  .....
              </header>
              <section>
                  .....
              </section>
         </article>
    </aside>

Setelah itu, kita dapat menentukan selector dengan mudah untuk mengatur <header> pada elemen <article> tersebut: 

    1
    2
    3
 
.profile header {
       text-align: center;
    }

Maka teks pada header aside akan menjadi rata tengah.


Terakhir, kita buat juga teks pada footer menjadi rata tengah dan tebal dengan menambahkan properti text-align: center; dan font-weight: bold; pada footer selector: 

    1
    2
    3
    4
    5
    6
    7
 
footer {
       padding: 20px;
       color: white;
       background-color: #00a2c6;
       text-align: center;
       font-weight: bold;
    }

Sehingga tampilan footer akan tampak seperti ini:


Color

Warna memberikan kesan hidup pada sebuah website, Jika kita kembali pada tahun 1993 saat website hanya menampilkan background abu dengan teks hitam, tentu membosankan sekali, bukan?


Pada saat itu memang belum tersedia sebuah browser yang dapat mengontrol warna. Sampai akhirnya Netscape Navigator hadir dan memungkinkan hal tersebut, walaupun belum sempurna layaknya saat ini. Syukurlah pada saat ini kita bisa menggunakan properti - properti yang ada pada CSS untuk mengatur warna pada teks dan background. Terlebih, seluruh browser saat ini sudah mendukung styling menggunakan CSS sehingga kita tidak perlu lagi memikirkan kompatibilitasnya.

Pembahasan kali ini kita akan fokus mengenai warna pada CSS. Anda akan dikenalkan pada properti yang digunakan untuk mengatur warna teks dan background. Tapi sebelum itu, mari kita pelajari dahulu bagaimana cara menetapkan sebuah warna pada CSS.


Menetapkan Nilai Warna

Setiap warna pada layar komputer kita terdiri dari campuran warna merah, hijau, dan biru. Layar komputer dibuat dari ribuan kotak kecil yang biasa disebut pixel. Ketika layar monitor tidak menyala maka pixel pun tidak akan menyala. Ketika layar monitor menyala, tiap pixel dapat menghasilkan warna yang berbeda sehingga dapat menampilkan gambar.

Di dalam pixel terdapat tiga buah lampu kecil berwarna merah, hijau, dan biru. Ribuan warna dapat dihasilkan dari kombinasi tiga warna tersebut.


Ketika ingin menetapkan warna, kita tidak perlu menghafal kombinasi dari ketiga warna tersebut. Banyak pemilih warna yang dapat membantu kita dalam menetapkan warna yang diinginkan. Contohnya seperti color picker yang ada pada Photoshop, GIMP atau Gravit Designer.


Kita bisa melihat nilai RGB melalui color picker. Lantas bagaimana jika kita tidak memiliki aplikasi design seperti yang telah disebutkan tadi? Tenang, sekarang color picker banyak tersedia online, bahkan ketika kita menuliskan “color picker” pada Google Search, tools tersebut tersedia pada hasil pencariannya.


Untuk menetapkan nilai warna pada CSS kita dapat menggunakan Numeric Value dan Predefined Color Name. Apa sih maksud kedua hal tersebut? Mari kita bahas satu persatu yah.


Numeric Value

Cara yang paling banyak digunakan dalam menetapkan warna adalah dengan menggunakan numeric value. Mengapa demikian? Dengan menggunakannya kita dapat menentukan warna yang kita inginkan dengan tepat. Terlebih dengan bantuan color picker maka kita tak perlu repot memahami dan mencari nilai kode warna secara manual.

Berikut contoh penulisan nilai warna pada CSS dengan numeric value:

      1
      2
      3
      4
      5
      6
      7
      8
 
/* Warna hijau menggunakan format RGB */
      color: rgb(78,231,23);
       
      /* Warna hijau Menggunakan format HEX */
      color: #4ee717;
       
      /* Warna hijau menggunakan format HSL (hanya di CSS3)*/
      color: hsl(104, 82%, 50%);

Kode tersebut merupakan nilai warna hijau yang dituliskan dalam beberapa format. Dari kode tersebut kita tahu tidak hanya format RGB yang dapat digunakan dalam menetapkan warna. Selain RGB ada juga format Hex dan HSL (Hue, Saturation, Light).


Predefined Color Name

Menentukan warna bisa juga dilakukan selain dengan menggunakan format angka. Kita bisa menggunakan sebuah kata seperti blue, yellow, red dan lainnya 

      1
      2
      3
 
color: black;
      color: white;
      color: blue;

Dengan menggunakan kata tentu kita dapat lebih mudah dan cepat dalam menentukan warna, tetapi mungkin hanya warna dasar yang sudah kita hafal. Faktanya, varian warna ada banyak jumlahnya! Hampir seluruh browser saat ini mendukung 140 nama warna, wow! Kita dapat melihat apa saja warna yang tersedia pada tautan berikut: https://www.w3schools.com/colors/colors_names.asp.


Opacity

CSS3 mengenalkan properti opacity yang dapat menspesifikasikan nilai transparan pada elemen HTML. Nilai dari properti opacity merupakan angka desimal antara 0.0 hingga 1.0, jika kita menetapkan nilainya 0.5 itu berarti 50% transparan. 

      1
      2
      3
      4
 
div#opacity {
         background-color: red;
         opacity: 0.5;
      }

Jika elemen div menerapkan rule tersebut, maka akan tampak seperti ini:


Selain pada elemen, menetapkan opacity juga dapat kita lakukan pada warna. Untuk melakukannya bisa menggunakan format rgba, dan hsla, di mana format ini merupakan format rgb ditambahkan nilai alpha. Selain itu, dapat juga dilakukan menggunakan format hex dengan memberikan dua digit dibelakang kode hexadecimal. 

      1
      2
      3
      4
      5
 
p {
         color: rgba(78,231,23, 0.5);
         color: hsla(104, 82%, 50%, 0.5);
         color: #4ee717ee; /*ee merupakan digit tambahan untuk menerapkan opacity*/
      }

Text dan Background Color


Text Color (Foreground Color)

Pada sub-modul Pendahuluan Styling kita sudah mencoba bagaimana mudahnya mengganti warna pada teks yang ditampilkan. Sejujurnya tidak ada lagi yang perlu kita bahas disini. Kita dapat dengan mudahnya mengganti warna teks dengan properti color.


Nilai dari properti color dapat berupa predefined color name atau sebuah numeric value dengan menggunakan RGB, RGBA, HEX, HSL, ataupun HSLA. Berikut sebagai contoh, seluruh elemen <p> akan diberi warna abu-abu (gray) dengan menggunakan beberapa cara yang ada: 

      1
      2
      3
      4
 
p { color: gray; }
      p { color: #666666; }
      p { color: #666; }
      p { color: rgb(102,102,102); }

Catatan: Terdapat dua cara dalam penetapan nilai color menggunakan format hexadecimal, yaitu dengan menyebutkan digit hexadecimal secara lengkap (6 digit) dan menyebutkan tiga digit (paling sedikit) hexadecimal. Pada contoh diatas, nilai #666666 dan #666 memiliki hasil yang sama. Artinya setiap digit dari #666 akan melakukan duplikasi dari digit pertama ke digit kedua, digit ketiga ke digit keempat dan digit kelima ke digit keenam, sesuai urutan pendefinisiannya.

Properti color dapat diaplikasikan ke seluruh elemen yang ada pada HTML dan nilainya dapat diturunkan pada elemen turunannya. Jadi kita bisa mengubah warna teks pada seluruh dokumen HTML dengan menerapkan properti color pada elemen <body>, seperti ini: 

      1
      2
      3
 
body {
         color: steelblue;
      }

Sehingga tampak seperti ini:


Background Color

CSS memperlakukan setiap elemen HTML seperti berada pada sebuah kotak (kita akan mempelajari ini pada pembahasan box model). Properti background-color dapat mengatur warna latar belakang dari kotak tersebut.

Sama seperti text color, kita dapat menspesifikasikan warna yang dipilih dengan numeric values atau dengan predefined color name. Properti background-color akan bernilai transparan jika tidak kita tetapkan (default).

Kebanyakan browser menetapkan nilai putih sebagai standar untuk nilai background-color, tetapi nilai standar tersebut dapat pengguna ubah menggunakan pemilihan mode cerah atau mode gelap pada pengaturan browser-nya. Maka untuk memastikan website kita memiliki tampilan background color putih, kita dapat terapkan nilai background-color: white; pada elemen <body>.

Biasanya kita juga menerapkan padding saat menetapkan background-color guna memberi jarak antara konten dan tepi kotak elemen. 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
 
<!doctype html>
      <html lang="en">
      <head>
         <style>
             body {
                 font-family: sans-serif;
             }
       
             div#content {
                 background-color: rgb(200, 200, 200);
                 padding: 20px 15px;
             }
       
             #content > h2 {
                 background-color: #4c5450;
                 padding: 15px;
                 color: white;
             }
       
             #content > h3 {
                 background-color: #60d0a8;
                 padding: 15px;
                 color: white;
             }
       
             #content > p {
                 background-color: hsl(56, 62%, 85%);
                 padding: 20px;
             }
         </style>
      </head>
      <body>
      <div id="content">
         <h2>Lorem Ipsum</h2>
         <h3>Dolor sit amet lorem ipsum</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus officiis perspiciatis quidem ratione? Distinctio eos ex expedita iusto necessitatibus velit, veritatis. Aliquid, debitis dignissimos in iusto magnam nulla sed tempora.</p>
      </div>
      </body>
      </html>

Jika berkas di atas dijalankan pada browser, maka hasilnya akan tampak seperti ini:


Box Model

Pada pembahasan background-color disinggung bahwa setiap elemen ditampilkan seperti sebuah boxes atau kotak. Box model merupakan salah satu konsep dari CSS. Setiap elemen yang dibuat pada HTML akan menciptakan sebuah kotak untuk menampung kontennya. Layaknya bentuk kotak pada umumnya, pasti terdapat nilai seperti width (lebar), height (tinggi), padding (tebal lapisan), border (garis tepi), dan juga jarak. Pada CSS nilai - nilai tersebut dapat kita atur.

Kita mungkin sudah sedikit paham bagaimana konsep box model ini bekerja dengan mengikuti latihan sebelumnya. Di sini kita akan membahas lebih lanjut mengenai properti apa saja yang dapat memanipulasi boxes tersebut. Tapi sebelum itu, kita pahami lebih tentang konsep box atau kotak pada elemen HTML agar kita dapat gambaran lebih tentang hal tersebut.


Box Element


Seperti yang kita lihat pada gambar di atas, setiap elemen pada HTML baik itu block-level atau inline elemen, akan menghasilkan sebuah kotak elemen. Perhatikan ilustrasi berikut agar lebih jelasnya:


  • Content : Merupakan sebuah inti dari kotak elemen yang merupakan konten dari elemen itu sendiri
  • Padding : Area yang menjadi jarak antara border elemen dengan konten yang ditampilkan. Ketika kita menerapkan background-color maka warna tersebut diterapkan pada area padding. Penerapan ukuran padding pada elemen merupakan opsional.
  • Border : Merupakan garis terluar yang mengelilingi konten dan padding. Penerapan border pada elemen merupakan opsional.
  • Margin : Berbeda dengan padding, margin merupakan area jarak diluar dari border. Pada ilustrasi diatas, margin ditunjukkan dengan warna merah muda namun pada aslinya margin selalu transparan dan penerapan margin pada elemen merupakan opsional.
  • Edge of element : merupakan batas dari suatu elemen. Di dalamnya terdapat margin, border, padding dan konten. Pada ilustrasi di atas, batas elemen ditunjukkan dengan garis putus tetapi pada aslinya batas elemen selalu tidak terlihat.

Box Dimensions

Secara standar sebuah box yang dihasilkan tiap elemen selalu cukup untuk menampung konten. Tetapi kita dapat mengatur nilai dimensi dari box tersebut dengan properti width dan height.

Cara yang paling banyak digunakan dalam menentukan dimensi kotak adalah dengan menggunakan pixel, persentase, atau ems. Secara tradisional, pixel merupakan cara yang paling populer karena kita dapat merancang dan mengontrol ukuran secara akurat.

Berbeda ketika kita menggunakan persentase, ukuran kotak akan relative atau menyesuaikan dari ukuran lain, seperti ukuran jendela browser atau ukuran induk yang menaunginya. Sedangkan ketika menggunakan ems, nilai dimensi kotak akan menyesuaikan berdasarkan ukuran teks yang ditampilkan pada konten elemen tersebut.

Pada saat ini banyak developer mulai merancang menggunakan persentase dan ems untuk menetapkan ukuran box agar dapat menyesuaikan dengan berbagai macam ukuran layar. 

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
 
<!doctype html>
    <html lang="en">
    <head>
       <style>
           .box {
               height: 300px;
               width: 300px;
               background-color: #11C5C6;
           }
           p {
               height: 75%;
               width: 75%;
               background-color: #FBDD1C;
           }
       </style>
    </head>
    <body>
    <div class="box">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus officiis perspiciatis quidem ratione? Distinctio eos ex expedita iusto necessitatibus velit, veritatis. Aliquid, debitis dignissimos in iusto magnam nulla sed tempora.</p>
    </div>
    </body>
    </html>

Berkas di atas jika kita buka melalui browser akan tampak seperti ini:


Pada contoh di atas kita dapat melihat elemen <div> memiliki dimensi elemen dengan lebar 300px dan tinggi 300px. Di dalamnya terdapat elemen <p> yang memiliki ukuran elemen 75% dari lebar dan tinggi elemen induknya. Dengan begitu berarti elemen <p> memiliki ukuran 225px untuk panjang dan lebarnya.


Limiting Dimension

Beberapa website yang ada sekarang menampilkan layout yang dapat melebar dan menyempit mengikuti ukuran layar pengguna. Pada prinsip tampilan tersebut mungkin kita memerlukan sebuah limitasi ukuran yang harus ditampilkan agar konten selalu dapat ditampilkan secara proporsional. Untuk melakukannya kita manfaatkan properti min-width dan max-width.

  • min-width : merupakan properti yang digunakan untuk menetapkan nilai lebar minimal yang harus dimiliki elemen.
  • max-width : merupakan properti yang digunakan untuk menetapkan nilai lebar maksimal yang harus dimiliki elemen.

Keduanya merupakan properti yang sangat membantu untuk memastikan konten halaman dapat terbaca oleh pengguna (terutama ketika pengguna menggunakan ponsel). Misalnya, kita dapat menggunakan properti max-width untuk memastikan bahwa baris teks yang muncul tidak terlalu lebar. 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
 
<!doctype html>
      <html lang="en">
      <head>
         <style>
             .content {
                 max-width: 800px;
                 height: 400px;
                 margin: 0 auto;
                 background-color: deeppink;
             }
       
             p {
                 font-size: 1.5em;
                 font-weight: bold;
             }
         </style>
      </head>
      <body>
      <div class="content">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate eius explicabo fuga iusto magni minus odit praesentium, quasi quisquam quos repellat suscipit tempora tenetur? Assumenda cum laborum officiis quos ratione.</p>
      </div>
      </body>
      </html>

Berkas di atas jika kita buka pada browser akan tampak seperti ini:


Dengan cara yang sama, mungkin kita juga perlu membatasi ukuran panjang. Kita bisa gunakan min-height dan max-height.


Overflowing Content

Dimensi box yang dihasilkan elemen selalu cukup untuk menampung konten tetapi hal ini tidak berlaku jika kita tetapkan secara manual panjang dan lebarnya. Tak jarang terjadi overflow ketika kita menerapkan ukuran pada elemen tetapi konten di dalamnya begitu banyak. Contohnya seperti berikut: 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
 
<!doctype html>
      <html lang="en">
      <head>
         <style>
             div {
                 height: 200px;
                 width: 200px;
                 background-color: lightgreen;
             }
         </style>
      </head>
      <body>
      <div>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet corporis cupiditate dignissimos error expedita explicabo facere facilis, ipsam itaque libero modi officiis optio perspiciatis provident quam sequi voluptatem.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut corporis facere harum inventore iure, quisquam recusandae reprehenderit veritatis voluptatum. Ducimus exercitationem illo nam sapiente suscipit, tenetur ullam ut voluptas!</p>
      </div>
      </body>
      </html>

Berkas di atas jika kita buka pada browser akan tampak seperti ini:


Untuk menangani kasus seperti ini kita bisa gunakan properti overflow. Properti ini dapat bernilai:

  • visible : Merupakan nilai default pada properti ini. Konten yang tidak tertampung (overflow) akan tetap ditampilkan seperti pada standarnya.
  • hidden : Jika terjadi overflow, maka konten yang tidak tertampung akan disembunyikan.
  • scroll : Memunculkan scroll bar pada pinggir elemen, sehingga konten yang tidak tertampung akan ditampilkan dengan scroll bar. Jika menggunakan nilai ini, scroll bar akan tetap muncul walaupun konten tidak terjadi overflow.
  • auto : Sama seperti scroll, bedanya jika tidak terjadi overflow, maka nilai visible yang akan diterapkan.


Box-sizing

Pada CSS2 ukuran lebar dan panjang elemen mengacu pada konten elemen (content-box). Itu berarti ukuran elemen seluruhnya merupakan nilai panjang dan lebar yang kita spesifikasikan ditambah dengan nilai padding dan border yang diterapkan pada elemen. Hal tersebut membuat sebagian developer menjadi sulit menetapkan ukuran dimensi.

Setelah CSS3 kita dapat memilih tipe pengukuran lain dalam menentukan dimensi elemen. Dengan menggunakan properti box-sizing kita dapat menentukannya berdasarkan border box, di mana ukuran elemen sudah termasuk content, padding dan border. Dengan metode ini, hasil elemen yang ditampilkan (termasuk padding dan border) akan memiliki dimensi yang sama persis seperti yang kita tentukan. 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
 
<!doctype html>
      <html lang="en">
      <head>
         <style>
             div {
                 height: 200px;
                 width: 200px;
                 background-color: lightgreen;
                 border: 10px solid cornflowerblue;
                 padding: 20px;
             }
       
             .content {
                 box-sizing: content-box;
             }
       
             .box {
                 box-sizing: border-box;
             }
         </style>
      </head>
      <body>
      <div class="content">
      </div>
      <p>Elemen menerapkan <code>box-sizing: content-box;</code> Ukuran box secara keseluruhan akan menjadi 260px lebar, 260px tinggi; 260 = 200 + 20 + 20 + 10 + 10</p>
      <br>
      <div class="box">
      </div>
      <p>Elemen menerapkan <code>box-sizing: border-box;</code> Ukuran box akan tetap 200px lebar, 200px tinggi meskipun menerapkan padding dan border</p>
      </body>
      </html>

Berkas di atas jika kita buka pada browser akan tampak seperti ini:


Border

Border merupakan sebuah garis yang mengelilingi area konten dan padding (opsional). Kita bisa mengatur tipe, ketebalan, serta warna garis yang ditampilkan sesuai dengan yang kita inginkan. Kita juga bisa mengatur dalam menampilkan sebagian atau keseluruhan garis pada elemen. Mari kita eksplorasi apa saja properties yang dapat mengatur border.


Border Width

Properti border-width digunakan untuk mengatur ketebalan dari border. Nilai dari properti ini dapat berupa pixel atau menggunakan predefined names value seperti thin, medium, dan thick. Kita tidak bisa menggunakan nilai persentase (%) pada properti ini.

Kita dapat mengatur ukuran garis secara individual dengan menggunakan empat properti terpisah seperti ini: 

    1
    2
    3
    4
    5
    6
 
.box {
       border-top-width: 2px;
       border-right-width: 1px;
       border-bottom-width: 1px;
       border-left-width: 2px;
    }

Tetapi kita juga dapat menetapkan nilai keempatnya sekaligus dalam satu properti seperti ini 

    1
    2
    3
 
.box {
      border-width: 2px 1px 1px 2px; /*top right bottom left*/
    }

Properti border-width dapat ditentukan dengan menggunakan satu, dua, tiga, atau empat nilai. Berikut penjelasannya:

  • Ketika satu nilai ditentukan, maka nilai berlaku untuk empat sisi.
  • Ketika dua nilai ditentukan, nilai pertama berlaku untuk sisi atas dan bawah, nilai kedua untuk sisi kiri dan kanan.
  • Ketika tiga nilai ditentukan, nilai pertama berlaku untuk sisi atas, nilai yang kedua untuk sisi kiri dan kanan, nilai ketiga untuk sisi bawah.
  • Ketika empat nilai ditentukan, nilai pertama berlaku untuk sisi atas, nilai yang kedua untuk sisi kanan, nilai yang ketiga untuk sisi bawah, dan nilai yang keempat untuk sisi kiri. Urutan tersebut berdasarkan arah jarum jam (clockwise).

Border Style

Kita bisa menetapkan tipe border dengan menggunakan properti border-style. Berikut nilai - nilai yang dapat digunakan pada properti ini:

Nilai Properti Penjelasan
solid Tipe garis padat (tidak terputus - putus)
dotted Garis yang dibentuk dari serangkaian titik-titik (jika ketebalan garis 2px, maka titik-titik akan berukuran 2px dan memiliki jarak 2px antar titiknya).
dashed Garis yang dibentuk dari serangkaian garis pendek.
double Garis yang dibentuk dari dua buah garis padat.
groove Tipe garis yang berbentuk seperti frame
hidden Digunakan untuk menyembunyikan garis pada elemen.

Kita juga bisa menetapkan tipe garis secara individual pada sisi elemen dengan menggunakan empat properti terpisah. Contohnya seperti ini: 

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
 
.box {
       border-top-style: solid;
       border-right-style: dotted;
       border-bottom-style: groove;
       border-left-style: double;
     
       border-width: 4px;
       border-color: red;
       width: 200px;
       height: 50px;
    }

Jika kita menerapkan rule seperti di atas, maka hasilnya akan tampak seperti ini:


Border Color

Properti terakhir adalah border-color. Properti ini digunakan untuk menentukan warna pada garis dengan menggunakan nilai RGB, Hex, atau nama warna pada CSS. 

    1
    2
    3
    4
    5
    6
    7
    8
 
/* menggunakan rgb format */
    border-color: rgb(80, 138, 212);
     
    /* menggunakan format hex */
    border-color: #4ee717;
     
    /* menggunakan nama warna */
    border-color: red;

Sama seperti properti border yang lain, kita dapat menentukan warna pada individual sisi pada elemen dengan menggunakan properti yang terpisah. 

    1
    2
    3
    4
 
border-top-color: #919191;
    border-right-color: #111111;
    border-bottom-color: #4ee717;
    border-left-color: #00c8eb;

Tetapi kita juga dapat menetapkan nilai keempatnya sekaligus dalam satu properti seperti ini: 

1
 
border-color: #919191 #111111 #4ee717 #00c8eb;

Hasilnya seperti ini:


Shorthand

Untuk menerapkan border pada elemen kita harus mendefinisikan seluruh properti border yang ada. Dimulai dari menetapkan ketebalan (border-width), tipe (border-style), dan warna (border-color). Jika kita lupa menetapkan salah satu properti tersebut, maka garis tidak akan nampak pada elemen.

Dengan begitu tentu untuk menetapkan border pada elemen, kita perlu menuliskan properti yang banyak bukan? Ya memang, tetapi CSS menyediakan jalan pintas (shorthand) untuk membuat border dengan satu properti saja. Properti border memiliki tiga buah nilai yang digunakan untuk menentukan ketebalan, tipe dan warna pada border. Berikut contoh penerapannya: 

    1
    2
    3
    4
 
.box {
       border: 4px dashed #00a2c6;
       width: 200px;
    }

Hasilnya seperti ini:


Perlu kita perhatikan bahwa penulisan urutan harus benar. Nilai pertama digunakan untuk ketebalan, yang kedua untuk tipe, dan yang ketiga untuk warna garis.


Padding

Padding merupakan jarak antara area konten dan border. Padding banyak diterapkan pada elemen jika elemen tersebut menerapkan warna latar atau pun border. Padding memberikan sedikit ruang sehingga konten di dalam elemen dapat lebih nyaman untuk ditampilkan. Contohnya: 

   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
 
<!doctype html>
  <html lang="en">
  <head>
     <style>
         p {
             border: 4px solid #00a2c6;
             width: 275px;
         }
   
         p.example {
             padding: 10px;
         }
     </style>
  </head>
  <body>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur beatae commodi dignissimos eaque fugiat inventore maiores neque nisi sint. A dolore eaque fuga, iste minus porro provident sit tempore ullam.</p>
  <p class="example">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda blanditiis cum dignissimos enim esse excepturi illum inventore maiores minima, nemo nisi obcaecati officia pariatur qui quibusdam sed. Ab, dolorum?</p>
  </body>
  </html>

Jika berkas di atas dijalankan pada browser, maka akan tampak seperti ini:


Seperti yang kita lihat, paragraf kedua jauh lebih nyaman dibaca karena terdapat jarak antara teks dan border dari kotak. Kotak pun menjadi sedikit lebar karena adanya padding.

Pixel merupakan satuan yang sering digunakan dalam menetapkan nilai properti ini (meskipun kita bisa juga menggunakan persentase atau ems). Jika menetapkan menggunakan persentase, maka nilai akan menjadi relatif pada elemen induk atau jendela browser (jika tidak memiliki induk elemen).

Kita dapat menentukan nilai padding yang berbeda untuk masing-masing sisi elemen dengan menggunakan: 

  1
  2
  3
  4
 
padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;

Atau dengan menggunakan shorthand seperti berikut:

1
 
padding: 10px 15px 10px 15px;

Sehingga padding akan diterapkan seperti gambar di bawah ini.


Margin

Seperti halnya padding, margin merupakan ruang atau jarak pada sebuah elemen. Namun jarak tersebut terletak di luar dari konten dan border elemen. Margin digunakan untuk menjaga elemen agar tidak bertabrakan satu sama lain atau dari tepi jendela browser.

Sebelum menerapkan margin

Setelah menerapkan margin 20px.


Margin ini bersifat collapsed, yang artinya dapat menumpuk jika terdapat dua margin yang saling bertumpukan. Anda bisa melihat pada margin bawah dan margin atas pada kedua elemen tersebut. Hal itu menjelaskan mengapa jarak vertikal antar elemen tersebut tidak 40px melainkan 20px. Jika terjadi pertumpukan margin, maka nilai yang paling besar yang akan diterapkan.

Kita dapat menentukan nilai margin yang berbeda untuk masing-masing sisi elemen dengan menggunakan: 

  1
  2
  3
  4
 
margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 20px;
  margin-left: 25px;

Tapi kita juga dapat menggunakan shorthand untuk menetapkan keempat nilai tersebut dalam satu property 

1
 
margin: 10px 15px 20px 25px;

Kita juga bisa menggunakan dua nilai saja untuk menentukan nilai margin vertikal dan horizontal. 

1
 
margin: 10px 15px; /* top dan bottom bernilai 10px, left dan right bernilai 15px */

Centering Content

Bagaimana meletakkan sebuah kotak tepat pada tengah sebuah halaman atau di dalam elemen induknya? Aturlah margin kanan dan kiri dengan nilai auto. Lebih lanjut, kita juga harus menentukan lebar dari kotak tersebut (menggunakan properti width). Jika tidak, kotak akan mengambil lebar penuh pada halaman atau induk elemen.

Setelah kita menentukan lebar kotak dan mengatur margin kiri dan kanan menjadi auto, maka secara otomatis browser akan memberi jarak yang sama di setiap sisi horizontal kotak, sehingga membuat kotak berada di tengah halaman.

Berikut contohnya:

   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
 
<!DOCTYPE html>
  <html lang="en">
  <head>
     <meta charset="UTF-8">
     <title>Margin</title>
     <style>
         .center {
             margin: 0 auto;
         }
         .box {
             width: 50%;
             border: 4px solid darkblue;
             padding: 20px;
             margin-bottom: 20px;
         }
     </style>
  </head>
  <body>
  <div class="box">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur autem commodi dignissimos dolores ea, eaque,
         earum esse harum illo in incidunt molestias nam non qui recusandae sunt ullam veniam vero!</p>
  </div>
  <div class="box center">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi ea, id. Aliquid consectetur dolorum
         exercitationem ipsam, necessitatibus nostrum pariatur sunt! Accusantium architecto at dolorem itaque quisquam
         quod soluta sunt voluptatum.</p>
  </div>
  </body>
  </html>

Jika berkas tersebut kita buka pada browser, maka akan tampak seperti berikut:


Display Roles

Kita pernah membahas mengenai inline dan block pada sub-modul Pendalaman HTML. Kita telah paham bahwa standarnya, tiap elemen HTML memiliki dua tipe yaitu block dan inline. Untuk lebih jelasnya berikut sifat - sifat yang ada pada elemen block dan juga inline:

inline element:

  • Elemen HTML yang secara default tidak menambahkan baris baru ketika dibuat.
  • Nilai lebar dan tinggi elemen inline sebesar konten di dalamnya, dan tidak dapat diubah.
  • Margin dan padding hanya mempengaruhi elemen secara horizontal, tidak vertikal.

block element:

  • Elemen HTML secara default menambahkan baris baru ketika dibuat.
  • Jika tidak diatur lebarnya, lebar dari elemen block akan memenuhi lebar dari browser atau elemen yang menaunginya.
  • Kita dapat mengatur dimensi dari elemen block.
  • Di dalam elemen block, kita dapat menyimpan tag elemen HTML lainnya.

Dengan menggunakan properti display, kita dapat mengubah sebuah elemen inline menjadi block, begitupun sebaliknya. Dalam hal ini, properti ini juga dapat digunakan untuk menyembunyikan elemen yang ditampilkan.

Nilai dari properti ini dapat berupa:

  • inline : digunakan untuk mengubah elemen block berperilaku seperti elemen inline.
  • block : digunakan untuk mengubah elemen inline berperilaku seperti elemen block.
  • inline-block : membuat elemen block tidak menambahkan baris baru ketika dibuat, namun tetap mempertahankan sifat lain dari elemen block.
  • none : digunakan untuk menyembunyikan elemen dari halaman.

Properti ini banyak sekali digunakan dalam kasus pembuatan navigasi. Biasanya navigasi dibuat menggunakan elemen list yang memiliki sifat block, sehingga item list selalu ditampilkan dalam baris baru. Dengan menggunakan properti display, kita dapat mengubah perilaku elemen list tersebut dengan menerapkan inline, sehingga item list dapat ditampilkan secara horizontal. 

   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
 
<!DOCTYPE html>
  <html lang="en">
  <head>
     <meta charset="UTF-8">
     <title>Display</title>
     <style>
         li {
             display: inline;
   
             margin-left: 5px;
         }
     </style>
  </head>
  <body>
  <ul>
     <li>Home</li>
     <li>Product</li>
     <li>About</li>
     <li>Contact</li>
  </ul>
  </body>
  </html>

Jika berkas tersebut dibuka pada browser, maka akan tampak seperti berikut:


Box Shadow

Pada materi formatting text kita sudah belajar cara menambahkan drop shadow pada teks. Pada CSS3 kita juga dapat menambahkan drop shadow di sekitar kotak elemen (tidak termasuk margin) dengan menggunakan properti box-shadow.

Nilai dan cara kerja dari properti box-shadow mirip seperti text-shadow, yaitu nilainya menentukan jarak vertikal dan horizontal, tingkat keburaman, dan warna pada bayangan. Pada box shadow, kita juga dapat menentukan tingkat sebaran (spread) bayangan. Semakin besar nilai, bayangan yang nampak akan semakin luas. Berikut contoh penerapan box shadow pada CSS: 

1
 
box-shadow: 6px 6px 5px 10px #666666;

Jika rules tersebut diterapkan pada box, maka akan tampak seperti ini:


Berikut penjelasan tiap-tiap nilai dari propertinya:

  • Nilai pertama : menunjukkan seberapa jauh ke kiri atau kanan (horizontal) bayangan harus ditampakkan.
  • Nilai kedua : menunjukkan jarak ke atas atau ke bawah (vertical) bayangan harus ditampakkan.
  • Nilai Ketiga (opsional) : menentukan tingkat keburaman yang harus diterapkan pada bayangan.
  • Nilai Keempat (opsional) : menentukan tingkat sebaran (spread) bayangan. Semakin besar nilai yang ditentukan, bayangan yang nampak pun semakin luas.
  • Nilai Kelima : menentukan warna yang digunakan pada bayangan.

Rounded Corner

CSS3 memperkenalkan kemampuan untuk membuat rounded corner atau sudut bundar pada box dengan menggunakan properti border-radius. Nilai dari properti ini merupakan tingkat lengkungan border dalam pixel. 

  1
  2
  3
 
.rounded {
     border-radius: 10px;
  }

Jika diterapkan, pinggiran border akan tampak seperti ini:


Kita bisa menetapkan nilai pada individu siku kotak dengan menggunakan properti yang terpisah, seperti ini: 

  1
  2
  3
  4
  5
  6
 
.rounded {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 10px;
     border-bottom-left-radius: 5px;
     border-top-left-radius: 10px;
  }

Atau kita dapat menggunakan shorthand sehingga dapat menetapkan keempat nilainya dalam satu properti. 

  1
  2
  3
 
.rounded {
     border-radius: 10px 5px 10px 5px;
  }

tiap sisi dari border memiliki ketajaman atau ketumpulan yang berbeda seperti gambar di bawah ini.


Menerapkan Box Model pada Halaman Profil

Pada latihan sebelumnya, kita sudah menerapkan font yang didapatkan dari Google Font dengan properti font-family dan mengubah warna font dengan menggunakan properti color. Nah setelah mempelajari komponen box seperti padding, border, dan margin saatnya kita terapkan pada proyek yang sudah kita buat sebelumnya. Mulai dari menetapkan ukuran gambar, membuat efek gaya kartu, dan membuat jumbotron.

Hingga pada akhir latihan ini kita dapat mempercantik tampilan website profil tampak seperti ini:


Sudah siap? Silakan buka kembali proyeknya dengan text editor yang Anda miliki.


Menetapkan ukuran pada gambar

Sekarang saatnya kita mulai terapkan apa yang baru kita pelajari. Langkah pertama mari kita ubah dimensi dari gambar yang kita tampilkan. Pada berkas style.css, buat rule baru untuk selector .featured-images dengan properti dan nilai sebagai berikut: 

    1
    2
    3
    4
 
.featured-image {
       width: 100%;
       max-height: 300px;
    }

Kemudian terapkan rule tersebut pada seluruh elemen gambar kecuali gambar logo kota Bandung yang terdapat di dalam elemen <aside>. Untuk menerapkannya kita tuliskan class atribut dengan nilai featured-image. 

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
 
<img src="assets/image/history.jpg" class="featured-image" alt="sejarah">
     
    ...
     
    <img src="assets/image/geografis.jpg" class="featured-image" alt="geografis">
     
    ...
     
    <img src="assets/image/farm-house.jpg" class="featured-image" alt="farm house">
     
    ...
     
    <img src="assets/image/bosscha.jpg" class="featured-image" alt="bosscha">

Setelah menerapkannya maka tampilan gambar akan menjadi seperti ini:


Gambar yang ditampilkan jadi memenuhi lebar jendela browser. Namun karena kita menetapkan juga properti max-height, gambar yang ditampilkan menjadi tidak proporsional. Solusinya kita tambahkan properti object-fit: cover; dan object-position: center; pada .featured-image selector. 

    1
    2
    3
    4
    5
    6
 
.featured-image {
       width: 100%;
       max-height: 300px;
       object-fit: cover;
       object-position: center;
    }

Kedua properti tersebut membuat gambar yang ditampilkan dapat menyesuaikan lebar dan panjang dengan mempertahankan kualitas rasio aslinya. Tetapi untuk menyesuaikannya terdapat area gambar yang terpotong atau tidak ditampilkan, tetapi tampilan gambar akan tetap proporsional.


Selanjutnya kita atur juga ukuran gambar logo kota Bandung pada elemen <aside>. Agar logo tampak tidak terlalu besar kita atur properti width dengan nilai 200px. Silakan buat rules baru dengan selector .profile img, kemudian tuliskan properti width dengan nilainya. 

    1
    2
    3
 
.profile img {
       width: 200px;
    }

Sehingga sekarang logo akan nampak lebih kecil.


Menerapkan card style pada elemen <article>

Selanjutnya kita atur tampilan pada tiap elemen <article>, buat elemen tersebut bergaya card effect dengan menerapkan properti box-shadow dan border-radius sehingga hasilnya akan tampak seperti ini:


Pertama kita buat rule baru dengan selector .card, kemudian terapkan properti dan nilainya sebagai berikut: 

    1
    2
    3
    4
 
.card {
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
       border-radius: 5px;
    }

Selanjutnya terapkan rule tersebut pada seluruh elemen <article> yang ada. Untuk menerapkannya, tambahkan atribut class dengan nilai card. 

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
 
<article id="sejarah" class="card">
     
    ...
     
    <article id="geografis" class="card">
     
    ...
     
    <article id="wisata" class="card">
    ...
     
    <aside>
            <article class="profile card">
    ....

Sekarang tiap sisi elemen <article> akan tampak dikelilingi oleh drop shadow dan memiliki ujung yang bulat pada tiap sisinya.


Jika dirasa drop shadow tak terlalu jelas, kita bisa mengubah nilainya. Agar mudah dalam menentukan nilai drop shadow yang kita inginkan, kita bisa gunakan tools yang tersedia secara online pada tautan berikut: https://www.cssmatic.com/box-shadow.

Selanjutnya kita perbaiki tepian konten pada card karena tampak terlalu sempit dari sisi cardnya. Alhasil, konten agak sulit dibaca. Kita bisa mengaturnya dengan properti margin dan padding. Silakan tambahkan properti dan nilai berikut pada rule .card: 

    1
    2
    3
    4
    5
    6
 
.card {
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
       border-radius: 5px;
       padding: 20px;
       margin-top: 20px;
    }

Sekarang konten di dalam card lebih proporsional dan mudah dibaca, bukan?


Menerapkan Jumbotron dan Navigasi pada header

Selanjutnya kita akan mengatur header dengan membuat efek jumbotron dan memperbaiki tampilan navigasi menjadi nampak seperti ini:


Sebagai langkah awal, yuk kita buat rule baru dengan selector .jumbotron lalu terapkan properti dan nilainya seperti ini: 

    1
    2
    3
    4
    5
    6
    7
 
.jumbotron {
      padding: 60px;
      background-color: #00c8eb;
      text-align: center;
      font-size: 20px;
      color: white;
    }

Lalu pada berkas HTML, letakkan elemen <h1> dan <p> yang terdapat pada <header> dengan menggunakan <div> yang diberikan atribut class jumbotron. Sehingga struktur HTML pada elemen <header> tampak seperti ini: 

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
 
<header>
      <div class="jumbotron">
        <h1>Bandung</h1>
        <p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.</p>
      </div>
      <nav>
        <ul>
          <li><a href="#sejarah">Sejarah</a></li>
          <li><a href="#geografis">Geografis</a></li>
          <li><a href="#wisata">Wisata</a></li>
        </ul>
      </nav>
    </header>

Sehingga sekarang header akan nampak dengan efek jumbotron.


Lanjut, kita akan memperbaiki tampilan navigasi agar terlihat cocok dengan header yang ditampilkan. Seperti biasa, buatlah rule baru dengan selector nav li. Selector tersebut akan mengatur elemen <li> yang menjadi turunan dari elemen <nav>, berikan properti dan nilai berikut pada selector tersebut: 

    1
    2
    3
    4
    5
 
nav li {
      display: inline;
      list-style-type: none;
      margin-right: 20px;
    }

Nilai inline pada properti display akan membuat elemen <li> menerapkan sifat inline, sehingga elemen akan ditampilkan tanpa membuat baris baru. Dan properti list-style-type dengan nilai none akan menghilangkan tanda titik yang dihasilkan tiap item pada list. Dengan begitu navigasi akan nampak seperti ini:


Selanjutnya beri background-color dan ubah warna teks pada navigasi agar nampak sesuai dengan header. Tuliskan rule baru dengan selector nav kemudian atur background-color dan padding dengan nilai berikut: 

    1
    2
    3
    4
 
nav {
      background-color: #00a2c6;
      padding: 5px;
    }

Kemudian untuk mengatur warna teks pada navigasi, kita tambahkan properti color pada selector nav a yang sudah kita buat pada latihan sebelumnya. 

    1
    2
    3
    4
    5
    6
 
nav a {
      font-size: 18px;
      font-weight: 400;
      text-decoration: none;
      color: white;
    }

Dengan begitu navigasi akan terlihat sesuai dengan header yang ditampilkan.


Pada langkah ini, website yang kita bangun sudah mulai tampak menarik bukan?


Menyesuaikan Padding dan Margin pada body dan elemen <main>

Terakhir kita akan menyesuaikan margin dan padding yang ditampilkan pada body dan elemen <main>. Sehingga akan tampak seperti ini:


Pertama kita hilangkan nilai margin dan padding standar browser dengan menuliskan properti margin dan padding yang diberi nilai 0 pada body selector. 

    1
    2
    3
    4
    5
 
body {
      font-family: 'Quicksand', sans-serif;
      margin: 0;
      padding: 0;
    }

Dengan begitu layout yang ditampilkan akan memenuhi seluruh lebar dan tinggi dari jendela browser.


Tetapi konten yang terdapat di dalam elemen <main> perlu sedikit jarak agar konten yang ditampilkan sedikit nyaman untuk dilihat. Kita dapat atur jarak tersebut dengan menambahkan padding pada selector main. Silakan tuliskan rule baru dengan selector main dan beri nilai 20px pada properti padding. 

    1
    2
    3
 
main {
      padding: 20px;
    }

Nah sekarang website pun jadi lebih nyaman dilihat.


Pada latihan selanjutnya kita akan memindahkan elemen aside sehingga berada di samping elemen content. Untuk melakukannya kita harus mengenal dulu apa itu positioning dan floating. Sampai jumpa di materi selanjutnya ya!


Positioning

Kita sudah mengetahui cara mengubah posisi dari sebuah elemen dengan menggunakan margin. Namun ketika melakukannya, posisi elemen lain di sekitarnya akan terpengaruh. Lantas bagaimana jika kita ingin memindahkan tanpa mengganggu posisi elemen lainnya? Solusinya kita perlu mengubah positioning schema dengan menggunakan properti position dalam mengontrol letak elemen tersebut. Berikut nilai dari properti position yang ada pada CSS:

  • Normal Flow / Static Flow : Merupakan default behaviour yang dimiliki elemen, di mana setiap elemen block akan ditampilkan dalam baris baru ketika dibuat. Sehingga setiap elemen block selalu muncul di bawah dari elemen block sebelumnya. Bahkan jika masih terdapat ruang kosong pada samping elemennya, mereka tidak akan nampak bersebelahan.
  • Relative Positioning : Membuat elemen bisa berpindah posisi ke atas, kanan, bawah, maupun kiri dari posisi semula atau posisi seharusnya elemen tersebut berada. Perpindahan posisi ini tidak akan berpengaruh terhadap posisi elemen di sekitarnya karena ketika menggunakan relative positioning, elemen tersebut akan dipindahkan dari normal flow.
  • Absolute Positioning : Sama seperti relative, elemen akan dipindahkan keluar dari normal flow sehingga kita dapat memindahkan posisi elemen ke atas, kanan, bawah, maupun kiri secara leluasa tanpa mengganggu elemen di sekitarnya. Namun posisinya relatif pada jendela browser dan induk elemen selama induk elemen juga berada di luar dari normal flow.
  • Fixed Positioning : Merupakan absolute position namun posisinya selalu relatif pada jendela browser. Bahkan ketika pengguna scrolling pun, posisinya di layar akan tetap tak berubah.

Sebelum kita membahas satu persatu skema tersebut, mungkin kita perlu memahami lebih detail lagi apa sebenarnya normal flow atau biasa disebut “static flow” itu, dan mengapa untuk memindahkan posisi elemen kita perlu mengeluarkannya dari static flow.


Perbedaan Static Flow dan Non-Static Flow

Sebenarnya CSS memiliki dua buah flow yang bisa digunakan untuk menampilkan elemen, yakni static dan non-static. Agar mudah memahami perbedaan antar keduanya, kita gambarkan sebuah halaman website dengan tampilan tiga dimensi.

Bayangkan kita memiliki tiga buah elemen div berukuran 200px x 200px yang masing-masing memiliki warna yang berbeda. 

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
 
.box {
       width: 200px;
       height: 200px;
    }
     
    .first {
       background-color: #60d0a8;
    }
     
    .second {
       background-color: #6495ed;
    }
     
    .third {
       background-color: #ffa500;
    }

Karena kita tidak mengatur properti position dari ketiga elemen tersebut, maka tiap elemen akan ditampilkan dengan static flow seperti ini:


Ketika kita ingin mengubah letak kotak biru (kotak kedua) dengan menggunakan margin-top: 20px; tentu akan berpengaruh pada posisi elemen di bawahnya. 

    1
    2
    3
    4
 
.second {
       background-color: #6495ed;
       margin-top: 20px;
    }


Pada ilustrasi di atas kita bisa lihat bahwa kotak yang berwarna oranye ikut bergeser ke bawah. Berbeda ketika kita menerapkan properti position yang dapat membuat elemen keluar dari static flow. Contohnya kita menerapkan properti position dengan nilai relatif. 

    1
    2
    3
    4
 
.second {
       background-color: #6495ed;
       position: relative;
    }


Pada tampilan browser mungkin tidak terdapat perbedaan apapun setelah menerapkan nilai relative pada atribut position. Namun sebenarnya elemen yang menerapkannya akan diangkat dari luar static flow seperti yang ditampilkan pada ilustrasi 3D. Sehingga elemen tersebut dapat leluasa berpindah posisi tanpa mempengaruhi elemen yang berada pada static flow.

Untuk mengubah posisi elemen yang berada di non-static flow, kita dapat menggunakan properti top, right, bottom, maupun left. 

    1
    2
    3
    4
    5
    6
 
.second {
       background-color: #6495ed;
       position: relative;
       top: 30px;
       left: 10px;
    }


Perlu kita ingat ya, bahwa properti top, left, right, dan bottom pada CSS hanya akan berpengaruh pada elemen yang menerapkan non-static flow (elemen yang menerapkan nilai relative, absolute, dan fixed pada properti position).


Normal Flow

Dalam flow normal, setiap elemen block ditempatkan di bawah elemen sebelumnya. Karena ini merupakan cara standar browser memperlakukan elemen HTML, kita tidak perlu menetapkan nilai properti position ketika ingin membuat perilaku seperti ini tetapi secara sintaks perilaku ini ditetapkan dengan nilai static. 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
 
<!doctype html>
      <html lang="en">
      <head>
        <title>Normal Flow</title>
        <style>
          h1 {
            background-color: #aaaaaa;
            padding: 30px;
          }
          p {
            width: 450px;
          }
        </style>
      </head>
      <body>
      <h1>Lorem ipsum dolor sit amet.</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium iusto non optio vel voluptas? Assumenda
         blanditiis consequatur doloribus porro quasi similique vero voluptatibus. Adipisci, tenetur.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus commodi consectetur dolore eligendi, esse fuga
         hic laboriosam nobis nostrum, nulla omnis optio pariatur repellendus reprehenderit saepe, sit soluta vel vero!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aut corporis deleniti doloremque et excepturi
         expedita labore libero, placeat, quaerat rerum ullam vitae voluptate. Accusantium et explicabo qui tenetur unde.
         Amet aperiam doloremque enim, expedita id illo minima porro quod.</p>
      </body>
      </html>

Berkas di atas jika kita buka pada browser akan tampak seperti ini:


Pada contoh di atas kita tidak menetapkan nilai lebar pada elemen heading, tapi bisa kita lihat bahwa elemen heading tersebut mencakup seluruh lebar ruang yang ada pada jendela browser.

Sedangkan elemen paragraf kita atur lebarnya dengan nilai 450px sehingga elemen tersebut tidak mencakup seluruh lebar ruang yang ada. Elemen paragraf selanjutnya tetap ditampilkan di bawahnya meskipun masih terdapat ruang yang cukup disampingnya.

Hal tersebut merupakan contoh dari gambaran bagaimana flow normal bekerja.


Relative Positioning

Seperti yang kita ketahui sebelumnya, dengan menetapkan relative pada properti position, kita dapat melakukan perpindahan posisi elemen ke atas, kanan, bawah, maupun kiri. Perpindahan posisi yang dilakukan tidak akan berpengaruh terhadap posisi elemen di sekitarnya karena dengan relative positioning, elemen tersebut akan dipindahkan dari normal flow. Untuk menggunakan relative positioning kita tetapkan nilai relative pada properti position. 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
 
<!doctype html>
      <html lang="en">
      <head>
         <style>
             h1 {
                 background-color: #aaaaaa;
                 padding: 30px;
             }
       
             p {
                 width: 450px;
             }
       
             .relative {
                 position: relative;
                 top: 10px;
                 left: 100px;
             }
         </style>
      </head>
      <body>
      <h1>Lorem ipsum dolor sit amet.</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium iusto non optio vel voluptas? Assumenda
         blanditiis consequatur doloribus porro quasi similique vero voluptatibus. Adipisci, tenetur.</p>
      <p class="relative">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus commodi consectetur dolore eligendi, esse fuga hic laboriosam nobis nostrum, nulla omnis optio pariatur repellendus reprehenderit saepe, sit soluta vel vero!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aut corporis deleniti doloremque et excepturi expedita labore libero, placeat, quaerat rerum ullam vitae voluptate. Accusantium et explicabo qui tenetur unde. Amet aperiam doloremque enim, expedita id illo minima porro quod.</p>
      </body>
      </html>

Berkas di atas jika kita buka melalui browser akan tampak seperti:


Pada contoh di atas, setelah menetapkan nilai position pada paragraf kedua, kita mengubah posisinya menjadi 10 pixel lebih bawah dan 100px lebih ke kanan dari posisi yang seharusnya. Perlu kita ingat bahwa perpindahan posisi mengacu pada posisi elemen seharusnya berada.


Absolute Positioning

Ketika properti position diberikan nilai absolute, akan berperilaku sama dengan relative. Elemen akan dikeluarkan dari normal flow sehingga jika elemen dipindahkan posisinya tidak akan berpengaruh pada elemen lain di sekitarnya.

Namun yang membedakannya adalah elemen ini benar-benar tidak dianggap ada oleh elemen pada normal flow. Akibatnya, lokasi awal elemen yang diberikan nilai absolute akan ditempati oleh elemen di bawahnya. 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
 
<!doctype html>
      <html lang="en">
      <head>
         <style>
             h1 {
                 width: 250px;
             }
       
             p {
                 width: 450px;
             }
       
             .absolute {
                 position: absolute;
                 top: 0;
                 left: 500px;
             }
         </style>
      </head>
      <body>
      <h1 class="absolute">Lorem ipsum dolor sit amet.</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium iusto non optio vel voluptas? Assumenda
         blanditiis consequatur doloribus porro quasi similique vero voluptatibus. Adipisci, tenetur.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus commodi consectetur dolore eligendi, esse fuga
         hic laboriosam nobis nostrum, nulla omnis optio pariatur repellendus reprehenderit saepe, sit soluta vel vero!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aut corporis deleniti doloremque et excepturi
         expedita labore libero, placeat, quaerat rerum ullam vitae voluptate. Accusantium et explicabo qui tenetur unde.
         Amet aperiam doloremque enim, expedita id illo minima porro quod.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid asperiores blanditiis cumque eos ex
         expedita facilis laborum maiores necessitatibus neque, officiis pariatur porro temporibus unde veritatis vitae?
         Beatae dolores error ex fugiat molestias neque placeat quod ratione repellat veritatis! A culpa cumque, delectus
         distinctio ducimus earum et ex quas quia quis tempore temporibus veritatis voluptates. Delectus doloremque mollitia
         nobis?</p>
      </body>
      </html>

Jika berkas di atas dibuka pada browser, maka akan tampak seperti ini:


Pada contoh di atas kita bisa lihat bahwa ketika elemen heading menerapkan properti position dengan nilai absolute maka elemen di bawahnya (paragraf) akan menempati posisi yang sebelumnya ditempati oleh elemen heading tersebut.

Dan perpindahan posisi ketika menggunakan absolute akan relatif pada jendela browser. Kita bisa lihat bahwa elemen heading bergeser 500px dari kiri. Tapi selain relatif terhadap jendela browser, nilai ini juga dapat relatif pada elemen yang menaunginya (elemen induk) selama elemen tersebut juga berada di luar normal flow. Namun jika tidak, elemen akan menghiraukan elemen induknya tersebut. Contohnya: 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
 
<!doctype html>
      <html lang="en">
      <head>
         <style>
             .parent {
                 width: 500px;
                 margin: 0 auto;
                 border: 4px solid black;
                 padding: 20px;
             }
             h1 {
                 width: 250px;
             }
             .absolute {
                 position: absolute;
                 top: 0;
                 left: 50px;
             }
         </style>
      </head>
      <body>
      <div class="parent">
         <h1 class="absolute">Lorem ipsum dolor sit amet.</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium iusto non optio vel voluptas? Assumenda blanditiis consequatur doloribus porro quasi similique vero voluptatibus. Adipisci, tenetur.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus commodi consectetur dolore eligendi, esse fuga hic laboriosam nobis nostrum, nulla omnis optio pariatur repellendus reprehenderit saepe, sit soluta vel vero!</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aut corporis deleniti doloremque et excepturi expedita labore libero, placeat, quaerat rerum ullam vitae voluptate. Accusantium et explicabo qui tenetur unde. Amet aperiam doloremque enim, expedita id illo minima porro quod.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid asperiores blanditiis cumque eos ex expedita facilis laborum maiores necessitatibus neque, officiis pariatur porro temporibus unde veritatis vitae? Beatae dolores error ex fugiat molestias neque placeat quod ratione repellat veritatis! A culpa cumque, delectus distinctio ducimus earum et ex quas quia quis tempore temporibus veritatis voluptates. Delectus doloremque mollitianobis?</p>
      </div>
      </body>
      </html>

Jika kita buka berkas di atas pada browser maka akan tampak seperti ini:


Pada contoh kode di atas kita bisa lihat pada .parent kita tidak menetapkan properti position, sehingga elemen yang menerapkannya berada pada flow normal. Sehingga elemen heading akan menghiraukan elemen induknya.

Berbeda ketika .parent menerapkan properti position dengan nilai yang dapat mengeluarkannya dari normal flow, contohnya nilai relative. 

1
 
position: relative;

Dengan begitu posisi elemen heading akan relatif terhadap .parent.


Fixed Positioning

Fixed positioning merupakan absolute position namun posisinya selalu relatif pada jendela browser (meskipun diletakan di dalam induk elemen diluar dari flow normal). Bahkan ketika pengguna melakukan scrolling posisinya akan tetap nampak pada posisinya di layar. 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
 
<!DOCTYPE html>
      <html lang="en">
      <head>
        <style>
          body {
            min-height: 200vh;
          }
           
          h3 {
            padding: 10px;
            background-color: #AAAAAA;
            margin: 0;
            width: 100%;
          }
          
          .fixed {
            position: fixed;
            top: 0;
            left: 0;
          }
        </style>
      </head>
      <body>
        <h3 class="fixed">Lorem ipsum dolor sit amet.</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium iusto non optio vel voluptas? Assumenda
          blanditiis consequatur doloribus porro quasi similique vero voluptatibus. Adipisci, tenetur.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus commodi consectetur dolore eligendi, esse fuga
          hic laboriosam nobis nostrum, nulla omnis optio pariatur repellendus reprehenderit saepe, sit soluta vel vero!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aut corporis deleniti doloremque et excepturi
          expedita labore libero, placeat, quaerat rerum ullam vitae voluptate. Accusantium et explicabo qui tenetur unde. Amet
          aperiam doloremque enim, expedita id illo minima porro quod.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid asperiores blanditiis cumque eos ex
          expedita facilis laborum maiores necessitatibus neque, officiis pariatur porro temporibus unde veritatis vitae? Beatae
          dolores error ex fugiat molestias neque placeat quod ratione repellat veritatis! A culpa cumque, delectus distinctio
          ducimus earum et ex quas quia quis tempore temporibus veritatis voluptates. Delectus doloremque mollitia nobis?</p>
      </body>
      </html>

Berkas di atas jika kita buka pada browser, tampilannya akan tampak seperti berikut.


Pada contoh di atas, elemen heading diposisikan di sudut kiri atas jendela browser dengan properti: 

      1
      2
 
top: 0;
      left: 0;

Ketika pengguna melakukan scrolling pada halaman, elemen heading tetap berada pada posisi yang sama dan paragraf yang ditampilkan nampak di belakang elemen heading tersebut.


Floating

Sederhananya properti float dapat membuat elemen berada pada sebelah kanan atau kiri. Saat diterapkan pada elemen inline, properti float juga memungkinkan elemen di sekitarnya mengelilingi elemen tersebut (wrap). 

   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
 
<!doctype html>
  <html lang="en">
  <head>
     <style>
         .container {
             width: 800px;
             border: 4px solid black;
             padding: 10px;
         }
   
         img {
             float: left;
             margin: 10px;
         }
     </style>
  </head>
  <body>
  <div class="container">
     <img src="https://i.imgur.com/cs2BJzw.jpg" width="200px" alt="dicoding">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet asperiores commodi corporis doloribus eum ipsum obcaecati pariatur quam quo, voluptatum? A, assumenda atque delectus dolore nam natus neque quisquam repudiandae?</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At deserunt illum inventore numquam officia recusandae, sit! Ab asperiores delectus dolor, eius est explicabo impedit ipsa ipsum itaque mollitia neque nihil nisi officia praesentium sint! Accusantium libero obcaecati provident qui? Error!</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam debitis dolorem eaque eius eos error eum ex facilis fuga ipsa iste iusto mollitia nam natus necessitatibus praesentium quam qui quod, rerum sed sequi sint voluptates? Atque enim, ex facere fugiat ipsum mollitia quos sunt. At, autem commodi dolorum eos, est expedita, incidunt molestias nobis nostrum officia porro reiciendis saepe voluptatum.</p>
  </div>
  </body>
  </html>

Berkas di atas, jika kita buka melalui browser akan tampak seperti gambar ini:


Selain dalam membuat text wrapping. Float juga merupakan salah satu teknik dalam membuat layout website. Teknik ini masih banyak digunakan oleh developer karena sangat mudah dipahami dan tergolong mudah untuk multiple column seperti gambar berikut


Hal ini dapat dilakukan dengan mudah menggunakan properti float, karena nilai dari properti ini adalah left dan right. Nilai tersebut menunjukan posisi elemen harus diletakkan. Contoh penerapannya seperti berikut ini: 

   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
 
<!doctype html>
  <html lang="en">
  <head>
     <style>
         * {
             /* digunakan untuk menghapus seluruh padding dan margin standar yang diberikan browser pada elemen */
             margin: 0;
             padding: 0;
   
             /* Menggunakan border-box dalam perhitungan dimensi box-nya */
             box-sizing: border-box;
         }
   
         .container {
             width: 800px;
             height: 400px;
             border: 1px solid black;
             margin: 0 auto;
         }
   
         .left-content {
             text-align: center;
             line-height: 400px;
             width: 30%;
             height: 100%;
             background-color: #00c7ed;
   
             /* digunakan untuk memindahkan posisi elemen ke sisi kiri container */
             float: left;
         }
   
         .right-content {
             text-align: center;
             line-height: 400px;
             width: 70%;
             height: 100%;
             background-color: #60d0a8;
   
             /* digunakan untuk memindahkan posisi elemen ke sisi kanan container */
             float: right;
         }
     </style>
  </head>
  <body>
  <div class="container">
     <div class="left-content">
         <h3>Left Content</h3>
     </div>
     <div class="right-content">
         <h3>Right Content</h3>
     </div>
  </div>
  </body>
  </html>

Berkas di atas jika kita buka pada browser akan tampak seperti berikut:


Dari contoh di atas, kita bisa melihat pada selector .left-content dan .right-content ditetapkan properti float dengan nilai left dan right, sehingga elemen tersebut dapat diposisikan secara bersebelahan.

Ketika menggunakan properti float jangan lupa menentukan ukuran lebar dari propertinya, karena nilai dari lebar menentukan seberapa banyak ruang yang dicakup oleh elemen. Pada contoh di atas kita menetapkan nilai 30% untuk konten kiri dan 70% untuk konten sebelah kanan.

Lantas jika nilainya hanya left dan right, bagaimana jika ada lebih dari dua kolom dalam menyusun layout? Hal tersebut sangat mudah dilakukan. Kita hanya perlu menetapkan nilai left pada ketiga kolomnya, lantas kolom akan tampil bersebelahan sesuai urutan penulisan elemen. 

   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
 
<!doctype html>
  <html lang="en">
  <head>
     <style>
         * {
             /* digunakan untuk menghapus seluruh padding dan margin standar yang diberikan browser pada elemen */
             margin: 0;
             padding: 0;
   
             /* Menggunakan border-box dalam perhitungan dimensi box-nya */
             box-sizing: border-box;
         }
   
         .container {
             width: 800px;
             height: 400px;
             border: 1px solid black;
             margin: 0 auto;
         }
   
         .left-content {
             text-align: center;
             line-height: 400px;
             width: 33.3%;
             height: 100%;
             background-color: #00c7ed;
             float: left;
         }
   
         .center-content {
             text-align: center;
             line-height: 400px;
             width: 33.3%;
             height: 100%;
             background-color: #d0b541;
             float: left;
         }
   
         .right-content {
             text-align: center;
             line-height: 400px;
             width: 33.3%;
             height: 100%;
             background-color: #60d0a8;
             float: left;
         }
     </style>
  </head>
  <body>
  <div class="container">
     <div class="left-content">
         <h3>Left Content</h3>
     </div>
     <div class="center-content">
         <h3>Center Content</h3>
     </div>
     <div class="right-content">
         <h3>Right Content</h3>
     </div>
  </div>
  </body>
  </html>

Maka akan menghasilkan tampilan seperti gambar berikut:


Permasalahan penerapan float

Properti float terlihat sangat mudah untuk digunakan, baik dalam text wrapping maupun dalam penyusunan layout. Tetapi bukan berarti ketika menggunakan properti ini, tiada efek samping atau masalah yang ditimbulkan. Apa itu?

Jika sebuah elemen induk hanya memiliki satu elemen dengan menerapkan properti float, ia akan memiliki nilai tinggi 0px. Contohnya seperti berikut: 

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
 
<!doctype html>
    <html lang="en">
    <head>
       <style>
           .container {
               width: 800px;
               border: 4px solid black;
           }
     
           img {
               float: left;
               margin: 10px;
           }
       </style>
    </head>
    <body>
    <div class="container">
       <img src="https://i.imgur.com/cs2BJzw.jpg" width="200px" alt="dicoding">
    </div>
    </body>
    </html>

Jika dijalankan pada browser akan menghasilkan tampilan seperti:


Pada contoh tersebut kita bisa melihat bahwa elemen gambar berada di dalam sebuah container div. Tetapi container tersebut tidak memiliki tinggi senilai gambar yang ditampilkan. Mengapa bisa demikian? Untuk lebih jelasnya kita coba tambahkan paragraf di dalam container tersebut tanpa menggunakan properti float. 

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
 
<!doctype html>
    <html lang="en">
    <head>
       <style>
           .container {
               width: 800px;
               border: 4px solid black;
           }
     
           img {
               float: left;
               margin: 10px;
           }
       </style>
    </head>
    <body>
    <div class="container">
       <img src="https://i.imgur.com/cs2BJzw.jpg" width="200px" alt="dicoding">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci architecto aspernatur dolorem
           doloremque eum excepturi fuga hic, molestias obcaecati officia perferendis perspiciatis qui saepe ut velit
           veniam vitae voluptatum.</p>
    </div>
    </body>
    </html>

Hasilnya:


Hal ini menunjukkan bahwa elemen yang menerapkan float “tidak dianggap ada” oleh induk elemen yang menaunginya karena jika menggunakan float, elemen akan dikeluarkan dari normal flow.

Bagaimana Anda menanganinya?

Terdapat dua cara yang akan kita bahas, yakni dengan pertama, menggunakan properti clear dan kedua, menetapkan nilai overflow: auto pada container.


Clear Property

Cara yang pertama adalah dengan menggunakan properti clear. Properti clear memang dibuat untuk menghilangkan sifat float, dengan demikian elemen yang menerapkan properti float akan kembali “dianggap ada”. Namun untuk menerapkan properti ini kita perlu membuat sebuah elemen kosong (biasanya menggunakan div tanpa konten) yang menerapkan properti clear.

Nilai dari properti clear merupakan nilai yang digunakan pada properti float karena properti clear akan menghapus sifat float sesuai dengan nilai yang ditetapkan. Contohnya seperti ini: 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
 
<!doctype html>
      <html lang="en">
      <head>
         <style>
             .container {
                 width: 800px;
                 border: 4px solid black;
             }
       
             img {
                 float: left;
                 margin: 10px;
             }
             .clear {
                 clear: left;
             }
         </style>
      </head>
      <body>
      <div class="container">
         <img src="https://i.imgur.com/cs2BJzw.jpg" width="200px" alt="dicoding">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci architecto aspernatur dolorem
             doloremque eum excepturi fuga hic, molestias obcaecati officia perferendis perspiciatis qui saepe ut velit
             veniam vitae voluptatum.</p>
         <div class="clear"></div>
      </div>
      </body>
      </html>

Maka hasilnya akan seperti ini:


Jika kita mencoba mengubah clear menjadi clear: right;, maka akan kembali seperti hasil sebelum menerapkannya.


Lalu bagaimana jika terdapat dua elemen yang menerapkan nilai float berbeda (left dan right)? Terdapat satu nilai lagi yang dapat menghilangkan kedua sifat float tersebut, yakni nilai both. Gunakanlah nilai tersebut jika kita ingin sepenuhnya menghilangkan sifat float pada elemen.


overflow: auto;

Cara yang kedua adalah dengan menetapkan properti overflow: auto; pada elemen yang menampung elemen float. Sebagian developer lebih memilih menggunakan cara ini karena lebih praktis dan tidak perlu membuat elemen baru ketika menggunakannya.

Untuk menerapkannya sangatlah simpel. Cukup tambahkan properti overflow dengan nilai auto pada container. 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
 
<!doctype html>
      <html lang="en">
      <head>
         <style>
             .container {
                 width: 800px;
                 border: 4px solid black;
                 overflow: auto;
             }
       
             img {
                 float: left;
                 margin: 10px;
             }
         </style>
      </head>
      <body>
      <div class="container">
         <img src="https://i.imgur.com/cs2BJzw.jpg" width="200px" alt="dicoding">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci architecto aspernatur dolorem
             doloremque eum excepturi fuga hic, molestias obcaecati officia perferendis perspiciatis qui saepe ut velit
             veniam vitae voluptatum.</p>
      </div>
      </body>
      </html>

Maka hasilnya akan sama seperti yang dilakukan pada cara pertama.


Menerapkan Positioning dan Float pada Halaman Profil

Seperti yang sudah disinggung pada latihan sebelumnya, latihan kali ini kita akan memindahkan elemen aside agar berada di pinggir halaman halaman detail. Sehingga tampilan website akan terlihat seperti ini:


Namun tidak hanya sampai disitu, latihan kali ini akan sedikit lebih panjang, karena kita akan menerapkan responsibilitas tampilan pada halaman profil dengan menggunakan teknik media query. Seperti apa tekniknya? Mari kita ketahui bersama.

Yang pasti pada akhirnya kita dapat membuat halaman aplikasi tampak seperti berikut:


Menetapkan float pada #content dan aside

Seperti yang sudah dipelajari, properti float berfungsi untuk memindahkan suatu elemen untuk berada sebelah di kiri atau di sebelah kanan, dengan menggunakan nilai right atau left. Ketika menggunakan properti tersebut kita perlu menetapkan lebar pada elemen yang akan diterapkan properti float sehingga kita tahu berapa banyak cakupan lebar yang disediakan untuk elemen tersebut.

Untuk langkah awal, mari kita buat rule baru dengan selector #content dan tuliskan nilai left pada properti float. 

    1
    2
    3
 
#content {
      float: left;
    }

Jangan lupa untuk menetapkan nilai lebar juga. Pada kasus kali ini kita gunakan nilai 75% untuk menetapkan lebar #content. 

    1
    2
    3
    4
 
#content {
      float: left;
      width: 75%;
    }

Ketika kita buka hasilnya pada browser, tampilan akan jadi berantakan seperti ini:


Tenang, ini normal. Dikarenakan kita belum menetapkan nilai float pada elemen <aside>. Elemen <aside> dan <footer> akan berpindah menempati ruang yang sebelumnya digunakan oleh #content (collapse). Hal tersebut telah kita pelajari pada materi sebelumnya bahwa elemen yang diberikan properti float akan dikeluarkan dari normal flow.

Langkah selanjutnya, kita terapkan juga properti float dengan nilai right pada elemen <aside>. 

    1
    2
    3
 
aside {
      float: right;
    }

Jangan lupa untuk menetapkan lebar pada elemennya. Karena sebelumnya elemen content sudah menerapkan 75% lebar dari parent, berarti elemen aside hanya dapat memiliki 25% ruang yang tersedia untuk ditempati. Silakan tetapkan nilai 25% pada properti width untuk elemen aside. 

    1
    2
    3
    4
 
aside {
      float: right;
      width: 25%;
    }

Jika kita coba membuka berkas HTML dengan apa yang sudah kita terapkan, maka tampilan akan jadi lebih mengerikan seperti ini:


Hal tersebut disebabkan nilai elemen <main> sekarang memiliki tinggi 0px. Di mana #content dan elemen <aside> dianggap tidak ada, sehingga elemen <footer> akan naik mengisi ruang yang kosong. Agar #content dan elemen <aside> dianggap ada oleh <main> (sebagai induk elemennya) kita perlu tetapkan nilai overflow: auto; pada main.

Silakan tambahkan properti overflow dengan nilai auto pada selector main yang sudah kita buat sebelumnya. 

    1
    2
    3
    4
 
main {
      padding: 20px;
      overflow: auto;
    }

Setelah menerapkan overflow: auto; pada main, tampilan website sudah lebih baik dan elemen footer sudah berada pada posisi yang seharusnya.


Namun kita perlu memberikan sedikit jarak antara #content dan aside agar tidak nampak berhimpitan. Tambahkanlah properti padding-left pada elemen <aside> agar konten yang ditampilkan lebih menjorok ke kiri.

Silakan tambahkan properti padding-left dengan nilai 20px pada selector aside. 

    1
    2
    3
    4
    5
 
aside {
      float: right;
      width: 25%;
      padding-left: 20px;
    }

Setelah menerapkannya, buka kembali hasilnya pada browser. Voila, ini hasilnya:


Ups, elemen <aside> sekarang berada di bawah #content karena dengan menambahkan padding pada <aside>, lebar elemen sudah bukan 25% lagi.

Untuk mengatasinya kita bisa ubah tipe pengukuran untuk dimensi kotaknya. Masih ingat kan materi tentang box-sizing? Dengan menerapkan nilai border-box pada properti box-sizing, kita dapat menentukan dimensi kotak dengan tepat, tanpa dipengaruhi oleh padding dan border.

Mari kita tetapkan pengukuran box-sizing untuk seluruh elemen HTML dengan menggunakan selector * seperti berikut: 

    1
    2
    3
 
* {
      box-sizing: border-box;
    }

Setelah menetapkan rule tersebut, maka tampilan website akan kembali normal.


Menambahkan meta tag viewport

Setelah berhasil membuat layout dengan menggunakan float, apakah terpikir bagaimana tampilan yang dihasilkan pada mobile device? Tampilan website kita terlihat baik ketika dibuka menggunakan laptop atau desktop tetapi belum tentu akan sama pada mobile device.

Pada browser Google Chrome dan Mozilla Firefox terdapat fitur inspection. Fitur ini sangat bermanfaat bagi developer web dalam membantu pengembangan website. Jika ingin mempelajari lebih lanjut mengenai fitur ini, Anda bisa melihat detailnya pada dokumentasi yang tersedia pada tautan berikut:


Yang jelas pada inspector tersebut terdapat fitur di mana kita dapat mensimulasikan halaman website dalam tampilan mobile device atau tablet. Untuk membuka fitur inspector kita bisa gunakan shortcut ctrl + shift + i pada browser, atau dengan melakukan klik kanan -> inspect / inspect page.

Fitur Inspection pada Google Chrome


Fitur Inspection pada Mozilla Firefox


Kedua gambar di atas menunjukan fitur dari inspection pada Google Chrome dan Mozilla Firefox. Untuk mensimulasikan tampilan pada mobile device, kita dapat menekan icon yang dilingkari pada gambar di atas.

Dengan begitu, tampilannya akan muncul seperti berikut.


Di sini kita bisa memilih peranti apa yang akan digunakan untuk mensimulasikan halaman, untuk melihat tampilan dalam mobile devices, kita bisa memilih salah satu opsi handphone yang tersedia. Contohnya Pixel 2 XL.


Lalu setelah memilih tampilan pada mobile devices, apakah tampilan website sekarang sudah nampak baik? Tentu tidak, karena tampilan pada simulasi device di browser Google Chrome masih berantakan tampak seperti ini.


Untuk mengatasinya, kita perlu menetapkan tag viewport agar dapat responsif pada peranti mobile.

Viewport merupakan area yang dapat dilihat oleh pengguna kita pada halaman website. Ukuran viewport bervariasi berdasarkan device-nya. Ukuran viewport pada sebuah peranti mobile, lebih kecil dibandingkan dengan layar komputer.

Sebelum adanya tablet ataupun handphone, halaman website didesain hanya untuk ukuran layar komputer. Dengan begitu, banyak sekali website yang menerapkan tampilan dan ukuran yang static. Maka ketika halaman tersebut diakses melalui handphone atau tablet, ukuran akan terlalu besar untuk ditampilkan. Untuk mengatasi permasalahan tersebut kita perlu mengatur sebuah viewport pada halaman website kita.

Mengatur viewport dapat melalui sebuah tag <meta> yang disisipkan pada head berkas html. Silakan buka berkas index.html kemudian tambahkan script berikut di dalam <head>. 

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

Sehingga sekarang tampilan pada mobile device menjadi seperti ini:


Menetapkan rules pada Ukuran Layar Tertentu

Walaupun sudah menetapkan meta tag viewport, tampilan pada mobile device belum baik karena informasi yang ditampilkan pada elemen <aside> sulit terbaca.


Untuk mengatasi hal ini, CSS menyediakan sebuah fitur yang dapat kita gunakan untuk menentukan rule hanya pada ukuran viewport tertentu. Fitur tersebut dinamakan CSS Media Queries. Berikut contoh penulisannya: 

    1
    2
    3
    4
    5
    6
    7
    8
    9
 
/* Rule yang dituliskan dalam block @media di bawah akan diterapkan pada device yang memiliki ukuran viewport di bawah 992px */
    @media screen and (max-width: 992px) {
      /* ..... */
    }
     
    /* Rule yang dituliskan dalam block @media di bawah akan diterapkan pada device yang memiliki ukuran viewport di bawah 600px */
    @media screen and (max-width: 600px) {
      /* ..... */
    }

Canggih, bukan? Setelah mengetahui fitur media queries, kita dapat memperbaiki halaman profil dengan memindahkan elemen <aside> di bawah dari elemen #content. Pemindahan ini hanya ada pada device yang memiliki ukuran layar kecil sehingga <aside> dapat menyesuaikan kembali lebarnya.

Untuk melakukannya, kita tetapkan elemen <aside> dan #content agar memiliki lebar 100% (memenuhi layar). CSS properti ini akan diterapkan jika ukuran lebar viewport kurang dari 1000px (maksimal 999px). Nilai ini didefinisikan pada media queries yang dapat disesuaikan sesuai kebutuhan. Silakan tuliskan kode berikut pada style.css: 

    1
    2
    3
    4
    5
    6
    7
 
@media screen and (max-width: 1000px) {
      #content,
      aside {
        width: 100%;
        padding: 0;
      }
    }

Dengan menerapkan media query, sekarang halaman profil dapat menyesuaikan tampilan ketika diakses oleh peranti mobile.


Selamat! Sampai dengan materi ini kita sudah dapat membuat sebuah website dengan tampilan yang menarik


Membuat Sticky Navigation

Ada satu fitur yang mungkin perlu diterapkan lagi pada halaman profil yang kita buat. Pada halaman profil sudah terdapat sebuah navigasi yang berfungsi untuk mengarahkan pengguna langsung pada informasi yang dipilih. Tetapi navigasi tersebut agak sulit diakses ketika pengguna melakukan scrolling pada halaman website. Pasalnya, navigasi tersebut selalu berada di bawah jumbotron website. Akibatnya, untuk mengakses navigasi yang dimaksud, pengguna perlu kembali melakukan scrolling ke atas hingga navigasi kembali terlihat.

Dari permasalahan di atas, sepertinya kita perlu meletakan navigasi yang menempel pada jendela browser, sehingga ketika user melakukan scrolling pada halaman website, navigasi tetap dapat dicangkup oleh pengguna untuk digunakan.

Terdapat satu nilai properti position yang belum dibahas pada pembahasan positioning, yaitu sticky positioning yang merupakan nilai kombinasi dari relative positioning dan fixed positioning.

Dengan menggunakan nilai sticky pada properti position, membuat navigasi dapat melekat pada jendela browser (layaknya fixed position) tetapi posisi awalnya tetap menempati posisi di mana ia seharusnya berada (layaknya relative position). Sehingga tampilan navigasi dapat memiliki sifat seperti ini:


Untuk menerapkannya cukup mudah, pertama kita tambahkan properti position dengan nilai sticky dan properti top dengan nilai 0 pada elemen <nav>. 

    1
    2
    3
    4
    5
    6
 
nav {
       background-color: #00a2c6;
       padding: 5px;
       position: sticky;
       top: 0;
    }

Nilai top diperlukan agar ketika pengguna melakukan scrolling, elemen navigasi tetap berada atau menyangkut di atas jendela browser.

Namun ini masih belum cukup, navigasi bar masih belum tertahan ketika pengguna melakukan scrolling halaman website. Bagaimana agar navigasi dapat menempel pada seluruh halaman? Pada latihan sebelumnya, kita telah membuat elemen <header> sebagai induk dari elemen <nav> dan elemen <div> yang memiliki atribut class dengan nilai jumbotron. Elemen <header> tersebut perlu diterapkan properti display dengan nilai inline. Silakan tuliskan rule berikut pada berkas style.css. 

    1
    2
    3
 
header {
       display: inline;
    }

Setelah menerapkannya, seharusnya kini navigasi pada halaman profil akan tampak menyangkut di atas jendela browser saat pengguna melakukan scrolling.


Memperbaiki CSS

Terdapat banyak cara dan best practice dalam memperbaiki CSS yang telah Anda tulis. Salah satu cara yang mudah dan cepat dilakukan adalah dengan menggunakan tools untuk otomatis mencari kesalahan pada penulisan.


Mencari Kesalahan CSS

Salah satu cara yang paling cepat untuk memastikan bahwa CSS yang telah Anda tulis itu valid dan dapat berjalan adalah menggunakan berbagai tools online yang tersedia secara gratis. Pengecekan cukup dengan cara copy-paste kode CSS, upload berkas CSS, atau menulis alamat situs yang ingin diperiksa.

Berikut beberapa opsi gratis yang tersedia.


Kecilkan Ukuran CSS

Ukuran CSS sangat penting untuk dapat dihemat karena akan mempengaruhi seberapa cepat situs Anda dapat dimuat pada browser. Cara untuk menghemat ukuran berkas CSS adalah dengan menghapus spasi atau karakter yang tidak diperlukan dari kode. Berikut contoh spasi atau karakter yang dapat dihapus:

  • New line characters (Baris baru)
  • Whitespace characters (Spasi)
  • Block delimiters (Pembatas block)
  • CSS comments (Komentar CSS)

Perbaikan di atas dapat dilakukan secara manual namun Anda juga dapat menggunakan tools online yang dapat memperbaiki secara otomatis. Berikut beberapa opsi yang tersedia.


Sebelumnya : Pengenalan CSS Selanjutnya : Layout Responsif Menggunakan Flexbox