Belajar CSS Bagian 1 ( Introduction )
Monday, January 31, 2011
Labels:
Tips Trik
CSS merupakan kependekan dari Cascading Styling Sheet, yaitu script yang digunakan untuk memformat dokumen HTML sehingga dapat mempermudah dan mempersimpel code-code HTML yang kita buat daripada melakukan format dengan menset atribut dari tag-tag HTML.
CSS banyak digunakan saat ini oleh web developer, bahkan syarat mutlak bagi web developer sebagai pemercantik halaman website.
CSS dapat dibuat dalam 3 metode, yaitu :
- Inline CSS
- Infile CSS
- Outfile CSS
A. Inline CSS
Pada metode ini CSS dibuat didalam tag-tag HTML yang akan diformat secara individual/per-tag
Perhatikan contoh1 berikut untuk lebih jelasnya :
<html>
<head>
<title>Belajar CSS - Introduction (By. CobaLihatSaja.com)</title>
</head>
<body>
<font style="color: red;font-size: 30px;">
Belajar CSS - Introduction (By. CobaLihatSaja.com)
</font>
</body>
</html>
Hasil :<head>
<title>Belajar CSS - Introduction (By. CobaLihatSaja.com)</title>
</head>
<body>
<font style="color: red;font-size: 30px;">
Belajar CSS - Introduction (By. CobaLihatSaja.com)
</font>
</body>
</html>
Penjelasan :
Seperti anda lihat pada code diatas dimana kita melakukan pemformatan pada tag <font> dengan menggunakan inline css, yaitu dengan mengetikan atribut “style” dan tambahkan value-value yang ingin ditentukan (pada contoh diatas kita menset value untuk warna font (“color”) dan ukuran font(“font-size”).
B. Infile CSS
Pada metode ini CSS dibuat dalam file yang sama dengan file HTML yang akan diformat/dibagian heading.
Perhatikan contoh2 berikut untuk lebih jelasnya :
<html>
<head>
<title>Belajar CSS - InFile CSS (By. CobaLihatSaja.com)</title>
<style type="text/css">
font
{
color: blue;
font-size: 25px;
font-style: italic;
}
</style>
</head>
<body>
<font>
Belajar CSS - InFile CSS (By. CobaLihatSaja.com)
</font>
</body>
</html>
Hasil :<head>
<title>Belajar CSS - InFile CSS (By. CobaLihatSaja.com)</title>
<style type="text/css">
font
{
color: blue;
font-size: 25px;
font-style: italic;
}
</style>
</head>
<body>
<font>
Belajar CSS - InFile CSS (By. CobaLihatSaja.com)
</font>
</body>
</html>
Penjelasan :
Seperti dilihat pada code diatas, posisi script CSS tidak lagi berada di tag <font> melainkan berada didalam tag <style> pada header file HTML, dengan format “tag {“atribut-atribut: value;}”.
C. Outfile CSS
Pada metode ini CSS dibuat dalam file terpisah yang disimpan dalam format .css, dan untuk menggunakannya diperlukan tag <link> sebagai penghubung antara file HTML dengan file CSS tersebut.
Perhatikan contoh berikut untuk lebih jelasnya :
a. CSS File
Langkah pertama buatlah sebuah file dengan nama CobaLihatSaja.css melalui text editor anda, dan selanjutnya masukan code dibawah ini :
h4
{
color: green;
font-size: 20px;
font-style: italic;
}
b. HTML File
h4
{
color: green;
font-size: 20px;
font-style: italic;
}
b. HTML File
Lalu lanjutkan dengan membuat file HTML dengan nama CobaLihatSaja.htm melalui text editor anda dan selanjutnya masukan code dibawah ini :
<html>
<head>
<title>Belajar CSS - OutFile CSS (By. CobaLihatSaja.com)</title>
<link rel="stylesheet" type="text/css" href="CobaLihatSaja.css"/>
</head>
<body>
<h4>Belajar CSS - OutFile CSS (By. CobaLihatSaja.com)</h4>
</body>
</html>
Selanjutnya jalankan file CobaLihatSaja.htm, maka hasilnya akan seperti dibawah ini :<head>
<title>Belajar CSS - OutFile CSS (By. CobaLihatSaja.com)</title>
<link rel="stylesheet" type="text/css" href="CobaLihatSaja.css"/>
</head>
<body>
<h4>Belajar CSS - OutFile CSS (By. CobaLihatSaja.com)</h4>
</body>
</html>
Penjelasan :
Untuk struktur script dari OutFile CSS ini sama dengan InFile CSS, yang membedakan hanya berada difile tersendiri yang disimpan dalam format .css, dan diakses oleh file HTML dengan menggunakan tag <link> dengan atribut “href” sesuai dengan nama file CSS yang kita buat.
Cukup mudah bukan untuk mempelajari CSS, ok sampai jumpa pada tutorial selanjutnya hanya di CobaLihatSaja.Com.
Salam Persahabatan...
Terima Kasih Sudah Mampir, Salam Persahabatan...
0 comments:
Post a Comment