Bidhuan.id – Apa sih Pengertian css itu? Pengertian css bisa disandingkan dengan komponen lainnya seperti html, php, javascript, jquery dan lainnya yang mendukung kinerja daripadanya. Css merupakan bahasa pemrogramman dengan berbagai kumpulan banyak kode yang mewakili sekaligus menjelaskan bagaimana desain bisa dibuat dari bahasa markup. Yang termasuk dalam bahasa markup itu sendiri ialah html salah satunya sobat.
Pengertian css bisa juga dikatakan sebagai kode pendukung dalam proses mendesain dan juga memperindah tampilan web yang anda buat menggunakan html. Tanpa adanya css ini tampilan html akan terasa hambar dan kaku (statis). Dengan kondisi yang demikian ini, css bisa dikatakan memiliki hubungan dengan html yang tujuannya adalah saling melengkapi antara satu dengan lainnya.
Fungsi dan Kegunaan dari CSS Secara Umum
Sebelum mempelajari lebih dalam lagi tentang css, mengetahui fungsi dan kegunaan dari css adalah hal yang wajib. Bagaimana bisa paham cara pengoperasiannya kalau fungsi dan kegunaannya anda saja tidak tahu. Penggunaan css pada awalnya karena semakin meningkatnya kebutuhan akan web untuk menunjang berbagai aktivitas sehari – hari khususnya dunia bisnis dan iklan.
Sedangkan kemunculan html, pembuatan paragraf bisa anda warnai menjadi merah serta anda bisa leluasa membuat pengkodean di dalam tag html secara langsung. Selain itu juga bisa mengubah halaman pada latar belakangnya menjadi berwarna biru.
Untuk lebih jelasnya anda bisa memperhatikan contoh di bawah ini ya sobat.
<!DOCTYPE html>
<html>
<head>
<title>Test Tag Font HTML</title>
</head>
<body>
<p>
CSS merupakan bahasanya <font color=”red”>desainer web</font>.
Namun sebenarnya, apa itu CSS?
<br />
<font color=”red”>CSS </font> adalah kumpulan kode yang digunakan
untuk mendefenisikan desain dari bahasa markup,
<font color=”red”>salah satunya adalah HTML</font>.
<br />
Dengan CSS kita bisa mengubah desain dari
<font color=”red”>text, warna, gambar dan latar belakang</font>
dari (hampir) semua kode tag HTML.
</p>
</body>
</html>
Inilah hasil tampilannya setelah kode di atas dijalankan di sebuah browser :
Pada tampilan di atas untuk merubah warna merah pada beberapa kalimatnya, penulis memanfaatkan tag <font>. Anda bisa mengaplikasikan warna lainnya cukup dengan merubahnya pada tag <font color=”red”>. Ini masih mudah jika diterapkan pada baris kode yang masih sedikit, namun untuk baris kode dan halaman yang banyak cara ini tentu saja kurang efektif, anda perlu menyelipkan kode font tersebut pada masing – masing baris yang ingin diubah warnanya.
Merubah Jenis Font HTML dengan Property Font-Family
Merubah jenis font dalam upaya mempercantik web memang sangat perlu dilakukan. Biasanya juga digunakan untuk membedakan antara bagian satu dengan yang lainnya untuk memudahkan penggunanya (user).
Inilah kode yang bisa anda coba ikuti sobat :
<style type=”text/css”>
body { font-family: Arial; }
p { font-family: Courier, monospace; }
div { font-family: “Duru Sans”, Verdana, sans-serif; }
<style>
Dengan menggunakan cara ini anda bisa mengubah satu baris kode dengan beberapa font sobat. Oleh karena itu pengubahan font ini disebut sebagai property font-family. Menarik bukan? Silahkan dicoba.
Di bawah ini terdapat contoh lengkapnya juga sobat yang sengaja penulis siapkan untuk anda semua, yuk cekidot :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Belajar CSS di Duniailkom</title>
<style type=”text/css”>
body { font-family: Calibri, Helvetica, Arial, sans-serif; }
h3 { font-family: Cambria,”Times New Roman”,serif; }
#paragraf2 { font-family: Georgia, serif; }
</style>
</head>
<body>
<h3>Belajar CSS: font-family</h3>
<p>
<strong>HTML dan CSS</strong>
bagian penting dari sebuah website
<p>
<p id=”paragraf2″>
Antara keduanya mempunyai hubungan yang kuat dan saling mendukung
Istilahnya, <em>HTML for content, CSS for Presentation</em>.
</p>
</body>
</html>
Inilah tampilan yang akan anda dapatkan setelah menjalankan kode di atas di browser tertentu pilihan anda sobat :
Menggunakan Font External dengan Memanfaatkan CSS
Ternyata tidak hanya bisa menggunakan font lokal saja sobat di dalam css, anda juga bisa menggunakan font di luar css jika memang pilihan yang ada masih saja kurang memadai. Karena pada dasarnya font-family memang sangat terbatas pilihannya. Caranya pun sangat mudah kok sobat. Anda tidak perlu khawatir akan merasa kesulitan.
Jenis font external yang bisa digunakan di web browser antara lain sebagai berikut :
- EOT (Embedded Open Type) : didukung oleh browser Internet Explorer.
- TTF (True Type) and OTF (Open Type) : didukung oleh browser IE 9 dan diatasnya, Firefox, Chrome, Safari, Opera, iOS Safari (versi 4.2 dan diatasnya), Android, dan Blackberry Browser.
- WOFF (Web Open Font Format) : didukung oleh browser E 9 dan diatasnya, Firefox, Chrome, Safari, Opera, Blackberry browser, and iOS Safari versi 5 dan diatasnya
- SVG (Scalable Vector Graphic) : didukung oleh browser iOS Safari versi 4.1 atau sebelumnya.
Dibawah ini terdapat contoh bagaimana mengoperasikan font external sebagai tambahan di dalam css :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Font External CSS</title>
<style type=”text/css”>
@font-face {
font-family: “Font Digital”;
src: url(‘DIGITAL-7_2.TTF’);
}
.digital {
font-family: “Font Digital”;
}
</style>
</head>
<body>
<h2>Belajar Font External CSS</h2>
<h3>Font reguler:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla erat dolor, ullamcorper in ultricies eget,
fermentum rhoncus leo. Curabitur eu mi vitae metus
posuere laoreet.</p>
<h3>Font external (digital):</h3>
<p class=”digital”>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,
fermentum rhoncus leo. Curabitur eu mi vitae
metus posuere laoreet.</p>
</body>
</html>
Cara di atas penulis memanfaatkan font yang merupakan bawaan dari Windows sobat. Ambil saja dulu filenya dan copas ke folder yang sama dengan kode html yang anda buat untuk memudahkan.
Sedangkan di bawah ini terdapat tampilan dari kode yang anda buat di atas setelah diruning menggunakan browser tertentu :
Perlu anda pahami bahwasannya kode di bawah ini merupakan kode kunci untuk memberikan perintah penggunaan font external :
@font-face {
font-family: “Font Digital”;
src: url(‘DIGITAL-7_2.TTF’);
}
Menggunakan Google Font dalam CSS
Tahukah anda sobat bahwasannya google sendiri menyediakan google font yang sengaja dibuat untuk mendukung para web developer sehingga anda yang memang berkecimpung dibidang ini akan dengan mudah mempercantik web yang sedang anda bangun dan gratis pula untuk mendapatkannya.
Untuk bisa mengakses google font, anda bisa mengunjungi link ini ya sobat : https://www.google.com/fonts.
Jika anda sudah berhasil melakukan pencarian pada link yang sudah penulis berikan di atas, maka anda akan langsung dihadapkan dengan tampilan pencarian font sobat. Ternyata tidak ribet ya sobat. Selanjutnya anda bisa mempelajari terlebih dahulu mana font yang cocok digunakan atau sekedar melihat – lihat. Jika ada yang cocok bisa langsung dicoba.
Yang perlu diperhatikan adalah saat anda sudah menemukan font yang cocok untuk digunakan, maka anda bisa langsung klik button Add to Collection. Secara otomatis google akan melakukan penyimpanan sementara terlebih dahulu. Cara kerjanya bisa dibilang hampir sama dengan fitur keranjang (shopping chart) pada marketplace. Di bawah ini terdapat tampilan jika anda sudah menentukan pilihan font yang akan digunakan.
Pilihan font bisa sampai 10 font lo sobat. Jika sudah selesai anda bisa langsung mengklik button Use seperti tampilan di bawah ini ya :
Setelah tampilan di atas muncul, maka anda akan diberikan 4 pilihan yang bisa anda atur sesuai dengan keinginan, pilihannya meliputi :
- Pilihan pertama, anda bisa dengan leluasa jenis – jenis huruf sesuai kebutuhan.
- Pilihan kedua,anda bisa dengan leluasa memilih karakter set.
- Pilihan ketiga, anda bisa dengan leluasa menghubungkan google font dengan bagian lembar kerja html.
- Pilihan keempat, anda bisa dengan leluasa melihat petunjuk yang sudah tertera didalamnya bagaimana cara menggunakan di dalam css.
Bisa diambil kesimpulan bahwasannya pengertian css sendiri mempunyai jangkauan yang sangat luas. Berbeda individu, pasti berbeda pemahaman dan juga penjelasan. Namun pada dasarnya intinya sama sobat. Sebenarnya masih banyak yang perlu dibahas berhubungan dengan css. Tapi dalam sekali pembahasan pun rasanya tidak mungkin jika mengulas semua hal yang berhubungan dengan css. Karena ilmu ini terus berkembang dan masih bisa dikembangkan secara terus menerus.
Baca juga mengenai hal penting dalam migrasi hosting wordpress com ke hawkhost untuk pemula
