Dasar CSS

9:28 PM
CSS adalah singkatan dari Cascading Style Sheet. CSS digunakan untuk mengubah tampilan di halaman yang dihasilkan oleh kode HTML. CSS bisa ditulis dengan 3 cara. 
  1. Inline CSS, menggunakan atribut style.
  2. CSS internal dengan tag <style>. Cara ini bisa juga disebut dengan "embedded style CSS".
  3. CSS eksternal yang dihubungkan dengan tag <link>.
CSS terdiri dari beberapa bagian. Bagian-bagian tersebut yaitu :
  • Selector
  • Property / properti
  • value / nilai dari properti 

Satu selector bisa berisi beberapa properti dengan valuenya. Dalam elemen style atau file CSS, sekumpulan properti dari satu selector diapit dengan tanda "{" dan "}". Properti dan value dipisahkan dengan tanda titik dua (:) dan diakhiri dengan titik koma (;).

Jika kalian menggunakan atribut style, kalian tidak perlu menuliskan nama selector. Kalian bisa langsung menuliskan nama properti dan nilainya. Beberapa properti dalam nilai atribut style bisa dipisahkan dengan tanda titik koma (;)

Selector CSS

Selector bisa berupa nama tag, nama class atau nama id. Karena itu, style CSS bisa diterapkan pada elemen HTML berdasarkan nama tag, nama id, dan nama class. Elemen-elemen yang terlihat di halaman HTML; bisa diubah "hasil tampilannya" dengan style CSS. Elemen-elemen tersebut misalnya body, p, a, span, h1, h2, dll.
<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
        p{
            color : purple;
        }
        p, h1{
            font-size:auto;
        }
    </style>
</HEAD>
<BODY>
    <h2>Judul</h2>
    <p style="color:purple;background-color:transparent">paragraf 1</p>
    <p>paragraf 2</p>
    <p>paragraf 3</p>
    <p>paragraf 4</p>
    <p>paragraf 5</p>
    <p>paragraf 6</p>
    <p>paragraf 7</p>
    <p>paragraf 8</p>
</BODY>
</HTML>

Jika kode HTML tersebut disimpan dan dieksekusi maka semua tulisan yang dihasilkan tag <p> akan berwarna ungu / purple. Selain menggunakan satu selector kalian juga bisa menggunakan tanda koma untuk memisahkan beberapa nama selector yang akan diberi properti-properti yang sama.

Atribut Class

Bagaimana jika kalian hanya ingin melakukannya pada sebagian tag <p> yang ada. Hal itu bisa dilakukan dengan menggunakan atribut style tapi kurang praktis jika ada cukup banyak tag yang akan diubah tampilannya. 

Penggunaan inline CSS akan cukup merepotkan jika perubahan yang diterapkan ada lebih dari satu. Untuk lebih mudah menerapkan style CSS pada beberapa tag dengan nama yang sama maupun berbeda kita bisa menggunakan atribut class. Dalam CSS, selector dari nama class diawali dengan tanda titik(.).

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
        .styleku{
            color : magenta;
        }
    </style>
</HEAD>
<BODY>
    <h2 class="styleku">Judul</h2>
    <p>paragraf 1</p>
    <p>paragraf 2</p>
    <p>paragraf 3</p>
    <p>paragraf 4</p>
    <p>paragraf 5</p>
    <p class = "styleku">paragraf 6</p>
    <p class = "styleku">paragraf 7</p>
    <p>paragraf 8</p>
</BODY>
</HTML>


Atribut Id

Style juga bisa diterapkan pada tag yang menggunakan atribut id. Jika nama class diawali dengan tanda titik(.), maka id diawali dengan tanda pagar(#). Satu yang perlu diingat, walaupun bisa, sebaiknya tidak ada tag dengan nama id yang sama dalam satu file HTML.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
        .styleku{
            color : magenta;
        }
        #styleku{
            color : blue;
        }
    </style>
</HEAD>
<BODY>
    <h2 class="styleku">Judul</h2>
    <p>paragraf 1</p>
    <p>paragraf 2</p>
    <p>paragraf 3</p>
    <p>paragraf 4</p>
    <p>paragraf 5</p>
    <p class = "styleku">paragraf 6</p>
    <p class = "styleku">paragraf 7</p>
    <p id = "styleku">paragraf 8</p>
</BODY>
</HTML>

Komentar dalam CSS

Komentar adalah bagian dari script atau kode program yang tidak terlihat di dalam hasilnya. Dalam CSS, kalian juga bisa menambahkan komentar. Komentar dalam CSS diapit di antara tanda /* dan */.

.styleku{
    color : magenta;/*ini adalah komentar*/
}
#styleku{
    color : blue;
}
/*Kalian bisa memberikan komentar 
di dalam beberapa baris.*/

Pentingnya CSS Eksternal

Contoh-contoh di atas menggunakan CSS internal yang hanya bisa digunakan untuk satu file HTML. Jika kalian ingin membuat sebuah web atau aplikasi, sebaiknya kalian menggunakan CSS eksternal karena halaman website umumnya punya kesamaan. Saat menggunakan CSS eksternal, kalian cukup menulis satu file untuk memberikan perubahan-perubahan tampilan yang sama untuk beberapa halaman HTML.

Satuan-Satuan CSS

Beberapa properti CSS yang menggunakan ukuran memerlukan satuan. Saat kalian hanya menggunakan angka, satuan default dari beberapa properti umumnya adalah pixel (px). Di bawah ini adalah satuan-satuan yang biasa digunakan dalam CSS.

  1. %
  2. px
  3. pt
  4. em
  5. rem
  6. vw
  7. vh
  8. cm
  9. mm

VW dan VH hampir sama dengan persen. Bedanya ada di acuannya. Persen menggunakan elemen kontainer atau parent sebagai acuan ukurannya. Sedangkan vw dan vh menggunakan ukuran halaman yang ditampilkan di browser atau viewport. Selain satuan-satuan di atas, ada beberapa satuan yang hanya bisa digunakan pada properti tertentu.

Initial dan Inherit

Dua nilai yang bisa kalian berikan hampir pada semua properti CSS adalah initial dan inherit. Dua nilai tersebut disebut dengan common value karena bisa digunakan hampir pada semua properti CSS.

Nilai initial akan mengikuti setting di browser. Nilai inherit akan mengikuti nilai dari properti yang sama milik kontainer atau parent dari elemen HTML yang bersangkutan. Parent adalah elemen HTML yang mengapit beberapa elemen lain.

Ada beberapa nilai yang umum digunakan pada properti CSS. Salah satunya adalah auto yang bisa kalian gunakan untuk properti CSS yang terkait dengan ukuran. Nilai lain seperti "none" juga sering digunakan sebagai nilai properti CSS yang tidak menggunakan angka.

Di setiap contoh di atas ada tombol copy yang bisa kalian gunakan untuk menyalin masing-masing contoh kode tersebut. Tapi, kalau kalian memang tidak melihat tombol tersebut, kalian bisa unduh filenya di sini.

Cache

Gambar, file CSS, dan beberapa media lain biasanya akan disimpan browser untuk mempercepat pemuatan halaman. Ini kadang jadi masalah bagi beberapa orang yang baru belajar web programming, terutama saat halaman tidak berubah setelah file CSS diubah dan disimpan. Untuk mengatasinya kalian perlu membersihkan cache browser lewat menu "Clear History" atau pengaturan.

Framework CSS

Kalau kalian ingin hasil yang instan sebelum bisa bisa menggunakan semua properti CSS, kalian bisa menggunakan framework CSS. Saat menggunakan framework, kalian cukup mengubah nama class dan menyusun elemen HTML untuk mendapatkan efek tertentu. Framework CSS biasanya juga sudah menyertakan animasi dan efek javascript.

Beberapa framework CSS yang cukup populer bisa kalian lihat di bawah ini.

  • Bootstrap
  • Tailwind
  • Materialize
  • Semantic UI
  • Foundation
  • UIkit
  • Bulma
  • Dll

Sekalipun kalian bisa pakai Framework CSS untuk mempermudah desain halaman, ada baiknya kalian tetap belajar CSS supaya kalian bisa memberikan tampilan halaman yng lebih kreatif.

Important

Saat menggunakan Framework CSS, ada beberapa elemen HTML yang mungkin sudah diubah tampilan defaultnya. Itu bisa membuat tampilan elemen HTML tidak bisa diubah lagi dengan kode css yang kalian buat kecuali lewat inline-style CSS. Kalau kalian menggunakan tag style atau CSS eksternal buatan kalian sendiri, kalian mungkin perlu kata kunci "!important" yang diletakkan setelah nilai dari properti CSS.

Contoh :

.selektor {
    color : red !important;
}
Kata kunci "!important" akan memaksa browser menimpa pengaturan dari framework CSS dari elemen HTML yang jadi target. Kalau belum terlihat perubahannya, jangan lupa cek cache-nya!

Subscribe to: Post Comments (Atom)