Berkenalan Dengan Css

Mungkin teman sudah sering mendengar wacana css, dan bagi beberapa teman mungkin juga masih resah wacana apa itu css, sama ibarat 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 yaitu akronim dari Cascading Style Sheets, yaitu suatu bahasa stylesheet yang digunakan untuk mengatur tampilan dokumen HTML.

CSS telah disesuai ketentuanisasi 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 memakai css juga tidak apa-apa, toh HTML sendiri bisa kok mengatur tampilannya sendiri, tapi coba teman bayangkan, kalau mengelola suatu blog lalu ingin merubah warna atau jenis text atau object tertentu, niscaya akan ribet alasannya yaitu kita harus merubah satu per satu halaman html tersebut.

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

Mungkin teman sudah sering mendengar wacana css Berkenalan Dengan CSS

Cara Menggunakan CSS Di Dalam File HTML

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

1. Internal CSS

Disebut internal alasannya yaitu kita menuliskan file css ini di dalam file html secara pribadi (jadi satu dengan instruksi html-nya), contohnya sebagai memberikankut :

<html> <head> <title>CSS Pertamaku</title> <style type="text/css"> p {color: white;} body {background-color: black;} </style> </head> <body> <p>Ayo berguru CSS</p> </body> </html>

Yang berwarna biru itu yaitu instruksi css yang mengatur tag p (paragraph)

2. External CSS

Berbeda dari Internal CSS, External CSS yaitu 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 memberikankut :

<html> <head> <title>CSS Pertamaku</title> <link rel="stylesheet" type="text/css" href="file.css"/> </head> <body> <p>Ayo berguru CSS</p> </body> </html>

Yang berwarna biru yaitu 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 yaitu penulisan secara pribadi atau "gandeng" dengan instruksi html yang akan di atur oleh css tersebut, contohnya sebagai memberikankut :

<html> <head> <title>CSS Pertamaku</title> </head> <p style=”background: blue; color: white;”>Ayo berguru CSS</p> </body> </html>

Yang berwarna biru yaitu script css.

Sintaks (Cara Penulisan) CSS

Secara garis besar, penulisan css memakai 3 komponen, yaitu : Selector, Property, dan Value. ludang kecepeh tepatnya ibarat ini selector {property1: value; property2:value; dst}.

Misalnya kalau dalam file html memakai paragraf rata tengah penulisannya yaitu <p align="center">, dimana p yaitu tag dan align="center" yaitu atributnya, maka untuk sintaks css nya yaitu p {text-align: right;}.

Selector
Selector pada CSS sama dengan tag atau komponen pada HTML yaitu yang terdapat antara tanda < dan tanda > contohnya <h1>, <p>, <b>, dll.
Property
Property pada CSS sama dengan atribut pada HTML yaitu. berfungsi untuk memmemberikan evaluasi dari selector.
Value
Value yaitu evaluasi yang kita memberikankan kepada property

Penulisan Comment Pada CSS

Seperti bahasa-bahasa lainnya, css juga mengenal adanya comment yang bertujuan untuk mempermemperringan dan sepele kita knorma dan budbahasa melaksanakan penulisan. Penulisan comment pada css yaitu dengan instruksi pembuka /* dan ditutup dengan instruksi */ contoh

/* ini comment, ga bakal dihukum */

Penggunaan Class dan Id Selector Pada CSS

Class Selector
Class Selector yaitu penggunaan beberapa selector yang digunakan ludang kecepeh 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 memakai class selector diluar tag html maka harus ditulis diantara <div class="nama-class"> dan </div>, pola :

<div class="testing"> <h1>belajar css</h1> </div>

Untuk class yang melekat pada tag html maka penulisaanya yaitu <tag html class="class-name"></tag html>, pola :

<h1 class="testing">belajar css</h1>

Id Selector
Id Selector sesungguhnya sama dengan class selector, perbedaanya hanyalah pada penggunaan dan penulisan sintaksnya. Id selector yaitu selector yang hany boleh digunakan sekali dalam keselurah file html. Untuk penulisan id selector yaitu dengan memakai pagar.

/* diawali dengan tanda pagar */ #id-class {property:value;} #bunting {font-size: 12px;}

Untuk selector yang melekat 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 kalau 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 laba kalau kita bisa memahami css serta mengaplikasikan css, contohnya knorma dan budbahasa melaksanakan meningkatkan secara optimal seo on page dengan tag heading dinamis dimana css bisa digunakan untuk mengatur besar font knorma dan budbahasa menjadi H1 dan H2 semoga terlihat sama dan tidak amburadul.

Itulah sekelumit pengethuan saya wacana css hasil dari searching di mbah Google, semoga memberi manfaat.