Bagaimana Cara Kerja CSS?

-

 CSS bekerja ketika browser memuat halaman website. Untuk menerapkan pengaturan tampilan HTML yang telah ditentukan dengan kode CSS, prosesnya meliputi beberapa langkah. 

Mulanya, browser akan memuat file HTML dan CSS (jika kodenya ditulis sebagai external CSS). Kemudian, browser mengubah keduanya menjadi document object model (DOM). Ini adalah komponen yang mewakili file HTML dan CSS dalam memori perangkat pengunjung website.

Setelah HTML dan CSS diubah menjadi DOM, browser akan melakukan rendering, proses di mana browser menerapkan pengaturan di kode CSS pada elemen-elemen HTML. Hasilnya adalah halaman website yang tampil di layar perangkat Anda.


5+ Contoh CSS

1. Menentukan Format Paragraf

Salah satu contoh CSS adalah untuk mengatur format paragraf. Misalkan ingin agar semua paragraf dalam sebuah halaman website berukuran 120% dan berwarna abu tua, Anda cukup menambahkan kode di bawah ini:

p { font-size: 120%; color: dimgray; }

Anda juga bisa mengubah warna link dengan CSS. Sebagai catatan, warna link yang ditentukan dengan CSS ada empat, yaitu:

  • Normal: warna link yang belum pernah dibuka dan tidak diklik
  • Visited: warna link yang sudah pernah dibuka
  • Hover: warna ketika Anda meletakkan kursor di atas link
  • Active: warna link ketika Anda klik

Untuk menentukan keempat warna itu, gunakan kode di bawah ini dan ketikkan warna yang Anda inginkan setelah color:.

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

3. Menentukan Huruf Kapital/Kecil

Ingin agar sebuah paragraf berisi huruf kecil saja? Anda tinggal mengganti “Paragraf Anda” di kode berikut ini dengan teks yang diinginkan:

<p class="smallcaps">Paragraf Anda.</p>

4. Membuat Kotak Teks

CSS juga memungkinkan Anda membuat kotak teks. Umumnya, kotak teks digunakan untuk menonjolkan sebuah informasi penting. Untuk melakukannya, gunakan contoh CSS ini:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Kode tersebut akan menambahkan kotak dengan border berukuran 5px dan warna ungu di sekitar teks yang Anda tandai dengan class important. Untuk menandai teks dengan class itu, tambahkan kode berikut ini:

<p class="important">Paragraf Anda.</p>

Link akan terlihat lebih mencolok jika diletakkan dalam sebuah tombol. Untuk membuatnya dengan CSS, gunakan kode di bawah ini:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

Supaya Anda tahu apa saja fungsi dari bagian-bagian kode tersebut, simak penjelasan berikut ini:

  • a:link, a:visited, a:hover, a:active memastikan bahwa tombol Anda akan selalu tampil meski sudah diklik atau ditunjuk dengan kursor. 
  • background-color menentukan warna tombol.
  • padding menentukan ukuran tombol.
  • text-align menentukan letak teks dalam tombol, misalnya di pinggir atau di tengah.
  • text-decoration menentukan ada atau tidaknya garis bawah di teks.
  • display: inline-block memungkinkan Anda untuk mengatur tinggi dan lebar tombol.

6. Meng-highlight Baris dalam Tabel

Jika ingin agar baris dalam sebuah tabel memiliki warna berbeda ketika ditunjuk dengan kursor, Anda bisa menambahkan contoh CSS berikut ini:

tr:hover { background-color: #ddd; }

Setelah background-color: Anda cukup mengganti #ddd dengan kode warna CSS. Cek daftar kode warna CSS apabila Anda belum tahu.

Komentar

Posting Komentar

Postingan populer dari blog ini

Cicada 3301, Teka-teki Paling Misterius di Internet yang Sulit Terpecahkan

-
  Pada Januari 2012, dunia  internet  digegerkan dengan kemunculan teka-teki misterius. Orang-orang menyebutnya sebagai Cicada 3301. Angka ‘3301’ merupakan nama samaran pihak yang membuat teka-teki tersebut. Sementara itu, ‘cicada’ yang dalam bahasa Indonesia berarti ‘serangga tonggeret’ adalah nama yang diberikan orang-orang karena teka-teki yang ditampikan memiliki bentuk yang serupa dengan hewan tersebut. Awal Mula Cicada 3301 Cicada 3301 memulai teka-tekinya melalui situs gambar 4chan. Dalam sebuah poster berlatar hitam, mereka menjelaskan bahwa mereka sedang mencari orang yang jenius. Untuk mencarinya, mereka mengadakan tes atau teka-teki yang harus dipecahkan. Banyak orang yang beranggapan bahwa teka-teki tersebut merupakan perekrutan terselubung bagi calon anggota organisasi rahasia, seperti Secret Intelligence Service (SIS), National Security Agency (NSA), Central Intelligence Agency, dan Freemason. Namun, tak sedikit pula yang beranggapan bahwa teka-tek...
Baca selengkapnya

Pengenalan User Interface (UI)

-
Gambar
        Baiklah di Era Industri 4.0 ini dan adanya pandemic Covid-19 ini mengharuskan kita untuk belajar dari rumah dan melakukan aktifitas kerja yang memungkinkan dikerjakan dari jarak jauh (tapi tambal ban sama memasak ndak bisa online ya kecuali pesan lewat driver). Tentunya dalam pekerjaan yang menggunakan software atau perangkat lunak atau system informasi dan terhubung secara daring (dalam jaringan) sebagai contoh adalah website, sangat penting bagi Programmer untuk bisa membuat desain interface atau tampilan tatap muka yang menarik pengunjung agar pengunjung dapat betah serta tidak bosan saat bekerja atau sekedar mencari artikel. Sehingga sangat penting bagi programmer untuk melihat tata letak, jenis font, besar font, lebar halaman, warna dan tentunya animasi dalam desain. Salah satu bahasa pemrograman yang digunakan untuk mendesain serta mempercantik desain dalam pemrograman web adalah css dan javascript. Tampilan tatap muka sistem informasi atau aplikasi yan...
Baca selengkapnya

Siapa itu Bjarne Stroustrup

-
Gambar
  Bjarne Stroustrup dilahirkan di kota Aarhus Denmark pada tanggal 30 desember 1950. Berjane stoustrup adalah seorang ilmuan komputer yang sangat berpengaruh oleh dunia. Dia menciptakan bahasa pemrograman yang sampe sekarang masih berguna oleh dunia yaitu menciptakan “C++” (C-Plusplus). Ia meraih gelar cand.scient di bidang matematika dan ilmu komputer pada tahun 1975 dari university of Aehous Denmark, gelar Ph.d di bidang ilmu komputer didapatkanya tahun 1979 di Cambridge University, England. Bjarne Stroustrup adalah perancang sekaligus implementator dari bahasa pemrograman yang terkenal saat ini yaitu C++.
Baca selengkapnya