Pengertian CSS, Fungsi, dan Contoh Format Penulisan CSS

Oleh Nikita Dini 26 Apr, 2017

CSS adalah singkatan dari Cascading Style Sheets. CSS berisi rangkaian instruksi yang menentukan bagaimana suatu text akan dapat tampil pada halaman web. Perancangan desain text bisa dilakukan dengan cara mendefinisikan fonts (huruf), colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain sebagainya.

Pengertian CSS, Fungsi, dan Contoh Format Penulisan CSS - Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut sebagai "styles" (gaya). Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan.

Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet. Saat menggunakan CSS, kita tidak perlu menulis font, color, atau size pada setiap paragraf, atau pada setiap dokumen. Setelah membuat sebuah style sheet, kita dapat menyimpan kode tersebut sekali saja dan dapat menggunakannya kembali apabila diperlukan.

Apa itu CSS?

CSS adalah singkatan dari Cascading Style Sheets
CSS menjelaskan bagaimana elemen HTML ditampilkan di layar, kertas, atau media lainnya
CSS menghemat banyak pekerjaan. Ini bisa mengendalikan tata letak beberapa halaman sekaligus sekaligus

Pengertian CSS, Fungsi, dan Contoh Format Penulisan CSS_

image source: blog.teamtreehouse.com

baca juga:

Sejarah CSS

CSS pertama kali berawal semenjak munculnya SGML pada sekitar tahun 1970. Sejak kemunculannya tersebut, CSS mengalami perkembangan yang sangat pesat. Format dasar CSS yang banyak kita gunakan sekarang ini merupakan ide dari seoang programmer bernama Hakon Wium Lie yang tertuang dalam proposalnya mengenai Cascading HTML Style Sheet (CHSS) pada bulan Oktober 1994 (dalam konferensi W3C di Chicago, Illinois). Kemudian, beliau bersama-sama dengan seorang temannya yang bernama Bert Bos mengembangkan suatu standard CSS.

Pada akhir tahun 1996, CSS telah resmi dipublikasikan (dan menyusul kemudian CSS Level 1 pada bulan Desember). Pengerjaan proyek ini juga didukung oleh seorang programmer bernama Thomas Reardon dari perusahaan software ternama, Microsoft. CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS).

Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi. CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.

Sekarang penggunaan CSS telah semakin meluas dan terus dikembangkan. Hal ini juga akan mempermudah seorang web designer dalam mengembangkan suatu halaman web (situs).

Fungsi CSS

CSS memudahkan kita untuk mengatur dan memilih sebuah website. Manfaat lain CSS diantaranya adalah:

Kode HTML menjadi lebih sederhana dan lebih mudah diatur.
Ukuran file menjadi lebih kecil sehingga load file lebih cepat.
Mudah untuk mengubah tampilan, hanya dengan mengubah CSSnya.
Dapat berkolaborasi dengan Java Script dan merupakan pasangan Setia HTML.
Dapat digunakan dalam hampir semua jenis web browser.

Keuntungan Menggunakan CSS

Berikut mengikuti beberapa keuntungan menggunakan CSS :

1. Konsumsi Bandwidth Lebih Rendah

Salah satu keuntungan yang paling penting dari CSS adalah konsumsi bandwith lebih rendah dibandingkan dengan style langsung di HTML. Dari perspektif pembangunan, waktu yang dibutuhkan oleh sebuah website untuk memuat adalah perhatian utama. Pengembang dapat menyimpan style sheet di cache memory setelah men-download dan halaman berikutnya tidak memerlukannya untuk didownload waktu dan lagi

CSS melengkapi HTML. HTML adalah yang bahasa coding paling populer, tetapi tidak menghasilkan desain yang baik ketika digunakan secara terpisah untuk mengembangkan situs. Tetapi jika HTML dikombinasikan dengan CSS, halaman web secara teknis kuat.

2. Penempatan Posisi Lebih Fleksibel

Pengembang web memilih CSS karena menawarkan fleksibilitas yang lebih besar dalam hal penempatan berbagai posisi elemen di halaman website . Ini mungkin terjadi ketika mengembangkan website yang penempatan beberapa link atau kolom tidak sesuai dengan struktur. Jika website ini sedang dikembangkan menggunakan CSS, maka tugas reposisi akan sangat mudah bagi pengembang karena ia dapat menempatkan sesuatu di mana saja.

3. Kompatibilitas dengan browser web yang berbeda

Sejak Cascading Style Sheet kompatibel dengan sebagian besar browser web, yang disediakan situs tersebut telah dikembangkan dengan menggunakan HTML atau XHTML. Situs CSS memungkinkan bekerja pada semua browser web

4. Cetak halaman web ramah

Alasan lain di balik meluasnya penggunaan CSS untuk aplikasi web berbasis HTML adalah bahwa mereka menghasilkan halaman web ramah cetak. CSS otomatis menghilangkan warna dan gambar sehingga mencetak halaman menjadi sangat mudah

5. Kustomisasi dari halaman web

CSS menggila di kalangan pengembang website karena menawarkan kustomisasi. Pengembang web sangat menyukai itu karena industri pengembangan web ini difokuskan pada pengembangan website yang bisa disesuaikan dengan kebutuhan. Keuntungan Menggunakan CSS Seorang pengembang dapat dengan mudah mengubah tata letak halaman tanpa merusak presentasi konten karena style sheet CS disimpan secara eksternal.

Terlepas dari keuntungan, CSS hadir dengan dukungan lainnya seperti kompatibilitas untuk mencari visibilitas mesin, konten portabilitas, konsistensi dalam halaman.

Perbedaan antara CSS dan HTML

HTML (yang Hypertext Markup Language) dan CSS (Cascading Style Sheets) adalah dua teknologi inti untuk membangun halaman Web. HTML menyediakan “struktur” dari halaman. CSS adalah bahasa yang kuat untuk menggambarkan (visual dan pendengaran) tampilan halaman, untuk berbagai perangkat. Seiring dengan grafis dan scripting, HTML dan CSS adalah dasar-dasar membangun halaman Web dan Web Aplikasi.

CSS

CSS adalah bahasa untuk menjelaskan presentasi dari halaman Web. dalam Ini termasuk warna, tata letak, dan font informasi, serta bagaimana mengubah presentasi pada berbagai jenis perangkat, seperti
yang dengan layar besar, layar kecil, atau printer. CSS adalah independen dari HTML dan dapat digunakan dengan berbasis XML markup language. Pemisahan HTML dari CSS membuatnya lebih mudah untuk menjaga kode, berbagi style sheet di halaman, dan halaman penjahit lingkungan
yang berbeda. Ini disebut sebagai pemisahan struktur (atau konten) dari presentasi.

HTML

HTML adalah bahasa untuk menggambarkan struktur halaman Web. HTML memberikan penulis cara-cara untuk:

Publikasikan dokumen online dengan judul, teks, tabel, daftar, foto, dll
Mengambil informasi online melalui hypertext link, di klik sebuah tombol.
Desain formulir untuk melakukan transaksi dengan layanan jarak jauh, untuk gunakan dalam mencari informasi, membuat reservasi, memesan produk, dll.
Menyebarkan-lembaran, klip video, klip suara, dan aplikasi lain secara langsung dalam dokumen mereka.

Dengan HTML, penulis menggambarkan struktur halaman menggunakan “markup.” The ” unsur-unsur “label bahasa potongan konten seperti” paragraf, “” daftar, “” tabel “, dan sebagainya.

Jenis-Jenis CSS

Secara umum CSS terbagi atas 3 jenis, antara lain :

1. Inline
Inline digunakan untuk mengatur CSS secara langsung tanpa tag <style> contohnya seperti ini:

<a href="http://feichangzhidao.blogspot.com" style="color=blue;">Modul Makalah</a>

Bagian yang berwarna biru adalah CSS Inlinenya. Dan berikut hasilnya:

Modul Makalah

2. Internal CSS
Internal berbeda dengan Inline karena pengaturan CSS tipe Internal dilakukan diantara tag <style> atau dalam blog biasanya <b:skin>. CSS tipe inilah yang biasa digunakan oleh para blogger. contohnya seperti ini :
<style>#tulisan {background-color=#FFFFFF;}</style>

Bagian yang warna merah adalah property yang diatur dalam tag <style> biasanya menggunakan selector id ataupun class agar dapat dipanggil sewaktu-waktu tanpa harus mengetik lagi. Dari sisi praktis jelas lebih praktis yang ini daripada Inline.

3. External CSS

Eksternal CSS biasanya digunakan oleh para webmaster/web designer. Untuk membuatnya biasanya menggunakan Notepad++ (atau yang lainnya) lalu disimpan dengan ekstensi .css dan sewaktu-waktu bisa dipanggil menggunakan :
<link rel="stylesheet" type="text/css" href="Nama file CSS"/>

nb: ganti tulisan merah dengan file CSS-mu

Fungsi dari tag diatas adalah untuk memanggil file CSS ke web. Jika dibandingkan dengan internal maupun Inline maka jelas paling praktis yang ke-3 ini karena tinggal dengan format diatas saja (Dengan catatan anda tidak menerapkannya pada blog).

Format Penulisan CSS

CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut <style> atau <style="…"> dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain. Berikut adalah contoh format penulisan CSS, untuk hasilnya bisa dilihat setelahnya.

<!DOCTYPE html><html><head><style>/* Stylesheet 1: */body { font: 100% Lucida Sans, Verdana; margin: 20px; line-height: 26px;}
.container { xmin-width: 900px;}
.wrapper { position: relative; overflow: auto;}
#top, #sidebar, #bottom, .menuitem { border-radius: 4px; margin: 4px;}
#top { background-color: #1565D0; color: #ffffff; padding: 15px;}
#menubar { width: 200px; float: left}
#main { padding: 10px; margin: 0 210px;}
#sidebar { background-color: #32a4e7; color: #ffffff; padding: 10px; width: 180px; bottom: 0; top: 0; right: 0; position: absolute;}
#bottom { border: 1px solid #d4d4d4; background-color: #f1f1f1; text-align: center; padding: 10px; font-size: 70%; line-height: 14px;}
#top h1, #top p, #menulist { margin: 0; padding: 0;}
.menuitem { background-color: #f1f1f1; border: 1px solid #d4d4d4; list-style-type: none; padding: 2px; cursor: pointer;}
.menuitem:hover { background-color: #ffffff;}
.menuitem:first-child { background-color:#1565D0; color: white; font-weight:bold;}
a { color: #000000; text-decoration: underline;}
a:hover { text-decoration: none;}
@media (max-width: 800px) { #sidebar { width: auto; position: relative; } #main { margin-right: 0; } }
@media (max-width: 600px) { #menubar { width: auto; float: none; } #main { margin: 0; } }</style>
<style>/* Stylesheet 2: */body { font-family: Arial; background-color: #d14836; line-height: 20px;}
.container { xmin-width: 900px;}
.wrapper { position: relative; overflow: auto;}
#top { color: #ffffff; padding: 15px; font-size: 30px; line-height: 26px; }
#top h1 { margin:0; line-height: 50px;}
#menubar { width: 190px; float: right;}
#main { padding: 10px; background-color: #ffffff; font: 80% Verdana;}
#main h1, #main h2 { color: #d14836;}
#sidebar { background-color: #F6DAD7; color: #d14836; padding: 10px;}
#bottom { text-align: center; padding: 10px; font-size: 70%; color: #ffffff;}
#menulist { padding:0; font: 16px verdana;}
.menuitem { width: 155px; background-color: #d14836; border: 1px solid #d14836; border-radius: 40px; color: #ffffff; list-style-type: none; margin: 10px; padding: 5px; text-align: center; cursor: pointer;}
.menuitem:nth-child(2) { background-color:white; color: #d14836; font-weight:bold;}
.menuitem:hover { background-color: #ffffff; color: #d14836;}
a { color: #d14836; text-decoration: none;}
a:hover { text-decoration: underline;}</style>
<style>/* Stylesheet 3: */body { font: 100% Verdana; margin: 20px; line-height: 26px;}
.container { xmin-width: 900px;}
.wrapper { position: relative; overflow: auto;}
#sidebar { background-color: #f1f1f1; border: 1px solid #d4d4d4; padding-left: 10px;}
#bottom { text-align: center; padding: 10px; font-size: 70%; line-height: 14px;}
h1, h2, h3 { color: #1565D0;}
#menulist { padding: 0; position: relative; overflow: auto;}
.menuitem { width: 165px; float: left; background-color: #555555; color: #ffffff; list-style-type: none; margin: 4px; padding: 2px; text-align: center; cursor: pointer;}
.menuitem:nth-child(3) { background-color:#1565D0;}
.menuitem:hover { background-color: #999999;}
a { color: #000000;}
a:hover { color: #84c754;}</style><style>/* Stylesheet 4: */body { font: 100% Courier New; margin: 20px; line-height: 26px; background-color: #000000;}
.container { xmin-width: 900px;}
.wrapper { position: relative; overflow: auto;}
#top { color: #84c754; padding: 15px;}
#main { padding: 10px; color: #84c754;}
#sidebar { color: #ffffff; border: 1px solid #ffffff; border-radius: 4px; padding: 10px; width: 320px; top: 0; right: 0; position: absolute; font-size: 80%; line-height: 20px;}
#bottom { border: 1px solid #ffffff; border-radius: 4px; color: #ffffff; text-align: center; padding: 10px; font-size: 70%; line-height: 14px;}
#top h1,#top p { margin: 0;}
.menuitem { color: #84c754; cursor: pointer;}
.menuitem:nth-child(4) { color:white; font-weight:bold;}
.menuitem:hover { color: #ffffff;}
a { color: #ffffff;}
a:hover { color: #84c754;}@media (max-width: 600px) { #sidebar { width: auto; margin-bottom:10px; position: relative; } }
</style>
</head><body>
<div class="container wrapper"> <div id="top"> <h1>Selamat Datang di Modul Makalah</h1> <p>Gunakan menu untuk memilih Stylesheets yang berbeda</p> </div> <div class="wrapper"> <div id="menubar"> <ul id="menulist"> <li class="menuitem" onclick="reStyle(0)">Stylesheet 1 <li class="menuitem" onclick="reStyle(1)">Stylesheet 2 <li class="menuitem" onclick="reStyle(2)">Stylesheet 3 <li class="menuitem" onclick="reStyle(3)">Stylesheet 4 <li class="menuitem" onclick="noStyles()">Tanpa Stylesheet </ul> </div> <div id="main"> <h1>Same Page Different Stylesheets</h1> <p>Ini adalah demonstrasi tentang bagaimana stylesheet yang berbeda dapat mengubah tata letak halaman HTML Anda. Anda dapat mengubah tata letak halaman ini dengan memilih stylesheet yang berbeda dalam menu, atau dengan memilih salah satu dari link berikut:<br> <a href="#" onclick="reStyle(0);return false">Stylesheet1</a>, <a href="#" onclick="reStyle(1);return false">Stylesheet2</a>, <a href="#" onclick="reStyle(2);return false">Stylesheet3</a>, <a href="#" onclick="reStyle(3);return false">Stylesheet4</a>. </p> <h2>Tanpa Styles</h2> <p>Halaman ini menggunakan elemen DIV untuk mengelompokkan berbagai bagian halaman HTML. Klik di sini untuk melihat bagaimana halaman terlihat seperti tanpa stylesheet:<br><a href="#" onclick="noStyles();return false">No Stylesheet</a>.</p> </div> <div id="sidebar"> <h3>Side-Bar</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div> </div> <div id="bottom"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div></div>
<script>function noStyles() { document.styleSheets[0].disabled = true; document.styleSheets[1].disabled = true; document.styleSheets[2].disabled = true; document.styleSheets[3].disabled = true;}
function reStyle(n) { noStyles() document.styleSheets[n].disabled = false;}
function closeBlackdiv() { var blackdiv, stylediv; blackdiv = document.getElementById("blackdiv") blackdiv.parentNode.removeChild(blackdiv); stylediv = document.getElementById("stylediv") stylediv.parentNode.removeChild(stylediv);}
function showStyle(n) {var div, text, blackdiv;blackdiv = document.createElement("DIV");blackdiv.setAttribute("style","background-color:#000000;position:absolute;width:100%;height:100%;top:0;opacity:0.5;margin-left:-20px;");blackdiv.setAttribute("id","blackdiv");blackdiv.setAttribute("onclick","closeBlackdiv()");document.body.appendChild(blackdiv);div = document.createElement("DIV");div.setAttribute("id","stylediv");div.setAttribute("style","background-color:#ffffff;padding-left:5px;position:absolute;width:auto;height:auto;top:100px;bottom:50px;left:200px;right:200px;overflow:auto;font-family: monospace; white-space: pre;line-height:16px;");text = document.createTextNode(document.getElementsByTagName("STYLE")[n].innerHTML);div.appendChild(text);document.body.appendChild(div);//alert(document.getElementsByTagName("STYLE")[n].innerHTML);}reStyle(0);</script></body></html>

Contoh Tampilan Halaman CSS

Sekian artikel tentang Pengertian CSS, Fungsi, dan Contoh Format Penulisan CSS, Semoga Bermanfaat, dan selamat mencoba.

Nikita Dini Blogger, Internet Marketer, Web Designer