Berkenalan Dengan CSS - Mungkin sobat sudaah sering mendengar tentang css, dan bagi beberaapa sobat mungkin juga maasih bingung tentang apa itu css, sama seperti saaya hehehe....
Apa Itu CSS?
CSS adalah singkatan dari Cascading Style Sheets, yaitu suatu bahasa stylesheet yang digunakan untuk mengaatur 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 dengaan metode penulisan tertentu
Mengapa Harus Menggunakan CSS?
Sebenranya sih taanpa menggunakan css juga tidak apa-apa, toh HTML sendiri bisa kok mengatur tampilaannya sendiri, tapi coba sobat bayangkan, jika mengelola suatu
blog kemudian ingin merubah warna atau jenis text atau object tertentu, pasti akaan ribet karena kita haarus merubah satu per satu halaman html tersebut.
Dengan adanya css bisa membaantu kita untuk mengatur tampilan si html, sehingga jika misalnya sobat memilik seratus halamaan html makaa kita tidak perlu merubahnya satu per satu, cukup dengaan merubah css nya maka beres deh.
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 karenaa 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 dipaanggil 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 beraada 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 ketikaa melakukan penulisan. Penulisan comment pada css adalaah 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 digunaakan lebih dari satu kali. Untuk menuliskaan 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 penulisaannya 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 haarus ditulis diantara <div class="nama-class"> dan </div>, contoh :
<div class="testing">
<h1>belajar css</h1>
</div>
Untuk class yang menempel paada tag html maka penulisaanya adalah <tag html class="class-name"></tag html>, contoh :
<h1 class="testing">belajar css</h1>
Id Selector
Id Selector sebenarnya saama dengan class selector, perbedaanya hanyalaah pada penggunaan dan penulisan sintaksnya. Id selector adaalah selector yang hany boleh dipaakai sekali dalam keselurah file html. Untuk penulisaan id selector adalah dengan menggunaakan pagar.
/* diawali dengan tanda pagar */
#id-class {property:value;}
#bunting {font-size: 12px;}
Untuk selector yang menempel pada tag html maaka penulisannya adalah
/* diawali dengan tag html dan pagar */
taghtml#id-class {property:value;}
h2#bunting {font-size: 18px;}
Untuk penggunaannya sama dengan class selector dimaana jika digunakan diluar tagh html maka harus ditulis diaantara <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 keuntungaan 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 saama dan tidak amburadul.
Itulah sekelumit pengethuan saya tentang css hasil dari searching di mbah Google, semoga bermanfaat.
.gif)
.gif)
