Fungsi apa saja yang dapat digunakan pada tag css?

Bila mengenal HTML, tentunya kamu juga sudah tidak asing dengan CSS. Konon katanya, membuat website akan kurang bila belum menggunakan CSS. Lalu, apa itu CSS?

Cascading Style Sheets (CSS) merupakan bahasa pemrograman yang digunakan untuk menentukan bagaimana dokumen dan website akan disajikan. CSS dibuat oleh Word Wide Web Consortium (W3C) pada 1996.

Jadi, CSS berisi kumpulan perintah yang digunakan untuk menjelaskan tampilan halaman situs web dalam mark-up language, seperti HTML yang terkenal sebagai bahasa pemrograman 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 mark up language) merupakan bahasa pemrograman yang paling sering digunakan dalam pembuatan website. HTML merupakan sesuatu yang berada di balik layar tampilan halaman web yang sehari-hari diakses oleh pengguna. Tanpa kehadiran HTML, tampilan web tentunya akan berantakan.

Lalu, CSS dan HTML memiliki keterikatan satu sama lain. CSS merupakan kode-kode yang dipakai untuk mendesain laman HTML. Bila diibaratkan dengan bahasa awam, HTML dapat dikatakan sebagai handphone dan CSS adalah casing yang akan membuat handphone terlihat semakin cantik.

CSS berfungsi untuk membantu para web designer agar dapat mengubah dan menambahkan, baik teks, gambar, hingga latar belakang sebuah halaman HTML. Biasanya, keberadaan CSS dapat langsung terlihat dengan adanya perbedaan pada warna teks. CSS memberi perintah teks berwarna biru dengan tag dengan tambahan tag class=” nama warna”. Dengan demikian, setiap tag muncul, teks yang mengikutinya pun akan berwarna sesuai warna yang diinginkan dan seterusnya. Untuk melihat berbagai tag yang dapat digunakan silakan klik link berikut ini.

Fungsi CSS

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

1. Proses loading halaman web lebih cepat

   Satu rangkaian kode CSS dapat diaplikasikan untuk beberapa halaman website sekaligus sehingga jumlah kode dapat diminimalkan. Hal ini tentunya akan membuat beban loading website menjadi lebih kecil. Alhasil, kecepatan saat loading website pun akan menjadi lebih cepat.

2. Beragam variasi

   Seperti yang kita ketahui, HTML memang dapat digunakan untuk mengatur tampilan website. Sayangnya, terbatas. Namun hal ini tidak berlaku bagi CSS yang menawarkan lebih banyak style tampilan pada halaman website.

3. Tampilan website akan lebih rapi

   Dengan menggunakan CSS, tampilan halaman website pun akan rapi dan optimal di berbagai ukuran layar pengguna, baik itu desktop maupun smartphone. Sehingga pemilik website tidak perlu repot mengatur dan pusing memikirkan website tidak maksimal dibuka dari perangkat-perangkat pengunjung.

   Hal ini disebabkan oleh kelebihan CSS yang memiliki berbagai property untuk mengatur tampilan konten agar sesuai kebutuhan layar, salah satunya dengan max-width. Saat menggunakan property tersebut, ukuran elemen HTML pun akan berubah sesuai ukuran layar yang digunakan untuk menampilkan website. Kehadiran CSS bagi website terbilang penting. Tanpa adanya CSS, tampilan website tentu akan monoton dan membutuhkan waktu yang lama untuk loading.

Jenis CSS

CSS dibagi menjadi beberapa macam tergantung fungsi penggunaannya, namun ada tiga macam jenis yang paling sering digunakan oleh web designer.

Dalam pengetahuan pemrograman dasar, kamu akan dikenalkan dengan HTML dan CSS. Keduanya menjadi basic yang wajib dimiliki oleh seorang programmer, terlebih bagi seorang front end developer. Lalu, apa itu CSS?

Sebelum membahas terlalu dalam, CSS adalah salah satu jenis kode untuk mempercantik tampilan HTML sehingga user punya experience lebih baik pada sebuah website. Kali ini Jagoan Hosting akan memberikan panduan dasar mengenai CSS bagi pemula. Yuk langsung kita simak artikel berikut!

Apa itu CSS?

Kepanjangan CSS adalah singkatan dari Cascading Style Sheets, yang berguna untuk menyederhanakan proses pembuatan website dengan mengatur elemen di bahasa markup. Pemakaian CSS adalah untuk mendesain website front end.

Ketika menggunakan CSS, kamu akan bisa mengeksplorasi lebih jauh dibandingkan dengan bahasa pemrograman HTML dan PHP. Karena saat menggunakan CSS, kamu bisa mengatur gaya huruf, warna huruf, ukuran huruf, baris antar paragraf, serta jenis background yang ingin digunakan. Selain itu, CSS juga biasa digunakan untuk mendesain layout, efek untuk website, dan memvariasikan tampilan di berbagai perangkat berbeda. 

Fungsi CSS

Sudah pernahkah kamu mencoba mengembangkan website menggunakan HTML atau PHP? Jika sudah, pasti kamu merasa kesulitan untuk menata dan mengatur tampilannya, kan? 

Pada dasarnya HTML dan PHP dikembangkan memang bukan untuk mendesain tampilan depan website. Jadi, menggunakan CSS adalah  pilihan tepat! Contohnya jika kamu membuat tombol menggunakan HTML, pasti kamu hanya bisa menampilkan button yang biasa saja. Sedangkan dengan menggunakan CSS, tombol yang kamu buat bisa diberikan style seperti warna, ukuran, dan lainnya. 

Halaman lebih cepat dimuat

Pertama, fungsi CSS adalah untuk respon halaman website yang lebih cepat. Ketika menggunakan CSS kamu hanya perlu menulis satu aturan dan menerapkannya di berbagai file yang membutuhkan hanya dengan memanggilnya. 

Jadi, code yang kamu buat pun akan lebih singkat dan nantinya membuat proses download menjadi lebih cepat.

Mempercepat proses desain

Jika menggunakan CSS, kamu tidak perlu lagi menyalin satu per satu desain ke setiap file halaman. Ini berlaku ketika kamu membuat suatu desain yang sama di beberapa halaman. Nah, kamu tidak perlu lagi melakukan hal itu saat menggunakan CSS! 

Kamu hanya perlu mengetikkan satu kali fungsi CSS lalu menggunakannya di banyak halaman HTML. Bukankah hal ini akan mempercepat proses desain?

Mengatur style dalam website

CSS memiliki atribut yang lebih beragam jika dibanding dengan HTML ataupun PHP. Dengan CSS kamu bisa menentukan font selain default, menentukan warna dan ukuran teks, menerapkan warna background, menambah elemen tabel dan menggabungkannya ke posisi tertentu. 

Sangat signifikan bukan fungsi CSS dalam pengembangan website? Yup, oleh karena itu, apabila kamu berencana membuat website seperti website portofolio, jangan lupa untuk menggunakan CSS ya!

Selain itu, untuk membangun sebuah website utuh yang keren dan berkualitas kamu bisa mencoba produk unlimited hosting dari Jagoan Hosting. 

Produk ini merupakan hosting termurah di seluruh Indonesia! Tidak percaya? Hanya dengan 9 ribu kamu sudah bisa berlangganan sekarang!

Meski dengan harga yang bisa dibilang sangat murah, kamu tidak perlu khawatir soal kualitasnya. Apalagi udah Gratis Domain dan SSL. Coba langganan dan buktikan sendiri hanya di Jagoan Hosting!

Baca juga: Pengertian XAMPP, Fungsi, Komponen, Fitur dan Cara Install

Jenis CSS

Setelah memahami fungsi CSS, kamu juga perlu tahu bahwa dalam proses implementasinya, ada 3 jenis CSS yang bisa kamu praktekkan. Setiap jenisnya memiliki fungsi, kelebihan, dan kekurangan masing-masing. 

Berikut penjelasan dari ketiga jenis CSS tersebut:

1. Internal CSS

Internal CSS adalah kode CSS yang penulisannya dalam tag <style> dan posisinya ada pada bagian atas header file HTML. CSS jenis ini berguna untuk membuat custom khusus dalam satu halaman website. Penggunaannya cocok untuk kamu yang sedang mengerjakan website dengan tampilan berbeda-beda. 

Kelebihan internal  CSS adalah :

• Editing yang mudah di tiap halaman website
• Tidak perlu melakukan upload file CSS karena termasuk ke dalam HTML
• Internal stylesheet bisa memakai ID dan Class
• Error mudah diperbaiki

Kekurangan internal  CSS adalah :

• Kurang efisien, karena harus menuliskan ulang untuk penggunaan di beberapa halaman website
• Memperlambat performa website karena memiliki CSS sendiri di tiap halamannya
• Ukuran file menjadi lebih besar 

2. External CSS

External CSS adalah kode CSS yang dituliskan terpisah dengan file HTML, dan ditulis sendiri pada file ekstensi .css. Penulisan file eksternalnya bisa diletakkan pada bagian <head>, jadi setiap halaman website dilakukan pemanggilan file .css. Penggunaannya cukup sederhana karena tidak perlu menuliskan CSS pada setiap file HTML.

Kelebihan external CSS adalah :

• Ukuran file lebih kecil
• Code rapi
• Respon website lebih cepat
• Bisa digunakan untuk beberapa halaman website berbeda

Kekurangan external CSS adalah :

• Kurang cocok untuk halaman custom
• Halaman website rawan berantakan saat file CSS gagal load sempurna

3. Inline CSS

Jenis yang terakhir ini langsung memasukkan kode CSS yang ditulis pada setiap atribut HTML. Jadi, di setiap atribut memiliki style CSS yang berbeda sesuai kebutuhan dan ini tergolong kurang efisien jika dibanding jenis CSS lainnya.

Cara Kerja CSS

Cara kerja CSS sebenarnya cukup simpel. Mengingat default CSS memakai Bahasa Inggris berbasis syntax dengan struktur yang terbilang sederhana, yakni selector dan declaration block.

Meskipun begitu, cara kerja CSS rupanya juga didukung oleh berbagai rule. Namun tenang saja, sebab rule-nya tidak kompleks. Tentukan saja elemen yang diinginkan. Setelah itu, declare elemen tersebut. Selesai!

Agar lebih jelas, ambil saja contoh:

<p>This is a paragraph.</p>.

Lalu, kamu ingin setiap elemen <p> hurufnya ditebalkan atau bold dan berwarna hijau.

Maka, yang perlu kamu lakukan adalah:

<style>

p {

color: green;

text-weight: bold;

}

<style>

Contoh CSS

Contoh CSS code sederhana lainnya adalah sebagai berikut:

Untuk warna background website merah muda

body 

{

  background-color: pink;

} 

Untuk mengubah jenis font di semua paragraf 1 menjadi Verdana dan berukuran 20px

h1 

{

  font-family: verdana;

  font-size: 20px;

}

Contoh Properti CSS

Pada umumnya, jika kamu menuliskan suatu property CSS, maka kamu juga akan menuliskan valuenya. Lalu, apa itu CSS properti dan fungsinya? Properti ini berfungsi untuk memberi efek khusus pada elemen HTML dan nantinya ditampilkan pada website. 

Untuk lebih jelasnya, kamu bisa mengetahui apa saja properti CSS seperti daftar di bawah ini! 

1. Border

Border adalah properti CSS yang digunakan untuk mengatur dan membuat garis tepi pada HTML dengan banyak variasi. Untuk garis tepi bagian kanan kamu bisa menggunakan border-right, dan border-left untuk sebelah kiri. 

Contoh border properti:

1. Border-left-width :mengatur lebar garis kiri
2. Border-color :mengatur warna dari garis
3. Border-style : mengatur style dari garis
4. Border-top : membuat garis atas
5. Border-right : membuat garis kanan

2. Background

Border properti ini digunakan untuk mengatur background tampilan website.

Contoh :

1. Background-color : memberi warna pada latar belakang
2. Background-image : memberi gambar pada latar belakang dari suatu element
3. Background-position : mengatur posisi gambar pada latar belakang

Baca juga: 6 Tips Belajar Coding Otodidak untuk Programmer Pemula

3. Color

Jika kamu ingin mengubah warna text, background, dan lain sebagainya, kamu bisa menggunakan properti color ini. 

4. Float

Properti float digunakan untuk mengatur text agar dapat melipat di sekitar elemen gambar, namun juga bisa digunakan untuk layout dan style lainnya. 

Contoh : 

float: right;

Untuk menentukan elemen harus mengapung di sebelah kanan elemen yang menampungnya.

5. Font

Properti kelima dari CSS adalah font. Properti ini bisa kamu gunakan untuk menentukan ukuran font, gaya teks, dan jenis font yang akan ditampilkan di website nantinya. 

Contoh :

1. Font-weight : mengatur ketebalan dari text
2. Font-size : mengatur ukuran font sesuai yang diinginkan
3. Font-family : mengatur jenis font yang ingin dipakai
4. Font-style : mengatur style font yang akan digunakan pada text
5. Font-variant : mengatur font apakah menjadi huruf kecil atau tidak

6. Height

Properti selanjutnya dari CSS adalah height. Ini adalah properti yang bisa kamu gunakan untuk mengatur tinggi dari suatu elemen secara otomatis dalam nilai seperti pixel, cm, em, persen, dan sebagainya. 

7. Padding

Untuk menghasilkan ruang kosong di sekitar konten, entah di dalam atau di luar kamu bisa mengatur paddingnya.

Contoh :

1. Padding-top  : mengatur ruang elemen dengan konten bagian atas
2. Padding-right : mengatur ruang elemen dengan konten bagian kanan
3. Padding-bottom : mengatur ruang pada elemen dengan konten bagian bawah
4. Padding-left : mengatur ruang pada elemen dengan konten bagian kiri

8. Margin

Beda dengan padding, margin digunakan untuk membuat ruang kosong di sekitar elemen bagian luar. Kamu bisa mengaturnya pada sisi bawah, atas, kiri, dan kanan secara terpisah.

Contoh :

1. Margin-top : mengatur jarak antar elemen bagian atas
2. Margin-right : mengatur jarak elemen bagian kanan
3. Margin-bottom : mengatur jarak elemen bagian bawah
4. Margin-left : atur jarak antar elemen bagian kiri

9. Weight

Terakhir, properti dari CSS ini digunakan untuk mengatur ketebalan dari text.

Nah, itulah informasi seputar CSS. CSS adalah jenis kode yang perlu kamu kuasai sebagai seorang pengembang website. Setelah menguasai basic-nya, cobalah untuk mengeksplorasi berbagai variasi tampilan yang bisa kamu ciptakan. 

Berbicara mengenai perkondingan, ada kabar baik nih untuk kita semua, Sob! Alterra Academy membuka Bootcamp Programmer bagi kalian para programmer atau seseorang yang ingin mengasah skill lebih dalam lagi di dunia programming.

Tak harus memiliki latar belakang IT, kamu sebagai pemula pun bisa gabung dan mengikuti seluruh kegiatan pelatihannya. Yuk siapkan diri menjadi programmer berkualitas dari sekarang!

Apa saja fungsi dari CSS?

Apakah fungsi dari CSS berikan contoh?

Apa saja yang bisa dilakukan dengan menggunakan CSS?

Sebutkan apa saja 3 penulisan CSS?