Cara menggunakan external style sheet adalah

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 yang dimaksud dengan external style sheet?

Pada bagian HTML manakah external style sheet diletakkan?

Bagaimana cara kerja CSS?

Bagaimana cara menggunakan CSS di HTML?