Apa Itu CSS? Fungsi & Panduan Dasar CSS

Apa Itu CSS – Bagi para web dev, atau bagi kamu yang hoby utak-atik website kata CSS pasti sudah sangat tidak asing lagi. Apa lagi web dev, CSS merupakan “makanan” kesehariannya. Namun bagaimana bagi anda para pemula, atau anda yang memiliki keinginan untuk menjadi seorang web dev? Ya, artikel ini akan menjelaskan secara rinci apa itu css, fungsi dan panduan dasar di CSS. Silahkan baca sampai akhir!

Logo HTML5, CSS3, JS dan Responsive

Logo HTML5, CSS3, JS dan Responsive

Penjelasan & Fungsi CSS *

CSS atau kepanjangan dari “Cascading Style Sheets” adalah bahasa style sheet yang digunakan untuk menggambarkan presentasi dari dokumen yang ditulis dalam bahasa markup.  Meskipun paling sering digunakan untuk mengatur gaya visual halaman web dan user interface yang ditulis dalam HTML dan XHTML, yang bahasa dapat diterapkan untuk setiap XML dokumen, termasuk XML polos, SVG dan XUL, dan berlaku untuk render di pidato, atau media lainnya. Seiring dengan HTML dan JavaScript, CSS adalah teknologi dasar yang digunakan oleh sebagian besar website untuk membuat halaman web secara visual menarik, user interface untuk aplikasi web, dan user interface untuk aplikasi mobile. Nah, bahasa mudahnya versi kami, CSS merupakan merupakan kode-kode dasar dan kode yang saling berhubungan untuk mengatur format atau susunan HTML. konsep CSS pertama kali di usulkan pada tahun 1994 oleh Håkon Wium Lie dan Bert Bos saat mereka bekerja di CERN. Baca: Wikipedia

Panduan Dasar CSS *

Jika anda telah memiliki pengetahuan dasar pada HTML, maka tidaklah sulit untuk membangun sebuah css yang menarik bagi website anda. Anda tinggal mengkombinasikan platform apa yang anda pakai untuk membuat website. Untuk mudahnya, kami sangat menyarankan anda belajar menggunakan template website dasar. yaitu gabungan dari CSS + JS + HTML. Jika sudah mahir, barulah anda menerapkannya ke beberapa platform website seperti wordpress, drupal, meganto, joomla, dan lainnya. Untuk dasar CSS, ikuti contoh berikut.

body {
….kombinasikan dengan css seluruh laman anda..
}

#header {

.menu {
}
}

#footer {

.credit {
}
}

Penjelasan:

  • Tag body menandakan element keseluruhan dari susunan HTML
  • Tanda {..} merupakan tanda pembuka dan penutup di CSS
  • Tanda : dan ; biasanya digunakan untuk membuka dan menutup kode di css yang ada di dalam kode pembuka dan penutup { dan }. Contoh: body { background: #fff; }
  • Tanda # biasanya di gunakan untuk menandakan kode id tertentu saat kita memanggil kode css tersebut di markup HTML. misalnya pemanggilan kode css di markup HTML seperti di bawah.
    <div id=”header”>
       <div class=”menu”></div></div>
  • Ikuti contoh diatas untuk membuat kode CSS di masing-masing elemen dan menyusunnya di HTML.

Contoh CSS

body {
background: #fff;
font-family: “Roboto Slab”;
font-size: 30px;
margin: 0 1px 0 0;
border: 3px solid;

#header {
height:50px;
background:#F0F0F0;
border:1px solid #CCC;
width:960px;
margin:0px auto;
.menu {
display: inline;
}
}

#footer{
width:980px;
height: 150px;
padding: 10px;
font-size: 12px;
background-color: #94171b;
color: #fff;
}

#footer_left{float:left; width:300px; text-align:left; border: 1px solid;}
#footer_middle{width:300px; text-align:left; border: 1px solid;}
#footer_right{float:right; width:300px; text-align:left; border: 1px solid;}

Penjelasan

Contoh diatas meliputi body, header, menu, footer 3 colom.

Contoh Pemanggilan Kode CSS di HTML

<div id:”header”>
<div class:”menu”>
<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#news”>News</a></li>
<li><a href=”#contact”>Contact</a></li>
<li><a href=”#about”>About</a></li>
</ul>
</div>
</div>

<div id=”footer”>
<div id=”footer_left”>
<b>SITE NAVIGATION</b><br>
<a href=”/dev/site/”>Home</a><br>
<a href=”/dev/site/about.php”>About</a><br>
<a href=”/dev/site/dining.php”>Food</a><br>
<a href=”/dev/site/drinks.php”>Drinks</a><br>
<a href=”/dev/site/”>Contact</a>
</div>
<div id=”footer_middle”>
<b>CONNECT WITH US SOCIALLY</b><br>
http://www.facebook.com
http://www.twitter.com
http://www.instagram.com
http://www.youtube.com
</div>
<div id=”footer_right”>
&copy;2015 Site. All rights reserved<br><br>
</div>
</div>

Pemanggilan file style css di HTML

Biasanya, folder file assets baik css, images, js di pisahkan di folder public HTML di file manager anda. Nah, untuk pemanggilan folder tersebut, silahkan gunakan berikut ini dibawah tag <head> anda.

  • <link rel=”stylesheet” href=”assets/css/style.css” />

File CSS selalu berakhiran “.css”. jadi, perhatikan tulisan assets/css/style.css yang saya berikan tanda Bold tersebut. penjelasannya adalah 2 folder public yaitu folder assets, folder css dan satu file css yaitu style.css. Silahkan kombinasikan sesuai dengan folder di public html anda.

Note:

Dibeberapa kasus yang sering kita jumpai, ada beberapa file css yang sedikit. Nah, agar anda menghemat ruang di hosting anda, silahkan langsung letakkan saja file css anda di file HTML tanpa membuatnya di folder tertentu di file manager anda. untuk kode pemanggilannya adalah sebagai berikut.

<head>
..
<style>

KODE CSS ANDA DISINI
..
</style>

Nah, itulah dasar-dasar CSS yang bisa anda pelajari lebih lanjut. Semoga bermanfaat dan selamat belajar.

Incoming search terms:

  • apa itu css
  • pengetahuan tentang css
  • css adalah
  • fungsi folder css

One Response

  1. Komodo tours August 15, 2016

Leave a Reply