Berkenalan Dengan CSS

Berkenalan Dengan CSS - Mungkin sobat sudah sering mendengar tentang css, dan bagi beberapa sobat mungkin juga masih bingung tentang apa itu css, sama seperti saya hehehe....

Sebagi seorang blogger, apalagi webmaster or designer or whatever lah :D memahami css sangatlah penting, ya walaupun tidak secara keseluruhan, at least kita tahu lah apa itu css :)

Apa Itu CSS?


CSS adalah singkatan dari Cascading Style Sheets, yaitu suatu bahasa stylesheet yang digunakan untuk mengatur tampilan dokumen HTML.

CSS telah distandarisasi oleh W3C (World Wide Web Consortium) dan merupakan kumpulan dari tag html yang kita buat kedalam satu file dan dengan metode penulisan tertentu

Mengapa Harus Menggunakan CSS?


Sebenranya sih tanpa menggunakan css juga tidak apa-apa, toh HTML sendiri bisa kok mengatur tampilannya sendiri, tapi coba sobat bayangkan, jika mengelola suatu blog kemudian ingin merubah warna atau jenis text atau object tertentu, pasti akan ribet karena kita harus merubah satu per satu halaman html tersebut.

Dengan adanya css bisa membantu kita untuk mengatur tampilan si html, sehingga jika misalnya sobat memilik seratus halaman html maka kita tidak perlu merubahnya satu per satu, cukup dengan merubah css nya maka beres deh.

CSS

Cara Menggunakan CSS Di Dalam File HTML


Kita bisa menggunakan 3 cara untuk mengaplikasikan css di dalam html, yaitu Internal CSS, External CSS, dan Inline CSS

1. Internal CSS


Disebut internal karena kita menuliskan file css ini di dalam file html secara langsung (jadi satu dengan kode html-nya), contohnya sebagai berikut :
<html>
<head>
<title>CSS Pertamaku</title>
<style type="text/css">
p {color: white;}
body {background-color: black;}
</style>

</head>
<body>
<p>Ayo belajar CSS</p>
</body>
</html>
Yang berwarna biru itu adalah kode css yang mengatur tag p (paragraph)

2. External CSS


Berbeda dari Internal CSS, External CSS adalah file css yang tidak ditulis dalam file html secara langsung, file css ini berada terpisah dengan ekstensi .css dan dipanggil untuk mengatur html dibawahnya, contohnya sebagai berikut :
<html>
<head>
<title>CSS Pertamaku</title>
<link rel="stylesheet" type="text/css" href="file.css"/>
</head>
<body>
<p>Ayo belajar CSS</p>
</body>
</html>

Yang berwarna biru adalah lokasi file css dimana file tersebut berada pada folder yang sama dengan file html-nya.

3. Inline CSS


Jika Internal dan External CSS ditulis diantara tag <head> dan </head>, maka Inline CSS adalah penulisan secara langsung atau "gandeng" dengan kode html yang akan di atur oleh css tersebut, contohnya sebagai berikut :
<html>
<head>
<title>CSS Pertamaku</title>
</head>
<p style=”background: blue; color: white;”>Ayo belajar CSS</p>
</body>
</html>

Yang berwarna biru adalah script css.

Sintaks (Cara Penulisan) CSS


Secara garis besar, penulisan css menggunakan 3 komponen, yaitu : Selector, Property, dan Value. lebih tepatnya seperti ini selector {property1: value; property2:value; dst}.

Misalnya jika dalam file html menggunakan paragraf rata tengah penulisannya adalah <p align="center">, dimana p adalah tag dan align="center" adalah atributnya, maka untuk sintaks css nya adalah p {text-align: right;}.
  • Selector
    Selector pada CSS sama dengan tag atau komponen pada HTML yaitu yang terdapat antara tanda < dan tanda > misalnya <h1>, <p>, <b>, dll.
  • Property
    Property pada CSS sama dengan atribut pada HTML yaitu. berfungsi untuk memberi nilai dari selector.
  • Value
    Value adalah nilai yang kita berikan kepada property

Penulisan Comment Pada CSS


Seperti bahasa-bahasa lainnya, css juga mengenal adanya comment yang bertujuan untuk mempermudah kita ketika melakukan penulisan. Penulisan comment pada css adalah dengan kode pembuka /* dan ditutup dengan kode */ contoh
/* ini comment, ga bakal dieksekusi */

Penggunaan Class dan Id Selector Pada CSS


Class Selector
Class Selector adalah penggunaan beberapa selector yang digunakan lebih dari satu kali. Untuk menuliskan class pada css dimulai dengan dot atau titik.
/* diawali dengan titik (dot) */
.nama-class {property:value;}
.testing {font-size: 12px;}

Jika ingin menempelkan class pada tag html maka penulisannya adalah
/* diawali dengan tag html dan titik */
taghtml.nama-class {property:value;}
h2.testing {font-size: 18px;}

Jika menggunakan class selector diluar tag html maka harus ditulis diantara <div class="nama-class"> dan </div>, contoh :
<div class="testing">
<h1>belajar css</h1>
</div>

Untuk class yang menempel pada tag html maka penulisaanya adalah <tag html class="class-name"></tag html>, contoh :
<h1 class="testing">belajar css</h1>
Id Selector
Id Selector sebenarnya sama dengan class selector, perbedaanya hanyalah pada penggunaan dan penulisan sintaksnya. Id selector adalah selector yang hany boleh dipakai sekali dalam keselurah file html. Untuk penulisan id selector adalah dengan menggunakan pagar.
/* diawali dengan tanda pagar */
#id-class {property:value;}
#bunting {font-size: 12px;}

Untuk selector yang menempel pada tag html maka penulisannya adalah
/* diawali dengan tag html dan pagar */
taghtml#id-class {property:value;}
h2#bunting {font-size: 18px;}

Untuk penggunaannya sama dengan class selector dimana jika digunakan diluar tagh html maka harus ditulis diantara <div id="id-class"> dan </div>, hanya beda di class dan id saja, contoh
<div id="bunting">
<h1>belajar css</h1>
</div>
<h1 id="bunting">belajar css</h1>
Ada banyak keuntungan jika kita bisa memahami css serta mengaplikasikan css, contohnya ketika melakukan optimasi seo on page dengan tag heading dinamis dimana css bisa digunakan untuk mengatur besar font ketika menjadi H1 dan H2 agar terlihat sama dan tidak amburadul.

Itulah sekelumit pengethuan saya tentang css hasil dari searching di mbah Google, semoga bermanfaat.

Title : Berkenalan Dengan CSS
URL : https://blogedek.blogspot.com/2013/04/pengertian-dasar-css.html
Jangan lupa untuk membagikan artikel Berkenalan Dengan CSS ini jika bermanfaat bagi sobat.

0 comment | add comment

Post a Comment

Terima kasih sudah mampir di Blog Gedek. Jika sobat ingin memberikan komentar silahkan isi form kementar di bawah dengan sopan dan jangan spam.

Semua komentar akan dimoderasi dahulu. Mohon maaf jika membalasnya lama, jangan lupa mampir lagi ya :)