belajar CSS dasar

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.
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 ratatengah
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
dengantag
htmldan
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
<taghtml
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
tandapagar
*/
#id-class
{property:value;}
#bunting
{font-size:
12px;}
Untuk selector yang
menempel pada tag
html maka
penulisannya adalah
/*diawali
dengantag
htmldan
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.

kata kunci yang baru dicari : belajar CSS dasar

Title : belajar CSS dasar
Description : Berkenalan Dengan CSS - Mungkin sobat sudah sering mendengar tentang css, dan bagi beberapa sobat mungkin juga masih bingung tentang ...

belajar CSS dasar

0 Response to " belajar CSS dasar "

Posting Komentar