Berkenalan Dengan Css
Mungkin kawan sudah sering mendengar wacana css, dan bagi beberapa kawan mungkin juga masih risau wacana apa itu css, sama seumpama saya hehehe....
Sebagi seorang blogger, terlebih webmaster or designer or whatever lah :D mengerti css sangatlah penting, ya meskipun tidak secara keseluruhan, at least kita tahu lah apa itu css :)
CSS yakni abreviasi dari Cascading Style Sheets, yakni sebuah bahasa stylesheet yang dipakai untuk mengontrol penampilan dokumen HTML.
CSS sudah distandarisasi oleh W3C (World Wide Web Consortium) dan ialah kumpulan dari tag html yang kita buat kedalam satu file dan dengan sistem penulisan tertentu
Sebenranya sih tanpa menggunakan css juga tidak apa-apa, toh HTML sendiri sanggup kok mengontrol tampilannya sendiri, namun coba kawan bayangkan, apabila mengorganisir sebuah blog lalu ingin mengganti warna atau jenis text atau object tertentu, niscaya akan ribet alasannya yakni kita mesti mengganti satu per satu halaman html tersebut.
Dengan adanya css sanggup menolong kita untuk mengontrol penampilan si html, sehingga apabila umpamanya kawan memilik seratus halaman html maka kita tidak perlu merubahnya satu per satu, cukup dengan mengganti css nya maka beres deh.
Kita sanggup menggunakan 3 cara untuk mengaplikasikan css di dalam html, yakni Internal CSS, External CSS, dan Inline CSS
Disebut internal alasannya yakni kita menuliskan file css ini di dalam file html secara eksklusif (jadi satu dengan isyarat html-nya), umpamanya selaku berikut :
Berbeda dari Internal CSS, External CSS yakni file css yang tidak ditulis dalam file html secara langsung, file css ini berada terpisah dengan ekstensi .css dan diundang untuk mengontrol html dibawahnya, umpamanya selaku berikut :
Yang berwarna biru yakni lokasi file css dimana file tersebut berada pada folder yang serupa dengan file html-nya.
Jika Internal dan External CSS ditulis diantara tag
Yang berwarna biru yakni script css.
Secara garis besar, penulisan css menggunakan 3 komponen, yakni : Selector, Property, dan Value. lebih tepatnya seumpama ini
Misalnya apabila dalam file html menggunakan paragraf rata tengah penulisannya yakni
Seperti bahasa-bahasa lainnya, css juga mengenal adanya comment yang berniat untuk memudahkan kita saat melakukan penulisan. Penulisan comment pada css yakni dengan isyarat pembuka
Class Selector
Class Selector yakni penggunaan beberapa selector yang dipakai lebih dari satu kali. Untuk menuliskan class pada css dimulai dengan dot atau titik.
Jika ingin menempelkan class pada tag html maka penulisannya adalah
Jika menggunakan class selector diluar tag html maka mesti ditulis diantara
Untuk class yang melekat pada tag html maka penulisaanya yakni
Id Selector bahu-membahu sama dengan class selector, perbedaanya hanyalah pada penggunaan dan penulisan sintaksnya. Id selector yakni selector yang hany boleh dipakai sekali dalam keselurah file html. Untuk penulisan id selector yakni dengan menggunakan pagar.
Untuk selector yang melekat pada tag html maka penulisannya adalah
Untuk penggunaannya sama dengan class selector dimana apabila dipakai diluar tagh html maka mesti ditulis diantara
Itulah sekelumit pengethuan saya wacana css hasil dari searching di mbah Google, mudah-mudahan bermanfaat.
Sebagi seorang blogger, terlebih webmaster or designer or whatever lah :D mengerti css sangatlah penting, ya meskipun tidak secara keseluruhan, at least kita tahu lah apa itu css :)
Apa Itu CSS?
CSS yakni abreviasi dari Cascading Style Sheets, yakni sebuah bahasa stylesheet yang dipakai untuk mengontrol penampilan dokumen HTML.
CSS sudah distandarisasi oleh W3C (World Wide Web Consortium) dan ialah kumpulan dari tag html yang kita buat kedalam satu file dan dengan sistem penulisan tertentu
Mengapa Harus Menggunakan CSS?
Sebenranya sih tanpa menggunakan css juga tidak apa-apa, toh HTML sendiri sanggup kok mengontrol tampilannya sendiri, namun coba kawan bayangkan, apabila mengorganisir sebuah blog lalu ingin mengganti warna atau jenis text atau object tertentu, niscaya akan ribet alasannya yakni kita mesti mengganti satu per satu halaman html tersebut.
Dengan adanya css sanggup menolong kita untuk mengontrol penampilan si html, sehingga apabila umpamanya kawan memilik seratus halaman html maka kita tidak perlu merubahnya satu per satu, cukup dengan mengganti css nya maka beres deh.
Cara Menggunakan CSS Di Dalam File HTML
Kita sanggup menggunakan 3 cara untuk mengaplikasikan css di dalam html, yakni Internal CSS, External CSS, dan Inline CSS
1. Internal CSS
Disebut internal alasannya yakni kita menuliskan file css ini di dalam file html secara eksklusif (jadi satu dengan isyarat html-nya), umpamanya selaku berikut :
<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 yakni isyarat css yang mengontrol tag p (paragraph)2. External CSS
Berbeda dari Internal CSS, External CSS yakni file css yang tidak ditulis dalam file html secara langsung, file css ini berada terpisah dengan ekstensi .css dan diundang untuk mengontrol html dibawahnya, umpamanya selaku berikut :
<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 yakni lokasi file css dimana file tersebut berada pada folder yang serupa dengan file html-nya.
3. Inline CSS
Jika Internal dan External CSS ditulis diantara tag
<head> dan </head>, maka Inline CSS yakni penulisan secara eksklusif atau "gandeng" dengan isyarat html yang mau di atur oleh css tersebut, umpamanya selaku berikut : <html>
<head>
<title>CSS Pertamaku</title>
</head>
<p style=”background: blue; color: white;”>Ayo berguru CSS</p>
</body>
</html> Yang berwarna biru yakni script css.
Sintaks (Cara Penulisan) CSS
Secara garis besar, penulisan css menggunakan 3 komponen, yakni : Selector, Property, dan Value. lebih tepatnya seumpama ini
selector {property1: value; property2:value; dst}.Misalnya apabila dalam file html menggunakan paragraf rata tengah penulisannya yakni
<p align="center">, dimana p yakni tag dan align="center" yakni atributnya, maka untuk sintaks css nya yakni p {text-align: right;}.- Selector
Selector pada CSS sama dengan tag atau elemen pada HTML yakni yang terdapat antara tanda<dan tanda>umpamanya<h1>,<p>,<b>, dll. - Property
Property pada CSS sama dengan atribut pada HTML yaitu. berfungsi untuk memberi nilai dari selector. - Value
Value yakni nilai yang kita berikan terhadap property
Penulisan Comment Pada CSS
Seperti bahasa-bahasa lainnya, css juga mengenal adanya comment yang berniat untuk memudahkan kita saat melakukan penulisan. Penulisan comment pada css yakni dengan isyarat pembuka
/* dan ditutup dengan isyarat */ contoh /* ini comment, ga bakal dihukum */ Penggunaan Class dan Id Selector Pada CSS
Class Selector
Class Selector yakni penggunaan beberapa selector yang dipakai 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 mesti ditulis diantara
<div class="nama-class"> dan </div>, rujukan : <div class="testing">
<h1>belajar css</h1>
</div> Untuk class yang melekat pada tag html maka penulisaanya yakni
<tag html class="class-name"></tag html>, rujukan : <h1 class="testing">belajar css</h1> Id SelectorId Selector bahu-membahu sama dengan class selector, perbedaanya hanyalah pada penggunaan dan penulisan sintaksnya. Id selector yakni selector yang hany boleh dipakai sekali dalam keselurah file html. Untuk penulisan id selector yakni dengan menggunakan 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 apabila dipakai diluar tagh html maka mesti ditulis diantara
<div id="id-class"> dan </div>, cuma beda di class dan id saja, contoh <div id="bunting">
<h1>belajar css</h1>
</div> <h1 id="bunting">belajar css</h1> Ada banyak laba apabila kita sanggup memahami css serta mengaplikasikan css, umpamanya saat melakukan mengembangkan secara maksimal seo on page dengan tag heading dinamis dimana css sanggup dipakai untuk mengontrol besar font saat menjadi H1 dan H2 supaya terlihat sama dan tidak amburadul.Itulah sekelumit pengethuan saya wacana css hasil dari searching di mbah Google, mudah-mudahan bermanfaat.
0 Response to "Berkenalan Dengan Css"
Post a Comment