CSS (Cascading Style Sheet)

  

CSS (Cascading Style Sheet)

I. Pengertian CSS                                                                                                             

            Cascading Style Sheet (CSS) merupakan bahasa pemograman yang digunakan untuk menentukan bagaimana dokumen dan website akan disajikan. CSS dibuat oleh Word Wide Web Consortium (W3C) pada tahun 1996. CSS berisi kumpulan perintah yang digunakan untuk menjelaskan tampilan halaman situs web dalam mark-up language, seperti HTML yang terkenal sebagai bahasa pemograman standar dan sering digunakan dalam proses pembuatan website. CSS hadir sebagai pemisah konten dari tampilan visualnya di situs di mana tentunya berpengaruh pada tampilan sebuah website.

•  Hubungan CSS dan HTML

        HTML (HyperText Markup Language) merupakan bahasa pemograman yang paling sering digunakan dalam pembuatan website. Lalu, CSS dan HTML memiliki keterikatan satu sama lain. CSS merupakan kode-kode yang dipakai untuk mendesain laman HTML. CSS berfungsi untuk membantu para web designer agar dapat mengubah dan menambahkan, baik teks, gambar, hingga latar belakang sebuah halaman HTML.

• Fungsi CSS

Berikut beberapa fungsi CSS lainnya yang baik untuk website, antara lain:

1. Proses loading halaman web lebih cepat
2. Beragam variasi
3. Tampilan website akan lebih rapi

• Jenis jenis CSS

        CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah dan parameter lainnya. Berikut jenis-jenis CSS.

• Inline style

        Dimana kode CSS ditulis langsung di elemen yang diinginkan. 

Contoh:

• Internal CSS

        Internal CSS hanya bisa digunakan pada satu halaman saja (CSS tidak bisa digunakan untuk halaman lain). Penulisan CSS ini diletakkan di dalam elemen head dengan diawali <style> dan diakhiri </style>. 

Contoh:

• External CSS

        Dengan External CSS, kita bisa menggunakan style untuk beberapa halaman dalam suatu website. Untuk menggunakannya, kita cukup memanggilnya dengan link dan berada di dalam elemen head.

Contoh:

• Tata Letak CSS

Ada beberapa gaya tata letak di CSS yaitu sebagai berikut.

1. Flexbox

          Untuk membuat layout menggunakan Flexbox, kita menambahkan display: flex untuk mendefinisikan Flexbox pada sebuah elemen dan flex-direction (untuk mengatur arah elemen : column atau row).

 

           Pertama kita definisikan display: flex; dan memberikan jenis perataan pada elemen dengan property justify-content, kemudian kita isi dengan nilai space-between yang memberikan jarak pada elemen. Property justify-content memiliki nilai yang lain, antara lain:

• flex-start (default)
• flex-end
• center
• space-between
• space-around
• space-evenly 

      2. Grid

           Untuk membuat layout menggunakan CSS Grid, kita menambahkan display: grid di sebuah elemen property grid (mengatur ukuran elemen), grid-gap (untuk mengatur jarak antar elemen), property grid-template-columns (untuk mengatur jumlah kolom yang akan dibuat dengan mendefinisikan sebuah nilai yang dipisahkan oleh spasi).

 

                                     

• Warna

Ada banyak sekali warna di CSS, sebagai berikut:

•  Penerapan CSS

Berikut ini adalah beberapa contoh penerapan CSS yang mudah:

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 biru, kita cukup menambahkan kode di bawah ini:

HTML: 

CSS:  

Hasil:

2. Mengubah Warna Link

        Kita 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 kita meletakkan kursor di atas link
• Active: warna link ketika kita klik

HTML: 

CSS: 

Hasil: 

3. Menentukan Huruf Kapital/Kecil

        Ingin agar sebuah paragraf berisi huruf kecil saja? Kita 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 Kita membuat kotak teks. Umumnya, kotak teks digunakan untuk menonjolkan sebuah informasi penting. Untuk melakukannya, gunakan contoh CSS ini: 

HTML:

CSS:

Hasil: 

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

<p class="important">Hallo, Selamat Pagi</p>